渐进式 Web 应用为 Web 带来了许多之前专为原生应用预留的功能。与 PWA 相关的最显著功能之一是离线体验。
更好的是离线流媒体体验，您可以通过几种不同的方式向用户提供的增强功能。不过，这会产生真正独特的问题，媒体文件可能会非常大。您可能会问：
- 如何下载和存储大型视频文件？
- 如何将其提供给用户？
在本文中，我们将讨论这些问题的答案，同时参考我们构建的 Kino 演示 PWA，其中为您提供了一些实际示例，说明如何在不使用任何功能或演示框架的情况下实现离线流媒体体验。以下示例主要用于教育目的，因为在大多数情况下，您应该使用某个现有的媒体框架来提供这些功能。
除非您有充分的业务用例来开发自己的应用，否则使用离线流式传输构建 PWA 面临着挑战。在本文中，您将了解用于为用户提供优质离线媒体体验的 API 和技术。
下载和存储大型媒体文件
渐进式 Web 应用通常使用方便的 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 写入频率就会降低，从而显著提升写入性能。
从离线存储空间传送媒体文件
下载媒体文件后，您可能希望 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 Service Worker 源代码，了解我们如何从 IndexedDB 读取文件数据，以及如何在真实应用中构建流。
其他注意事项
克服主要障碍后，您现在可以开始向视频应用添加一些实用的功能了。以下是您可以在 Kino 演示 PWA 中找到的一些功能示例：
- Media Session API 集成，让用户可以使用专用硬件媒体键或媒体通知弹出式窗口来控制媒体播放。
- 使用旧版 Cache API 缓存与媒体文件（例如字幕和海报图片）相关联的其他资源。
- 支持在应用内下载视频流（DASH、HLS）。由于视频流清单通常会声明不同比特率的多个来源，因此您需要先转换清单文件，并且仅下载一个媒体版本，然后才能存储该文件以供离线观看。
接下来，您将了解如何通过预加载音频和视频实现快速播放。