渐进式 Web 应用：Service Worker 包含

1. 欢迎

在本实验中，您将采用现有的 Web 应用，并添加流式路由响应来提升性能。这是渐进式 Web 应用工作坊的一系列配套 Codelab 中的第七个。上一个 Codelab 是增强 PWA 的功能。本系列中还有一篇 Codelab。

学习内容

  • 向服务工作线程添加流式响应

注意事项

  • JavaScript

所需条件

2. 进行设置

首先，克隆或下载完成此 Codelab 所需的起始代码：

如果您克隆了代码库，请确保您位于 pwa06--service-worker-includes 分支中。该 ZIP 文件还包含相应分支的代码。

此代码库需要 Node.js 14 或更高版本。获得代码后，在代码的文件夹中通过命令行运行 npm ci，以安装所需的所有依赖项。然后，运行 npm start 以启动 Codelab 的开发服务器。

源代码的 README.md 文件提供了对所有分发文件的说明。此外，以下是您将在整个 Codelab 中使用的关键现有文件：

密钥文件

  • js/preview.js - 预览网页的 JavaScript 文件
  • service-worker.js - PWA 的 service worker 文件

3. 流式预览

预览页面可分为三个清晰的部分：头部、编译后的正文和底部。目前，编译后的正文是在客户端呈现的，但没有理由这样做。让我们将其移至 Service Worker。

为了编译正文，系统会进行异步内容查找。由于导航响应中的异步工作成本较高，因此最好先将已知内容流式传输到浏览器。

为此，请先清除 js/preview.js 中的内容，以确保它不再进行编译。然后，在 service-worker.js 中，执行以下操作：

  • 从 workbox-streams 导入名为 strategy 的导出内容，并将其命名为 streamsStrategy
  • 导入名为 openDB 的导出项，并从 idb 导入名为 marked 的导出项marked
  • 在导航的路由注册之前，添加新的路由注册
    • 它应检查网址的 pathname 是否为 /preview
    • 它应使用一种流式传输策略，该策略
      1. 使用 preview/index.html 的内容进行响应，直到 main 标记的内容区域
      2. 请提供一个函数，该函数可打开 settings-store IndexedDB，从 settings 对象存储区获取内容，并返回该内容的 Markdown 渲染版本。
      3. 使用结束标记 main、body 和 html 进行回复。

在流式响应就位后，返回并在浏览器中打开网站预览。您应该会看到，网页内容现在直接从服务工作器呈现，无需任何客户端代码！

4. 恭喜！

您已了解如何使用 Service Worker 和缓存存储 API 使 Web 应用离线运行。

本系列中的下一个 Codelab 是使用 Worker