而漸進式網頁應用程式可將先前保留的許多原生應用程式功能帶入網路。離線體驗是與 PWA 有關的一項重要功能
更棒的是，離線串流媒體體驗，可透過一些不同的方式提供給使用者。但媒體檔案可能「非常」，這會產生真正的唯一問題。因此，您可能會問：
- 如何下載和儲存大型影片檔案？
- 如何向使用者提供這些內容？
本文將討論這些問題的答案，同時參考我們建構的 Kino 示範 PWA，其中提供許多實用範例，讓您瞭解如何在不使用任何功能或展示架構的情況下，實作離線串流媒體體驗。以下範例主要用於教育用途，因為在大部分的情況下，您應該使用其中一個現有的 Media Framework 來提供這些功能。
除非您有開發自己的商業案例，否則建構具備離線串流功能的 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 是用於跨瀏覽器以非同步方式存取遠端檔案的方式。以我們的用途來說，這個 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 的寫入速度變慢，這是因為我們為從網路接收的每個資料區塊建立新交易，會增加大量交易負擔。
下載的區塊較小，可以很小，且可由串流在快速連續時發出。您必須限制索引資料庫的寫入頻率。在 Kino 示範 PWA 中，我們會實作中介寫入緩衝區來完成這項操作。
當資料區塊從網路傳入時，我們會先將其附加至緩衝區中。如果連入資料不合，我們會將整個緩衝區清除至資料庫中，並在附加其餘資料前清除該資料。因此，我們的 IndexedDB 寫入頻率較低，進而大幅改善寫入效能。
從離線儲存空間提供媒體檔案
下載媒體檔案後，您可能會希望 Service Worker 從 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)。串流資訊清單一般會宣告多個不同位元率的來源，因此您需要轉換資訊清單檔案，並只下載一個媒體版本，才能儲存檔案供離線觀看。
接下來，您將瞭解在預先載入音訊和視訊的情況下快速播放相關資訊。