4

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 の構成を次のように調整しました。

new WorkboxPlugin.InjectManifest({
   swSrc: serviceWorkerSrcPath,
   swDest: serviceWorkerBuildPath,
   importsDirectory: 'sw',
})

ビルドにより、次のサービス ワーカーが生成されます。

importScripts("/_build/sw/precache-manifest.8a0be820b796b153c97ba206d9753bdb.js", "https://storage.googleapis.com/workbox-cdn/releases/3.6.2/workbox-sw.js");

workbox.precaching.precacheAndRoute(self.__precacheManifest || []);

workbox.routing.registerRoute(
   /.*\.mp4/,
   new workbox.strategies.CacheFirst({
      cacheName: 'videos',
      plugins: [
         new workbox.cacheableResponse.Plugin({ statuses: [200] }),
         new workbox.rangeRequests.Plugin(),
      ],
   }),
);

前に言及するのを忘れていましたが、要素crossOrigin="anonymous"に属性も追加しました。video

編集：

Safari で期待どおりに動作しないことを示す再現: https://github.com/acostalima/workbox-range-requests-mp4-demo

4

3 に答える 3

2

Workbox ドキュメントの「キャッシュされたオーディオとビデオを提供する」レシピに、このユース ケースに関する具体的なガイダンスがあります。

を引き続き使用できますがworkbox-webpack-plugin、モードで使用することをお勧めしInjectManifestます。これにより、最上位の Service Worker ファイルを制御できます。これにより、レシピに従うことが可能になります。

このドキュメントworkbox-webpack-pluginには、モードでの構成に関するガイダンスがありInjectManifestます。

于 2019-03-05T22:07:46.590 に答える