漸進式網頁應用程式可提供許多原生應用程式專屬的功能，PWA 最顯著的功能之一，就是離線體驗。
更棒的做法是提供離線串流媒體體驗，您可以透過幾種不同的方式為使用者提供這項強化功能。不過，這會造成一個非常特殊的問題：媒體檔案可能會非常大。因此，您可能會問：
- 如何下載及儲存大型影片檔案？
- 如何向使用者提供這項資訊？
本文將討論這些問題的答案，並參考我們建構的 Kino 示範 PWA，提供實用範例，說明如何在不使用任何功能或呈現架構的情況下，實現離線串流媒體體驗。以下範例主要用於教育用途，因為在大多數情況下，您應該使用其中一個現有的媒體架構來提供這些功能。
除非您有開發自有 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物件：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)。由於串流資訊清單通常會宣告多個位元率不同的來源，因此您需要轉換資訊清單檔案，並只下載一個媒體版本，然後再儲存該版本以供離線觀看。
接下來，您將瞭解如何透過音訊和影片預先載入功能加快播放速度。