具備離線串流的 PWA

Derek Herman
Derek Herman
Jaroslav Polakovič
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 讀取資料區塊,但也需要將資料儲存起來。可能會有許多與媒體檔案相關聯的中繼資料,例如名稱、說明、執行階段長度、類別等。

您並非只儲存一個媒體檔案,而是儲存結構化物件,而媒體檔案只是其中一個屬性。

在這種情況下,IndexedDB API 提供了一個絕佳的解決方案,可同時儲存媒體資料和中繼資料。它可以輕鬆容納大量二進位資料,並提供索引,讓您快速查詢資料。

使用 Fetch API 下載媒體檔案

在 PWA 示範中,我們針對 Fetch API 建立了幾項有趣的功能,名為 Kino原始碼屬於公開性質,歡迎檢閱。

  • 可暫停及繼續未完成的下載作業。
  • 用於在資料庫中儲存資料區塊的自訂緩衝區。

在說明這些功能的實作方式之前,我們先快速回顧一下如何使用 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 的自訂寫入緩衝區

理論上,將 dataChunk 值寫入 IndexedDB 資料庫的流程非常簡單。這些值已是 ArrayBuffer 例項,可直接儲存在 IndexedDB 中,因此我們只需建立適當形狀的物件並儲存即可。

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 物件:BlobBufferSourceReadableStream 等等。

  • 我們需要的物件不必將所有資料都保留在記憶體中,因此我們可能會選擇 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)。由於串流資訊清單通常會宣告多個位元率不同的來源,因此您需要轉換資訊清單檔案,並只下載一個媒體版本,然後再儲存該版本以供離線觀看。

接下來,您將瞭解如何透過音訊和影片預先載入功能加快播放速度