キャッシュに保存された音声と動画の配信

一部のブラウザでは、メディア アセットのリクエスト、つまり <video> 要素と <audio> 要素の src 属性で指定された URL の処理方法に細かな点があるため、ワークボックスの設定時に特定の手順を踏まない限り、誤った配信動作につながる可能性があります。

問題

ブラウザでの音声アセットと動画アセットの配信に関する問題の複雑さについては、こちらの GitHub の問題に関するディスカッションで詳しく説明しています。全体像は複雑ですが、重要なポイントは以下のとおりです。

  • ハンドラとして使用する方法に workbox-range-requests モジュールを使用して、Range リクエスト ヘッダーに従うようにワークボックスに指示する必要があります。
  • <video> 要素または <audio> 要素は、crossorigin 属性を使用して CORS モードにオプトインする必要があります。
  • キャッシュからメディアを配信する場合は、事前に明示的にキャッシュに追加する必要があります。これを行うには、プレキャッシュ、cache.add()、またはワークボックス レシピでウォーム戦略キャッシュ メソッドを使用します。再生中にネットワークから部分的なコンテンツのみが取得されるため、メディア アセットをストリーミング時にキャッシュに保存しても機能しません。

Workbox でこれらの要件に対応するには、まずメディア アセットの適切なマークアップについて説明します。

<!-- In your page: -->

<!-- You need to set `crossorigin`, even for same-origin URLs! -->
<video src="movie.mp4" crossorigin="anonymous"></video>
<audio src="song.mp3" crossorigin="anonymous"></audio>

次に、Service Worker で workbox-range-request プラグインを使用して、メディア アセットを適宜処理します。

// sw.js
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
import {RangeRequestsPlugin} from 'workbox-range-requests';

// In your service worker:
// It's up to you to either precache, use warmRuntimeCache, or
// explicitly call cache.add() to populate the cache with media assets.
// If you choose to cache media assets up front, do so with care,
// as they can be quite large and exceed storage quotas.
//
// This route will go to the network if there isn't a cache match,
// but it won't populate the cache at runtime because the response for
// the media asset will be a partial 206 response. If there is a cache
// match, then it will properly serve partial responses.
registerRoute(
  ({request}) => {
    const {destination} = request;

    return destination === 'video' || destination === 'audio'
  },
  new CacheFirst({
    cacheName: 'your-cache-name-here',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200]
      }),
      new RangeRequestsPlugin(),
    ],
  }),
);

この方法では、範囲リクエストなど、メディア リクエストに関連する潜在的な問題を考慮しながら、ウェブサイトのメディア アセットが Service Worker によって適切に取得およびキャッシュされるようにできます。