4
すべての静的リソースをキャッシュするオフラインアプリがあります。現在、ビデオアセットの最初の15秒のみがキャッシュされています。オフラインで使用するためにService Worker APIを使用してHTML5ビデオ全体をキャッシュすることはできますか?
以下は、install
およびfetch
イベントリスナーの基本的な実装を示しています。
サービスワーカー:
self.addEventListener('install', event => {
event.waitUntil(
caches.open('v1').then(cache => {
return cache.addAll([
'/',
'/videos/one.mp4',
'/videos/two.mp4'
]);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
if (response) return response;
return fetch(event.request);
});
);
});
そしてindex.html
<video controls preload>
<source src="/videos/one.mp4" type="video/mp4">
</video>
多分あなたはブロブにビデオを変換し、ブロブを保存することができます。 [this](https://simpl.info/video/offline/)にはいくつかの関連するテクニックがあるようです。 – danyamachine
キャッシュAPIサービスワーカーは[ストア要求/応答のペア]を使用します(https://developer.mozilla.org/en-US/docs/Web/API/Cache/put#パラメータ)。したがって、ファイルタイプの制限があるかどうかは疑問です。 [引用:](https://developer.mozilla.org/en-US/docs/Web/API/Cache) '...キャッシュされているリクエスト/レスポンスオブジェクトのペアのための記憶機構...' –
実際、私はそれをテストに入れました。それは期待通りにうまくいきます。 [こちらをチェックしてください](https://lazysheepherd.com/sw-test/offline/) –