调试渐进式 Web 应用

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

使用 Application 面板检查、修改和调试网络应用清单、服务工作线程和服务工作线程缓存。

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

  • 即使在网络状况不稳定的情况下也能正常运行。
  • 可安装以启动操作系统的界面，例如 Mac OS X 上的应用文件夹、Windows 上的开始菜单，以及 Android 和 iOS 上的主屏幕。
  • 显示在活动切换器、设备搜索引擎（如 Spotlight）中以及内容分享表格中。

本指南仅讨论 Application 面板的渐进式 Web 应用功能。如果您希望获得其他窗格的帮助，请参阅本指南的最后一部分，即其他 Application 面板指南。

摘要

  • 使用 Manifest 标签页检查您的网络应用清单。
  • 使用 Service Workers 标签页执行与服务工作线程相关的全部任务，例如注销或更新服务、模拟推送事件、切换为离线状态，或者停止服务工作线程。
  • 从 Cache Storage（缓存存储）标签页查看您的服务工作线程缓存。
  • 从 Clear storage（清除存储）标签页中点击一次按钮，即可注销服务工作线程并清除所有存储空间和缓存。

网络应用清单

如果您希望用户能够将您的应用添加到 Mac OS X 上的 Applications 文件夹、Windows 上的 Start 菜单以及 Android 和 iOS 上的主屏幕，则需要网络应用清单。该清单定义了应用在主屏幕上的外观、从主屏幕启动时将用户定向到何处，以及应用在启动时的外观。

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

“清单”标签页。

  • 如需查看清单来源，请点击 App Manifest 标签下方的链接（上方屏幕截图中的 manifest.webmanifest）。
  • Identity 和 Presentation 部分只是以一种对用户更加友好的方式显示了清单来源中的字段。
  • 在协议处理程序部分，您只需点击一个按钮即可测试 PWA 的网址协议处理程序注册。如需了解详情，请参阅测试网址协议处理程序注册。
  • 图标部分会显示您已指定的每个图标，并可让您查看其遮罩。
  • 这组快捷方式 #N 部分显示了您的所有快捷方式对象的相关信息。
  • 屏幕截图 #N 部分会显示更丰富的应用安装界面的屏幕截图。

此外，如果开发者工具遇到错误，例如无法加载的图标，Manifest 标签页会显示 Installability 部分，说明相应错误。

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

查看和检查可遮盖的图标

Manifest 标签页的 Icons 部分会显示应用的所有图标。在此部分中，您还可以检查可遮盖图标的安全区域，即可适应平台的图标格式。

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

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

如果整个徽标都在安全区域内显示，则说明一切就绪。

触发器安装

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

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

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

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

    “安装”按钮。

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

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

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

检查快捷方式

借助应用快捷方式，您可以让用户快速访问所需的常用操作。

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

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

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

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

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

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

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

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

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

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

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

Service Worker

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

相关指南：

Application 面板中的 Service Workers 标签页是 DevTools 中检查和调试服务工作线程的主要位置。

“Service Workers”标签页。

  • 如果 Service Worker 已安装到当前打开的页面上，那么您会在此标签页上看到它。例如，在上面的屏幕截图中，https://airhorner.com/ 的范围内安装了一个 Service Worker。
  • 复选框。 Offline 复选框可将开发者工具置于离线模式。这相当于 Network 窗格中的离线模式，或 Command Menu 中的 Go offline 选项。
  • 复选框。 Update on upload 复选框强制 Service Worker 在每次网页加载时更新。
  • 复选框。 绕过网络复选框会绕过 Service Worker，并强制浏览器转到网络以获取请求的资源。
  • 点击 Network requests（网络请求）链接可前往 Network（网络）面板，其中列出了与 Service Worker 相关的拦截请求（is:service-worker-intercepted 过滤条件）。
  • Update 链接用于对指定的 Service Worker 执行一次性更新。
  • Push 按钮可以在没有负载的情况下模拟推送通知（也称为操作消息）。
  • Sync 按钮可以模拟后台同步事件。
  • Unregister 链接会取消注册指定的 Service Worker。请参阅清除存储空间，了解只需点击一次按钮即可注销 Service Worker 以及擦除存储空间和缓存的方法。
  • Source 行可以告诉您当前正在运行的服务工作线程的安装时间。链接是服务工作线程源文件的名称。点击链接即可转到 Service Worker 的来源。
  • Status 行会告诉您 Service Worker 的状态。此行上的数字（屏幕截图中的 #16）表示服务工作器已更新的次数。如果选中 复选框。 Update on 重新加载复选框，您会注意到该数字会在每次网页加载时递增。在状态旁边，您会看到 start 链接（如果服务工作线程已停止）或 stop 链接（如果服务工作线程正在运行）。Service Worker 可以由浏览器随时停止和启动。使用停止链接明确停止服务工作线程可以模拟这一点。停止服务工作线程是测试服务工作线程再次重新启动时的代码行为方式的绝佳方法。它通常可以揭示由于对持续全局状态的不完善假设而引发的错误。
  • Clients 行会告诉您 Service Worker 作用域的来源。当您有多个已注册的 Service Worker 时，focus 按钮最为有用。如果您点击在其他标签页中运行的 Service Worker 旁边的 focus 按钮，则 Chrome 会将焦点放在该标签页上。

  • 更新周期表会显示服务工作线程的活动及其所用时间，例如安装、等待和激活。如需查看每个 activity 的确切时间戳，请点击 展开。 展开按钮。

    活动及其时间戳。

    如需了解详情，请参阅服务工件生命周期。

如果服务工作线程导致任何错误，服务工作线程标签页会在来源行旁边显示 错误。 错误图标，其中包含错误数量。点击带有该编号的链接会转到控制台，其中包含所有已记录的错误。

控制台中的 Service Worker 错误。

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

Service Worker 在 serviceworker-internals 中注册。

Service Worker 缓存

Cache Storage 标签页提供了一个已使用（服务工作线程）Cache API 缓存的只读资源列表。

Service Worker 的缓存标签页。

请注意，第一次打开缓存并向其添加资源时，DevTools 可能检测不到更改。重新加载页面后，您应当可以看到缓存。

如果您打开了两个或更多个缓存，则会在缓存存储下拉列表下方看到它们。

多个 Service Worker 缓存。

配额用量

“Cache Storage”标签中的某些响应可能会被标记为“opaque”。指在未启用 CORS 的情况下，从其他来源（如 CDN 或远程 API）检索到的响应。

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

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

相关指南：

清除存储

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

相关指南：

其他“应用”面板指南

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

相关指南：