Video not playing on Safari

[GozuPro]

Hello there,

Are you aware with next-offline, mp4 videos aren't playing in Safari? However, they play perfectly with incognito browser.

Apparently, I found this article which explains the reason behind it: https://philna.sh/blog/2018/10/23/service-workers-beware-safaris-range-request/.

I would be interested to know if you will have the time to come-up with a short-term and long-term solution? At the moment, I'm using next-offline out-the-box, without configuration and would like to exclude videos (.mp4) for being served from service worker to avoid the issue. I'm not sure how to handle that. Please let me know if that makes sense.

Ugo

[GozuPro]

I'm still doing some QA but believe @xcv58 fixed the issue with the following PR: https://github.com/xcv58/next-offline-issue-77/pull/1/files

[xcv58]

If it still doesn't work for you on Safari, probably caused by https://stackoverflow.com/a/14018708

https://stackoverflow.com/a/41831848

[hanford]

If you guys land on a good fix, I'd be more then happy to merge it if you send a PR my way!

[joeynelsonFF]

I'm still doing some QA but believe @xcv58 fixed the issue with the following PR: https://github.com/xcv58/next-offline-issue-77/pull/1/files

any update on this?

[nodabladam]

I just hit the problem of video not playing on Safari: https://philna.sh/blog/2018/10/23/service-workers-beware-safaris-range-request/

I see this fix referenced above...

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

...but I am loading my content from a cdn so service worker doesn't respect /.mp4$/ from anywhere other than path in the browser. It needs to be something like https:\/\/cdn\.example\.com\/.*\.mp4$/ in my case.

So I think the question is, is it possible to pass plugins: [ new workbox.rangeRequests.Plugin() ] to runtimeCaching? So that something like:

runtimeCaching: [
    {
      urlPattern: /https:\/\/cdn\.example\.com\/.*\.mp4$/,
      handler: 'CacheFirst',
      options: {
        plugins: [ new workbox.rangeRequests.Plugin() ]
      }
    }
  ]

ends up creating:

workbox.routing.registerRoute(
  /https:\/\/cdn\.example\.com\/.*\.mp4$/,
  workbox.strategies.cacheFirst({ plugins: [ new workbox.rangeRequests.Plugin() ] }), 'GET'
);