调试渐进式 Web 应用 (PWA)

  • 项目

使用 应用程序面板 检查、修改和调试 Web 应用清单、服务工作者和服务辅助角色缓存。

本文仅讨论 应用程序面板的 渐进式 Web 应用功能。 有关 应用程序 面板中其他窗格的帮助，请参阅 “查看页面资源 ”和 “查看”并编辑本地存储。

另请参阅进步Web 应用 (PVA) 概述。

摘要

  • 使用 “清单 ”窗格检查 Web 应用清单并触发“添加到主屏幕”事件。

  • 使用 “服务工作者 ”窗格执行一系列与服务辅助角色相关的任务，例如取消注册或更新服务、模拟推送事件、脱机或停止服务辅助角色。

  • 从 “缓存存储 ”窗格中查看服务辅助角色缓存。

  • 从“ 清除存储 ”窗格单击一个按钮，取消注册服务辅助角色并清除所有存储和缓存。

Web 应用清单

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

设置清单后，可以使用应用程序面板的****“清单”窗格对其进行检查。

清单窗格。

  • 若要查看清单源，请单击上图) 中“ 应用清单 标签” (https://airhorner.com/manifest.json 下方的链接。

  • 标 识 和 演示文稿 部分仅在用户更友好的显示中显示清单源中的字段。

  • “ 图标” 部分显示已指定的每个图标。

服务工作者

服务工作者是未来 Web 平台中的基础技术。 它们是浏览器在后台运行的脚本，独立于网页。 这些脚本允许你访问不需要网页或用户交互的功能，例如推送通知、后台同步和脱机体验。

应用程序面板中的 “服务工作者”窗格是 DevTools 中用于检查和调试服务工作者的主要位置。

“服务辅助角色”窗格。

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

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

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

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

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

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

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

  • “取消注册” 按钮将注销指定的服务辅助角色。 单击一个按钮，查看 “清除存储 ”，了解取消注册服务辅助角色以及擦除存储和缓存的方法。

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

  • “状态”行将告知服务辅助角色的状态。 上图中绿色状态指示器旁边的 ID 号 (#36) 当前处于活动状态的服务辅助角色。 在状态旁边，如果服务辅助角色) 停止，则 (启动按钮 ;如果显示服务辅助角色正在运行) ，则 (停止 按钮。 服务辅助角色设计为随时由浏览器停止和启动。 使用 “停止 ”按钮显式停止服务辅助角色可能会模拟这一点。 停止服务辅助角色是测试当服务辅助角色重新启动时代码的行为方式的好方法。 它经常显示 bug，因为对持久性全球状态的错误假设。

  • 客户 端 行将告知服务辅助角色的作用域。 启用 “显示所有”复选框后，焦点按钮最为有用。 启用该复选框后，将列出所有已注册的服务工作者。 如果单击另一个选项卡中运行的服务辅助角色旁边 的“焦点 ”按钮，Microsoft Edge 将重点关注该选项卡。

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

服务辅助角色缓存

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

缓存存储窗格。

备注

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

如果已打开两个或更多缓存，缓存将显示在 缓存存储 下拉列表下，如以下屏幕截图所示。

缓存存储下拉列表。

配额使用情况

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

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

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

相关指南：

清除存储

在开发渐进式 Web 应用时，“ 清除存储 ”窗格是一项非常有用的功能。 此窗格允许注销服务人员，并单击单击一个按钮清除所有缓存和存储。

备注

此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面位于此处，由 Kayce Basques\（Chrome DevTools 和 Lighthouse 的技术作家）撰写。

知识共享许可协议。 本作品根据 Creative Commons Attribution 4.0 International License 获得许可。