具備離線串流的 PWA

德瑞克赫曼
Derek Herman
X GitHub
雅羅斯拉夫波拉科維奇
Jaroslav Polakovič
X GitHub

「漸進式網頁應用程式」可將先前專為原生應用程式保留的許多功能發布到網路，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 讀取資料區塊，您也需要儲存這些區塊。可能有一些與媒體檔案相關聯的中繼資料，例如名稱、說明、執行階段長度、類別等。

您不僅儲存了一個媒體檔案，而是儲存結構化物件，而媒體檔案只是其屬性之一。

在這種情況下，IndexedDB API 是儲存媒體資料和中繼資料的絕佳解決方案。這項工具可以輕鬆保存大量二進位資料，而且也提供索引，讓您可以執行非常快速的資料查詢。

使用 Fetch API 下載媒體檔案

我們在示範 PWA 的 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() 是迴圈嗎？這樣一來，當您收到來自網路的可讀取串流時，就會以這種方式接收資料區塊。請考量此情形的實用性：您可以在資料從網路送達之前，就開始處理資料。

繼續下載

當下載暫停或中斷時，已到達的資料區塊會安全地儲存在索引資料庫資料庫中。接著即可在應用程式中顯示繼續下載的按鈕。由於 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 自訂寫入緩衝區

以圖表來說，將 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 提供檔案，而不是從網路擷取檔案。

/**
 * 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 Service Worker 原始碼，瞭解我們如何讀取 IndexedDB 中的檔案資料，並在實際應用程式中建構串流。

其他考量

解決了主要阻礙後，您現在可以開始為影片應用程式新增一些實用的功能。以下列舉幾個 Kino 示範 PWA 中的功能範例：

  • Media Session API 整合，可讓使用者使用專屬的硬體媒體金鑰或媒體通知彈出式視窗來控制媒體播放。
  • 使用完善的舊版 Cache API，快取與媒體檔案 (例如字幕) 和海報圖片相關聯的其他資產。
  • 在應用程式中支援影片串流 (DASH、HLS) 下載。由於串流資訊清單通常會宣告多個不同位元率的來源，因此您必須先轉換資訊清單檔案，並只下載一個媒體版本，才能儲存供離線觀看。

接下來，我們將說明如何「透過音訊和視訊預先載入快速播放」。