New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Workbox and HTML5 video on iOS Safari #64
Comments
Can confirm this happens |
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 We can't use Please see if it helps Docs: https://developers.google.com/web/tools/workbox/modules/workbox-range-requests |
@CarterLi Has that resolved the issue for you? The Angular thread I linked above also mentions the range-request plugin. |
@mixn Yes. SW can correctly return 206 when using range-request plugin. |
Thanks, @CarterLi. Added the to docs. |
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, |
@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? |
@rwwagner90 I didn't investigate why the solution isn't included by default and I can't answer this question. |
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'
); |
@CarterLi do we need to support both, based on what Safari version a user might have? |
What did you mean with |
@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? |
Hi, are there any news on this ? I'm still facing issues with videos on Safari. |
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 angular/angular#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/orexclude
, 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.
The text was updated successfully, but these errors were encountered: