このページは Cloud Translation API によって翻訳されました。

オフラインストリーミングを使用する PWA

Derek Herman

Jaroslav Polakovič

プログレッシブウェブアプリは、これまでネイティブアプリに限定されていた多くの機能をウェブにもたらします。PWA に関連する最も顕著な機能の一つが、オフラインエクスペリエンスです。

オフラインストリーミングメディアエクスペリエンスはさらに優れた機能です。これは、いくつかの方法でユーザーに提供できます。ただし、これにより、メディアファイルが非常に大きくなるという、独自の問題が発生します。次のような疑問が湧くかもしれません。

サイズの大きい動画ファイルをダウンロードして保存するにはどうすればよいですか？
ユーザーに提供する方法

この記事では、これらの質問に対する回答について説明します。また、機能フレームワークやプレゼンテーションフレームワークを使用せずにオフラインストリーミングメディアエクスペリエンスを実装する方法の実践的な例として、作成した Kino デモ PWA を参照します。次の例は主に教育目的です。ほとんどの場合、これらの機能を提供するには、既存のメディアフレームワークのいずれかを使用する必要があります。

独自の開発に十分なビジネスケースがない限り、オフラインストリーミングを使用する PWA の構築には課題があります。この記事では、ユーザーに高品質のオフラインメディアエクスペリエンスを提供する際に使用される API と手法について説明します。

サイズの大きいメディアファイルのダウンロードと保存

通常、プログレッシブウェブアプリは便利な Cache API を使用して、オフラインエクスペリエンスの提供に必要なアセット（ドキュメント、スタイルシート、画像など）をダウンロードして保存します。

以下は、Service Worker 内で Cache API を使用する基本的な例です。

const cacheStorageName = 'v1';

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheStorageName).then(function(cache) {
      return cache.addAll([
        'index.html',
        'style.css',
        'scripts.js',

        // Don't do this.
        'very-large-video.mp4',
      ]);
    })
  );
});

上記の例は技術的には機能しますが、Cache API にはいくつかの制限があるため、大規模なファイルでの使用は現実的ではありません。

たとえば、Cache API は次の処理を行いません。

ダウンロードの一時停止と再開を簡単に行う
ダウンロードの進行状況を確認できるようにする
HTTP 範囲リクエストに適切に応答する方法を提供します。

これらの問題は、どの動画アプリケーションにとってもかなり深刻な制限です。より適切な他のオプションをいくつか確認しましょう。

現在、Fetch API は、リモートファイルに非同期でアクセスするためのクロスブラウザの方法です。このユースケースでは、大容量の動画ファイルにストリーミングとしてアクセスし、HTTP 範囲リクエストを使用してチャンクとして増分保存できます。

Fetch API を使用してデータのチャンクを読み取れるようになったので、保存もする必要があります。メディアファイルには、名前、説明、再生時間、カテゴリなど、多くのメタデータが関連付けられている可能性があります。

保存するのは 1 つのメディアファイルではなく、構造化オブジェクトです。メディアファイルはそのプロパティの 1 つにすぎません。

この場合、IndexedDB API は、メディアデータとメタデータの両方を保存するための優れたソリューションです。大量のバイナリデータを簡単に保持できるほか、非常に高速なデータ検索を可能にするインデックスも提供されます。

Fetch API を使用したメディアファイルのダウンロード

デモ用 PWA である Kino では、Fetch API に関する興味深い機能をいくつか構築しました。ソースコードは公開されているので、ぜひご覧ください。

完了していないダウンロードを一時停止して再開する機能。
データのチャンクをデータベースに保存するためのカスタムバッファ。

これらの機能の実装方法を説明する前に、まず Fetch API を使用してファイルをダウンロードする方法について簡単に説明します。

/**
 * Downloads a single file.
 *
 * @param {string} url URL of the file to be downloaded.
 */
async function downloadFile(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  do {
    const { done, dataChunk } = await reader.read();
    // Store the `dataChunk` to IndexedDB.
  } while (!done);
}

await reader.read() がループ内にあることに注意してください。このように、読み取り可能なストリームからネットワーク経由で届いたデータのチャンクを受け取ります。この方法の有用性について考えてみましょう。ネットワークからデータがすべて届く前に、データの処理を開始できます。

一時保存したコンテンツの再開

ダウンロードが一時停止または中断されると、到着したデータチャンクは IndexedDB データベースに安全に保存されます。その後、ダウンロードを再開するボタンをアプリに表示できます。Kino デモの PWA サーバーは HTTP 範囲リクエストをサポートしているため、ダウンロードの再開は比較的簡単です。

async downloadFile() {
  // this.currentFileMeta contains data from IndexedDB.
  const { bytesDownloaded, url, downloadUrl } = this.currentFileMeta;
  const fetchOpts = {};

  // If we already have some data downloaded,
  // request everything from that position on.
  if (bytesDownloaded) {
    fetchOpts.headers = {
      Range: `bytes=${bytesDownloaded}-`,
    };
  }

  const response = await fetch(downloadUrl, fetchOpts);
  const reader = response.body.getReader();

  let dataChunk;
  do {
    dataChunk = await reader.read();
    if (!dataChunk.done) this.buffer.add(dataChunk.value);
  } while (!dataChunk.done && !this.paused);
}

IndexedDB のカスタム書き込みバッファ

理論上、IndexedDB データベースに dataChunk 値を書き込むプロセスは簡単です。これらの値はすでに IndexedDB に直接保存できる ArrayBuffer インスタンスであるため、適切なシェイプのオブジェクトを作成して保存するだけで済みます。

const dataItem = {
  url: fileUrl,
  rangeStart: dataStartByte,
  rangeEnd: dataEndByte,
  data: dataChunk,
}

// Name of the store that will hold your data.
const storeName = 'fileChunksStorage'

// `db` is an instance of `IDBDatabase`.
const transaction = db.transaction([storeName], 'readwrite');
const store = transaction.objectStore(storeName);
const putRequest = store.put(data);

putRequest.onsuccess = () => { ... }

このアプローチは機能しますが、IndexedDB の書き込みがダウンロードよりも大幅に遅くなる可能性があります。これは、IndexedDB の書き込みが遅いためではなく、ネットワークから受信するデータチャンクごとに新しいトランザクションを作成することで、トランザクションのオーバーヘッドが大幅に増加するためです。

ダウンロードされたチャンクは比較的小さい場合があり、ストリームから連続して出力される場合があります。IndexedDB の書き込みレートを制限する必要があります。Kino デモ PWA では、中間書き込みバッファを実装することでこれを行っています。

データチャンクがネットワークから届くと、まずバッファに追加されます。受信データが収まらない場合は、バッファ全体をデータベースにフラッシュしてクリアしてから、残りのデータを追加します。その結果、IndexedDB の書き込み頻度が減り、書き込みパフォーマンスが大幅に向上します。

オフラインストレージからメディアファイルを提供する

メディアファイルがダウンロードされたら、ネットワークからファイルを取得するのではなく、IndexedDB からファイルを提供するように Service Worker を設定します。

/**
 * The main service worker fetch handler.
 *
 * @param {FetchEvent} event Fetch event.
 */
const fetchHandler = async (event) => {
  const getResponse = async () => {
    // Omitted Cache API code used to serve static assets.

    const videoResponse = await getVideoResponse(event);
    if (videoResponse) return videoResponse;

    // Fallback to network.
    return fetch(event.request);
  };
  event.respondWith(getResponse());
};
self.addEventListener('fetch', fetchHandler);

では、getVideoResponse() で必要な操作はどのようなものになるでしょうか。

event.respondWith() メソッドは、パラメータとして Response オブジェクトを想定しています。
Response() コンストラクタは、Response オブジェクトのインスタンス化に使用できるオブジェクトのタイプがいくつかあることを示しています（Blob、BufferSource、ReadableStream など）。
すべてのデータをメモリに保持しないオブジェクトが必要であるため、ReadableStream を選択することをおすすめします。

また、大規模なファイルを扱うため、ブラウザが現在必要なファイルの部分のみをリクエストできるようにする必要があり、HTTP 範囲リクエストの基本的なサポートを実装する必要がありました。

/**
 * Respond to a request to fetch offline video file and construct a response
 * stream.
 *
 * Includes support for `Range` requests.
 *
 * @param {Request} request  Request object.
 * @param {Object}  fileMeta File meta object.
 *
 * @returns {Response} Response object.
 */
const getVideoResponse = (request, fileMeta) => {
  const rangeRequest = request.headers.get('range') || '';
  const byteRanges = rangeRequest.match(/bytes=(?<from>[0-9]+)?-(?<to>[0-9]+)?/);

  // Using the optional chaining here to access properties of
  // possibly nullish objects.
  const rangeFrom = Number(byteRanges?.groups?.from || 0);
  const rangeTo = Number(byteRanges?.groups?.to || fileMeta.bytesTotal - 1);

  // Omitting implementation for brevity.
  const streamSource = {
     pull(controller) {
       // Read file data here and call `controller.enqueue`
       // with every retrieved chunk, then `controller.close`
       // once all data is read.
     }
  }
  const stream = new ReadableStream(streamSource);

  // Make sure to set proper headers when supporting range requests.
  const responseOpts = {
    status: rangeRequest ? 206 : 200,
    statusText: rangeRequest ? 'Partial Content' : 'OK',
    headers: {
      'Accept-Ranges': 'bytes',
      'Content-Length': rangeTo - rangeFrom + 1,
    },
  };
  if (rangeRequest) {
    responseOpts.headers['Content-Range'] = `bytes ${rangeFrom}-${rangeTo}/${fileMeta.bytesTotal}`;
  }
  const response = new Response(stream, responseOpts);
  return response;

Kino デモ PWA のサービスワーカーのソースコードで、IndexedDB からファイルデータを読み取り、実際のアプリでストリームを構築する方法を確認できます。

その他の考慮事項

主な障害が解消されたので、動画アプリに便利な機能を追加してみましょう。Kino デモ PWA で利用できる機能の例をいくつか示します。

Media Session API の統合により、ユーザーは専用のハードウェアメディアキーまたはメディア通知ポップアップからメディアの再生を制御できます。
メディアファイルに関連付けられている他のアセット（字幕やポスター画像など）のキャッシュ保存。古い Cache API を使用します。
アプリ内での動画ストリーム（DASH、HLS）のダウンロードをサポート。ストリームマニフェストは通常、異なるビットレートの複数のソースを宣言するため、マニフェストファイルを変換し、オフライン視聴用に保存する前に 1 つのメディアバージョンのみをダウンロードする必要があります。

次は、音声と動画のプリロードによる早送り再生について説明します。

オフライン ストリーミングを使用する PWA

サイズの大きいメディア ファイルのダウンロードと保存

Fetch API を使用したメディア ファイルのダウンロード