Service worker doesn't support seeking in videos

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 <video> 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._

[mordka]

We hit this issue, because requests to video needed to be withCredentials and SW failed over without applying cookies to headers. A workaround was to skip handling request via SW. We used patch-package to maintain this patch. Here is the patch

diff --git a/node_modules/@angular/service-worker/ngsw-worker.js b/node_modules/@angular/service-worker/ngsw-worker.js
index 51c431b..1216506 100755
--- a/node_modules/@angular/service-worker/ngsw-worker.js
+++ b/node_modules/@angular/service-worker/ngsw-worker.js
@@ -1896,6 +1896,10 @@ ${msgIdle}`, { headers: this.adapter.newHeaders({ 'Content-Type': 'text/plain' }
          */
         onFetch(event) {
             const req = event.request;
+            //PATCH to prevent caching certain kinds of requests
+            // - PUT requests which breaks files upload
+            // - requests with 'Range' header which breaks credentialed video irequests
+            if (req.method==="PUT" || !!req.headers.get('range')) return;
             // The only thing that is served unconditionally is the debug page.
             if (this.adapter.parseUrl(req.url, this.scope.registration.scope).path === '/ngsw/state') {
                 // Allow the debugger to handle the request, but don't affect SW state in any

[gkalpak]

No, we don’t need a config option. We just need to teach the SW how to handle range requests (by incorporating code similar to this and potentially making other necessary adjustments).