支持离线流式传输的 PWA

Derek Herman
Derek Herman
Jaroslav Polakovič
Jaroslav Polakovič

渐进式 Web 应用为 Web 引入了以前为原生应用预留的许多功能。与 PWA 相关的一项最突出的功能是离线体验。

更棒的是离线流媒体体验,您可以通过几种不同的方式为用户提供增强功能。不过,这会带来真正独特的问题:媒体文件可能非常大。因此,您可能会问:

  • 如何下载和存储大型视频文件?
  • 如何向用户提供?

在本文中,我们将讨论这些问题的答案,并参考我们构建的 Kino 演示版 PWA,该 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 对象: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 Service Worker 源代码,了解我们如何从 IndexedDB 读取文件数据并在真实应用中构建流。

其他注意事项

在完成这些主要障碍后,您现在可以开始为视频应用添加一些出色的功能了。以下是 Kino 演示 PWA 的几个功能示例:

  • Media Session API 集成,可让用户使用专用硬件媒体键或通过媒体通知弹出式窗口来控制媒体播放。
  • 使用良好的旧版 Cache API 缓存与媒体文件(如字幕和海报图片)相关的其他资源。
  • 支持在应用内下载视频串流(DASH、HLS)。由于数据流清单通常会声明多个不同比特率的来源,因此您需要转换清单文件,并且仅下载一个媒体版本,然后存储它以供离线观看。

接下来,您将了解如何通过预加载音频和视频实现快速播放