调试渐进式 Web 应用

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

使用 Application 面板检查、修改和调试 Web 应用清单、Service Worker 和 Service Worker 缓存。

渐进式 Web 应用 (PWA) 是使用网络技术构建的现代优质应用。 PWA 提供与 iOS、Android 和桌面应用类似的功能。它们是：

  • 即使在网络条件不稳定的情况下也依然可靠。
  • 可在操作系统的启动界面上安装。例如，Mac OS X 上的应用文件夹、Windows 上的开始菜单，以及 Android 和 iOS 设备上的主屏幕。
  • 在活动切换器、设备搜索引擎（如“特别关注”）和内容共享表格中显示。

本指南仅讨论 Application 面板的渐进式 Web 应用功能。如果您要查找其他窗格方面的帮助，请查看本指南的最后一部分，即其他应用面板指南。

摘要

  • 使用清单标签页检查您的 Web 应用清单。
  • 您可以使用 Service Worker 标签页执行与 Service Worker 相关的全部任务，例如取消注册或更新服务、模拟推送事件、离线或停止 Service Worker。
  • 通过 Cache Storage 标签页查看 Service Worker 缓存。
  • 只需在 Clear storage 标签页中点击一下按钮，取消注册 Service Worker 并清除所有存储空间和缓存。

Web 应用清单

如果您希望用户能够将您的应用添加到 Mac OS X 上的应用文件夹、Windows 上的开始菜单以及 Android 和 iOS 设备上的主屏幕中，那么您需要一份 Web 应用清单。清单定义了应用在主屏幕上的显示方式、从主屏幕启动时将用户定向到何处，以及应用在启动时的外观。

设置好清单后，您可以使用 Application 面板的 Manifest 标签页进行检查。

“Manifest”标签页。

  • 如需查看清单来源，请点击 App Manifest 标签（上方屏幕截图中的 manifest.webmanifest）下方的链接。
  • 身份和呈现部分仅以更便于用户理解的方式显示清单来源中的字段。
  • 通过协议处理程序部分，只需点击一下按钮，即可测试 PWA 的网址协议处理程序注册情况。 如需了解详情，请参阅测试网址协议处理程序注册。
  • Icons 部分显示了您指定的每个图标，您可以检查它们的蒙版。
  • 快捷方式 #N 组显示了您的所有快捷方式对象的相关信息。
  • 屏幕截图 #N 部分用于展示更丰富的应用安装界面的屏幕截图。

此外，如果开发者工具遇到错误（例如无法加载的图标），清单标签页会显示可安装性部分来说明此错误。

“Manifest”标签页中的“可安装性”部分。

查看和勾选可遮盖图标

清单标签页的图标部分显示应用的所有图标。在此部分中，您还可以查看可遮盖式图标的安全区域，这种图标格式会根据平台进行调整。

如需修剪图标，以便仅显示最小安全区域，请勾选 复选框。 仅显示可遮盖图标的最小安全区域。

查看可遮盖图标的最小安全区域。

如果整个徽标都在安全区域内清晰可见，您就可以放心使用。

触发器安装

借助 Chrome，您可以直接在界面中启用并宣传 PWA 安装。 了解如何提供您自己的应用安装体验。

如需触发 PWA 的安装流程，请执行以下操作：

  1. 在 Chrome 中打开 PWA 的着陆页。

  2. 在顶部地址栏的右侧，点击 安装。 安装。

    “安装”按钮。

  3. 按照屏幕上的说明操作。

安装应用功能无法模拟移动设备的工作流程。请注意，即使开发者工具处于设备模式，桌面版 Chrome 浏览器也会在地址栏中显示安装按钮。不过，如果您能够成功将应用添加到桌面，那么在移动设备上也可以使用。

如果您想测试真实的移动体验，可以通过远程调试将真实移动设备连接到开发者工具。如需在已连接的移动设备上触发安装，请打开 三点状菜单。 三点状菜单，然后点击 安装应用。 安装应用。

检查快捷方式

通过应用快捷方式，您可以快速访问用户经常需要的一些常用操作。

要检查您在清单文件中定义的快捷方式，请滚动到清单标签页的快捷方式 #N 部分。

“清单”标签页中的“快捷方式”部分。

检查屏幕截图，以获取更丰富的安装界面

如果您向清单文件添加说明和一组屏幕截图，应用的安装对话框会更加丰富。

如需检查屏幕截图，请滚动到清单标签页的屏幕截图 #N 部分。

“Manifest”标签页中的安装对话框和屏幕截图。

测试网址协议处理程序注册

PWA 可以处理使用特定协议的链接，以实现更完整的体验。 如需了解如何创建处理程序，请参阅为 PWA 注册网址协议处理程序。

如需测试处理程序，请执行以下操作：

  1. 在 PWA 的着陆页上打开开发者工具。例如，查看此演示 PWA。
  2. 在演示页面中，安装 PWA 并在安装后重新加载应用。浏览器现已将 PWA 注册为 web+coffee 协议的处理程序。
  3. 在应用 > 清单 > 协议处理程序部分中，输入您希望处理程序测试的网址，然后点击测试协议。 测试处理程序。 在此示例中，处理程序可以处理 americano、chai 和 latte-macchiato。
  4. 当 Chrome 询问您能否打开该应用时，请点击打开协议处理程序进行确认。 打开应用。
  5. 在下一个对话框中，允许应用处理 web+coffee 链接。 允许处理链接。

如果处理程序成功处理了链接，您会看到应用中已打开咖啡杯的图片。

Service Worker

Service Worker 是未来网络平台中的一种基础技术。它们是浏览器在后台独立于网页运行的脚本。通过这些脚本，您可以使用不需要网页或用户互动的功能，例如推送通知、后台同步和离线体验。

相关指南：

Application 面板中的 Service Workers 标签页是开发者工具中用于检查和调试 Service Worker 的主要位置。

Service Workers 标签页。

  • 如果 Service Worker 已安装到当前打开的页面上，您就会在此标签页中看到它。例如，在上面的屏幕截图中，为 https://airhorner.com/ 的作用域安装了一个 Service Worker。
  • 复选框。 线下转化复选框可将开发者工具置于离线模式。这相当于网络面板中提供的离线模式或命令菜单中的 Go offline 选项。
  • 复选框。 Update on reset 复选框强制 Service Worker 在每次网页加载时更新。
  • 复选框。 Bypass for network 复选框会绕过 Service Worker，强制浏览器前往网络寻找请求的资源。
  • 网络请求链接会将您转到 Network 面板，其中包含与 Service Worker 相关的被拦截请求的列表（is:service-worker-intercepted 过滤器）。
  • Update 链接可对指定的 Service Worker 执行一次性更新。
  • 推送按钮可模拟没有载荷（也称为 tickle）的推送通知。
  • 同步按钮会模拟后台同步事件。
  • Unregister 链接用于取消注册指定的 Service Worker。请参阅清理存储空间，了解如何通过单击按钮来取消注册 Service Worker 并擦除存储空间和缓存。
  • Source 行会显示当前正在运行的 Service Worker 的安装时间。链接是 Service Worker 的源文件名称。点击此链接会将您转到 Service Worker 的来源。
  • Status 行显示了 Service Worker 的状态。此行上的数字（屏幕截图中的 #16）表示 Service Worker 的更新次数。如果您选中 复选框。 Update on load（在重新加载时更新）复选框，会发现此数值在您每次网页加载时都会递增。在该状态旁边，您将看到 start 链接（如果 Service Worker 已停止）或 stop 链接（如果 Service Worker 正在运行）。Service Worker 可以由浏览器随时停止和启动。使用 stop 链接明确停止 Service Worker 可以模拟这种情况。停止 Service Worker 是测试 Service Worker 在再次重新启动时代码行为的绝佳方式。它经常会显示由于对持续全局状态的错误假设而导致的 bug。
  • Clients 行告诉您 Service Worker 作用域限定的来源。当您有多个已注册的 Service Worker 时，focus 按钮会最有用。如果您点击在其他标签页中运行的 Service Worker 旁边的 focus 按钮，Chrome 会聚焦于该标签页。

  • Update Cycle 表显示 Service Worker 的活动及其所用时间，如安装、等待和激活。如需查看每个 activity 的确切时间戳，请点击 展开。 展开按钮。

    活动及其时间戳。

    如需了解详情，请参阅 Service Worker 生命周期。

如果 Service Worker 导致任何错误，Service Workers 标签页将显示一个 错误。 错误图标，并在 Source 行旁边显示错误数量。带有该编号的链接会将您转到包含记录的所有错误的控制台。

控制台中的 Service Worker 错误。

要查看有关所有 Service Worker 的信息，请点击 Service Workers 标签页底部的 See all registrations。此链接指向 chrome://serviceworker-internals/?devtools，您可以在其中进一步调试您的 Service Worker。

Service Worker 在 serviceworker-internals 中注册。

Service Worker 缓存

Cache Storage 标签页提供了一个使用（Service Worker）Cache API 缓存的资源的只读列表。

Service Worker 的“Cache”标签页。

请注意，当您首次打开缓存并向其添加资源时，开发者工具可能无法检测到更改。重新加载页面，您应该会看到缓存。

如果您打开了两个或更多缓存，它们就会列在缓存存储空间下拉菜单下方。

多个 Service Worker 缓存。

配额用量

“缓存存储空间”标签中的某些响应可能被标记为“不透明”。在未启用 CORS 的情况下，这是指从其他来源（例如 CDN 或远程 API）检索到的响应。

为避免跨网域信息泄露，不透明响应的大小会添加明显的填充，用于计算存储空间配额限制（即是否抛出 QuotaExceeded 异常），并由 navigator.storage API 报告。

此内边距的详细信息因浏览器而异，但对于 Google Chrome 来说，这意味着，任何单个缓存的不透明响应对总存储空间用量所占的最小大小约为 7 MB。在确定要缓存的不透明响应数量时，您应牢记这一点，因为根据不透明资源的实际大小，您可能会比预期快得多的速度轻松超出存储配额限制。

相关指南：

清空存储空间

在开发渐进式 Web 应用时，Clear Storage 标签页是一项非常实用的功能。在该标签页中，只需点击一下按钮，即可取消注册 Service Worker，并清除所有缓存和存储空间。请查看以下部分了解详情。

相关指南：

其他应用面板指南

如需有关 Application 面板其他窗格的更多帮助，请查看以下指南。

相关指南：