调试渐进式 Web 应用 (PWA)

使用 应用程序 工具检查、修改和调试 PWA 的 Web 应用清单、服务辅助角色和服务辅助角色缓存。

应用程序工具包括 PWA 功能的以下窗格：

• 使用“ 清单 ”窗格检查 Web 应用清单。

• 将“ 服务辅助角色 ”窗格用于与服务辅助角色相关的任务，例如：

  • 正在注销或更新服务。
  • 模拟推送事件。
  • 脱机。
  • 停止服务辅助角色。

• 使用“ 缓存存储 ”窗格可以查看服务辅助角色缓存。

• 使用“ 存储 ”窗格查看应用在设备上存储的数据量，并清除存储的数据。

下面讨论的功能是 应用程序 工具的功能，与 PWA 相关。 有关 应用程序 工具中其他功能和窗格的帮助，请参阅：

• 查看构成网页的资源文件
• 查看和编辑本地存储

另请参阅：

• 渐进式 Web 应用 （PWA） 概述

Web 应用清单

如果希望用户能够将应用添加到其移动主屏幕，则需要 Web 应用清单。 清单定义应用在主屏幕上的显示方式、从主屏幕启动时引导用户的位置，以及应用在启动时的外观。

检查清单：

1. 在新窗口或选项卡中转到使用清单的网页，例如 Airhorner.com。

2. 右键单击网页，然后选择“ 检查”。

   DevTools 随即打开。

3. 在 DevTools 中，选择 “应用程序 工具”。

4. 在左侧的大纲中，在 “应用程序 ”部分中，选择“ 清单”。

   将显示 “应用清单 ”窗格，可在其中检查清单：

“ 应用清单 ”窗格包含以下部分：

• 顶部部分，包含清单链接

• 标识

• 表示

• 协议处理程序

• 图标

• 窗口控件覆盖

• 屏幕截图 #1

• 屏幕截图 #2

• 若要查看清单源文件，请单击 “应用清单” 标签下面的链接。 在上图中，该链接为 manifest.json，它打开 https://airhorner.com/manifest.json，用于 Airhorner.com。

• “ 标识 ”和“ 演示文稿 ”部分以更用户友好的显示方式显示清单源中的字段。

• “图标”部分显示清单中指定的每个图标。

服务工作者

服务辅助角色是 Web 平台中的一项基本技术。 服务辅助角色是浏览器在后台运行的脚本，独立于网页。 服务辅助角色脚本使应用能够访问不需要网页或用户交互的功能，例如推送通知、后台同步和脱机体验。

DevTools 中用于检查和调试服务辅助角色的主要位置是工具”中的“服务辅助角色”窗格。

查看服务辅助角色：

1. 在新窗口或选项卡中转到网页，例如 Airhorner.com。

2. 右键单击网页，然后选择“ 检查”。

   DevTools 随即打开。

3. 在 DevTools 中，选择 “应用程序 工具”。

4. 在左侧大纲的“ 应用程序 ”部分中，选择“ 服务辅助角色”。

   将显示 “服务辅助角色 ”窗格：

• 如果将服务辅助角色安装到当前打开的页面，则服务辅助角色将列在“ 服务辅助角色 ”窗格中。 例如，在上图中，为 的范围 https://weather-pwa-sample.firebaseapp.com安装了一个服务辅助角色。

• “ 脱机 ”复选框将 DevTools 置于脱机模式。 这等效于“”或Go offline“命令”菜单中的 选项提供的脱机模式。

• “ 重载时更新 ”复选框会强制服务辅助角色在每次加载页面时进行更新。

• “ 绕过网络 ”复选框会绕过服务辅助角色，并强制浏览器转到网络以获取请求的资源。

• 网络 请求 链接将你带到 网络 工具，其中包含与筛选器) is:service-worker-intercepted (服务辅助角色相关的截获请求列表。 请参阅下面的 显示服务辅助角色处理的网络请求。

• “ 更新 ”按钮对指定的服务辅助角色执行一次性更新。

• “推送”按钮模拟没有有效负载 (也称为发痒) 的推送通知。

• “ 同步 ”按钮模拟后台同步事件。

• “注销”链接取消注册指定的服务辅助角色。 若要取消注册服务辅助角色，并通过单击一次按钮擦除存储和缓存，请参阅下面的 “清除存储”。

• “源”行指示安装当前正在运行的服务辅助角色的时间。 此链接是服务辅助角色的源文件的名称。 选择链接会将你发送到服务辅助角色的源。

• “状态”行告知服务辅助角色的状态。 上图中绿色状态指示器旁边的 ID 号 (#36) 是当前处于活动状态的服务辅助角色。

  在状态旁边：

  • 如果服务辅助角色已停止，则会显示 “启动 ”按钮。
  • 如果服务辅助角色正在运行，则会显示 一个停止 按钮。

  服务辅助角色设计为随时由浏览器停止和启动。 使用 停止按钮显式 停止服务辅助角色可能会模拟这一点。

  停止服务辅助角色是测试代码在服务辅助角色再次启动时的行为方式的好方法。 它经常由于对持久性全局状态的错误假设而显示 bug。

• “客户端”行告知服务辅助角色的作用域为的源。 启用“全部显示”复选框后，焦点按钮非常有用。 启用该复选框后，将列出所有已注册的服务辅助角色。 如果单击其他选项卡中运行的服务辅助角色旁边的 焦点 按钮，Microsoft Edge 将焦点放在该选项卡上。

• “更新周期”表显示服务辅助角色的活动及其运行时间，例如“安装”、“等待”和“激活”。 若要查看每个活动的确切时间戳，请单击“ 展开 () 按钮。

如果服务辅助角色导致任何错误，则会显示 “错误” 标签。

另请参阅：

• 服务辅助角色 API - 在 MDN 中，有关服务辅助角色。

显示服务辅助角色处理的网络请求

在应用程序工具的“服务辅助角色”窗格中，可以通过网络工具快速访问服务辅助角色处理的网络请求列表。

显示服务辅助角色处理的网络请求：

1. 在新窗口或选项卡中转到网页，例如 Airhorner.com。

2. 右键单击网页，然后选择“ 检查”。

   DevTools 随即打开。

3. 在 DevTools 中，选择 “应用程序 工具”。

4. 在左侧大纲的“ 应用程序 ”部分中，选择“ 服务辅助角色”。

   将显示“ 服务辅助角色 ”窗格。

5. 在 “服务辅助角色 ”窗格的右上角，单击“ 网络请求 ”按钮。

   “ “网络 工具随即打开。

   “筛选器”文本框包含 is:service-worker-intercepted。 此筛选器仅显示此服务辅助角色处理的请求。

6. 刷新网页。

7. 选择其中一个请求，例如 main.css。

   此时会显示边栏。

8. 在边栏中，单击“ 计时 ”选项卡。

   “ 服务辅助角色 ”部分显示有关 启动 和 respondWith 阶段的计时信息。

服务辅助角色缓存

“ 缓存存储 ”窗格提供已使用 (服务辅助角色) 缓存 API 缓存的资源的只读列表：

首次打开缓存并向其添加资源时，DevTools 可能不会检测到更改。 刷新页面以显示缓存。

所有打开的缓存都列在 缓存存储 扩展器下。

配额使用情况

“缓存存储”窗格中的某些响应可能会标记为“不透明”。 这是指未启用 CORS 时从其他源检索的响应，例如从 CDN 或远程 API 检索的响应。

为了避免跨域信息泄露，将大量填充添加到用于计算存储配额限制的不透明响应的大小， (例如，是否 QuotaExceeded) 引发异常并由 API 报告 navigator.storage 。

此填充的详细信息因浏览器而异，但对于 Microsoft Edge，这意味着任何缓存的不透明响应对总体存储使用量的贡献最小大小约为 7 MB。 在确定要缓存多少个不透明响应时，请记住填充，因为根据不透明资源的实际大小，你可能很容易超过存储配额限制，比预期要快得多。

相关指南：

• Stack Overflow：哪些限制适用于不透明的响应？

清除存储

开发渐进式 Web 应用时， “清除存储 ”选项卡非常有用。 单击一下即可使用“ 清除存储 ”窗格取消注册服务辅助角色并清除所有缓存和存储。

另请参阅

• 检查网络活动

此作品根据 Creative Commons 署名 4.0 国际许可获得许可。