angular / angular/angular

Service worker doesn't support seeking in videos

Open
#25,865 27 comments 10 reactions 0 assignees View on GitHub
area: service-worker browser: safari freq2: medium open for contributions P4 state: confirmed type: bug/fix workaround2: non-obvious
Dominant language
TypeScript
Stars
101k
Forks
27.5k
Avg merge
1d 19h
Merged PRs (30d)
288

Description

## I'm submitting a...



[x] Bug report
[x] Feature request (not sure, maybe this is more a feature request?)

## Current behavior
If you `ng run app:build:production` and your pwa comes with a `` element where you also utilize seeking (setting `currentTime` depending on your app logic and/or user input) it will not work or only very inconsistently. Most videos will simply run from start and not at the setted `currentTime` position. This is only the case when videos are delivered/fetched by the service worker. So it works in development mode.

## Expected behavior
Videos should start at the setted `currentTime`.

## Minimal reproduction of the problem with instructions

// on template

<video id="myVideo"><source id="myVideoSrc" src="video.mp4" type="video/mp4"></video>

// in page.ts
let videoObject = document.getElementById("myVideo");
videoObject.currentTime = 100;
videoObject.play();

// now build for production
// @angular/pwa has to be installed
> ng run app:build:production

## Environment
Angular version: 6.1.2

Browser:
Chrome (desktop) version 69

## Others:
This seems to be a known problem since service workers don't know Range requests. However it also looks like very easily fixable if I understand this thread comment correctly: https://bugs.chromium.org/p/chromium/issues/detail?id=575357#c10

A workaround would be a convenient way to completely exclude requests from service worker (not just set strategies for them). But obviously it would be better if we also could cache some videos. For exclusion also this issue may be relevant : https://github.com/angular/angular/issues/21191

##
_**EDIT(gkalpak):** Issue summary in https://github.com/angular/angular/issues/25865#issuecomment-634048868._

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue with the shown element and `ng run app:build:production`, comparing development behavior with videos fetched by the service worker. Start by tracing how the production service worker handles video and Range requests; done means seeking to the requested `currentTime` works consistently without breaking normal video delivery.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.