問題タブ [workbox-webpack-plugin]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
safari - workbox-webpack-plugin を使用して Safari で .mp4 ファイルをキャッシュする方法は?
https://github.com/GoogleChrome/workbox/issues/1663でまったく同じ問題が報告されています。これは、Service Worker によってキャッシュされた後に mp4 ビデオがレンダリングされないという Safari でのみ発生する問題を説明しています。
を使用してworkbox-webpack-pluginいるため、コメントhttps://github.com/GoogleChrome/workbox/issues/1663#issuecomment-448755945に記載されている手順は私の場合は機能しません。workbox-range-requestsこのパッケージはブラウザーでの使用のみを目的としていると思われるため、webpack 構成ファイルでプラグインを要求してランタイム キャッシュ オプションに渡すことができません。私のワークボックス構成は .mp4 アセットをプリキャッシュしており、ランタイム キャッシュにネットワーク ファースト戦略を使用しています。
workbox-range-requestsでセットアップするにはどうすればよいworkbox-webpack-pluginですか?
編集: 以下の Jeff の回答に従って、webpack の構成を次のように調整しました。
ビルドにより、次のサービス ワーカーが生成されます。
前に言及するのを忘れていましたが、要素crossOrigin="anonymous"に属性も追加しました。video
編集：
Safari で期待どおりに動作しないことを示す再現: https://github.com/acostalima/workbox-range-requests-mp4-demo