Pwa-module: Workbox and HTML5 video on iOS Safari

[mixn]

Version

2.0.8

Reproduction link

https://264-education-heitbuiyfy.now.sh/

Steps to reproduce

Visit the reproduction link in any browser / OS combination and the video plays without problems. Do so on Mobile Safari on iOS and the video freezes after 1–3s and / or doesn’t load at all.

This only happens when the pwa-module (the workbox part of it) is used. The video then plays only the very first time and often freezes after 1–3s, often it doesn’t load / play at all.

This issue looks very similar to this https://github.com/angular/angular/issues/23447 Angular issue, so it might be a core problem inside iOS / their SW implementation? I am not sure, I just ran into this.

I have tried explicitly ignoring the file with globIgnores and/or exclude, but wasn’t successful.

Thank you in advance, I appreciate it and the work you have put into this. :)

What is expected ?

Video should play when SW is activated in any browser / on any OS.

What is actually happening?

Video freezes after 1–3s and / or doesn’t play on Mobile Safari on iOS when SW is activated.

_{This bug report is available on Nuxt.js community (#c42)}

[tetreault]

Can confirm this happens

[CarterLi]

I was trying resolving this issue by adding workbox range-request plugin:

// plugins/workbox-range-request.js

workbox.routing.registerRoute(
  /.*\.(mp4|webm)/,
  workbox.strategies.cacheFirst({
    plugins: [
      new workbox.rangeRequests.Plugin(),
    ],
  }),
  'GET'
);

// nuxt.config.js
{ workbox: { cachingExtensions: '@/plugins/workbox-range-request.js' } }

We can't use routingExtensions because it's generated after default routes (https://github.com/nuxt-community/pwa-module/blob/develop/packages/workbox/templates/sw.template.js#L27), all requests that matches default routes won't be handled by custom routes.

We can't use strategyOptions because it's JSON stringified when rendering (https://github.com/nuxt-community/pwa-module/blob/develop/packages/workbox/templates/sw.template.js#L14). new workbox.rangeRequests.Plugin is not a plain js object.

Please see if it helps

Docs: https://developers.google.com/web/tools/workbox/modules/workbox-range-requests

[mixn]

@CarterLi Has that resolved the issue for you? The Angular thread I linked above also mentions the range-request plugin.

[CarterLi]

@mixn Yes. SW can correctly return 206 when using range-request plugin.

[pi0]

Thanks, @CarterLi. Added the to docs.

[rwwagner90]

I'm unsure if this is the issue I am hitting, but videos will not ever load on Safari. It tries to grab them from the service worker and fails every time. Any ideas?

[mirkopoloni]

I'm unsure if this is the issue I am hitting, but videos will not ever load on Safari. It tries to grab them from the service worker and fails every time. Any ideas?

Hi @rwwagner90,
I had the same problem and the solution of this issue fixed it for me.
Do you still have the problem?

[rwwagner90]

@mirkopoloni I am trying the fix now. I did not see that there was a recommended fix. If this is necessary to have video files, why is it not included by default?

[mirkopoloni]

@rwwagner90 I didn't investigate why the solution isn't included by default and I can't answer this question.
Maybe someone else can tell us more about this.
Hope it solved your problem.

[CarterLi]

It seems that APIs are changed in workbox 5.x. Scripts updated:

/* eslint-disable no-undef */
workbox.routing.registerRoute(
  /.*\.(mp4|webm)/,
  new workbox.strategies.CacheFirst({
    cacheName: 'videos',
    plugins: [
      new workbox.rangeRequests.RangeRequestsPlugin(),
    ],
  }),
  'GET'
);

[rwwagner90]

@CarterLi do we need to support both, based on what Safari version a user might have?

[CarterLi]

@CarterLi do we need to support both, based on what Safari version a user might have?

What did you mean with based on what Safari version a user might have

[rwwagner90]

@CarterLi I mean based on the Safari version the user has, wouldn't the API be different? This new version works in new Safari I assume?

[mavr1982]

Hi, are there any news on this ? I'm still facing issues with videos on Safari.