调试渐进式 Web 应用

凯切·巴斯克斯
Kayce Basques
索菲亚·埃梅利安诺娃
Sofia Emelianova

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

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

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

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

摘要

  • 使用清单窗格检查您的 Web 应用清单。
  • 使用 Service Worker 窗格可以执行与 Service Worker 相关的全部任务,例如取消注册或更新 Service、模拟推送事件、离线或停止 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)下方的链接。
  • IdentityPresentation 部分只以更方便用户的方式显示清单来源中的字段。
  • 通过协议处理程序部分,只需点击一下按钮,即可测试 PWA 的网址协议处理程序注册情况。 如需了解详情,请参阅测试网址协议处理程序注册
  • Icons 部分显示了您指定的每个图标,您可以检查它们的蒙版。
  • 快捷方式 #N 部分显示了有关所有快捷方式对象的信息。
  • 屏幕截图 #N 部分显示了屏幕截图,用于提供更丰富的应用安装界面。

此外,如果开发者工具遇到错误(例如无法加载的图标),则 Manifest 窗格会显示可安装性部分来说明相应错误。

“Manifest”窗格中的“可安装性”部分。

查看和检查可遮盖图标

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

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

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

如果整个徽标在安全区域内可见,则没有问题。

触发安装

Chrome 让您能够直接在其界面中启用并推荐 PWA 安装。 了解如何提供您自己的应用内安装体验

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

  1. 在 Chrome 中打开 PWA 的着陆页。
  2. 在顶部地址栏的右侧,点击 安装。 安装

    “安装”按钮。

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

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

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

检查快捷方式

通过应用快捷方式,您可以快速执行用户经常需要的一些常用操作。

如需检查您在清单文件中定义的快捷方式,请滚动到清单窗格的快捷方式 #N 部分。

“Manifest”窗格中的“Shortcut”部分。

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

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

如需检查屏幕截图,请滚动到 Manifest 窗格的 Screenshot #N 部分。

“Manifest”窗格中的安装对话框和屏幕截图。

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

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

如需测试处理程序,请执行以下操作:

  1. 在 PWA 着陆页上打开开发者工具。例如,查看此演示 PWA
  2. 在演示页面中,安装 PWA 并在安装后重新加载应用。浏览器现已将 PWA 注册为 web+coffee 协议的处理程序。
  3. 应用 > 清单 > 协议处理程序部分中,输入您希望处理程序测试的网址,然后点击测试协议测试处理程序。 在此示例中,处理程序可以处理 americanochailatte-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 load 复选框可强制 Service Worker 在每次网页加载时更新。
  • 复选框。 Bypass for network 复选框会绕过 Service Worker,并强制浏览器转到网络以获取所请求资源。
  • 网络请求链接会将您转到 Network 面板,其中包含与 Service Worker 相关的拦截请求列表(is:service-worker-intercepted 过滤器)。
  • Update 链接可对指定的 Service Worker 执行一次性更新。
  • 推送按钮可以模拟没有载荷的推送通知(也称为操作消息 (tickle))。
  • Sync 按钮会模拟后台同步事件。
  • Unregister 链接可以取消注册指定的 Service Worker。请参阅清理存储空间,了解如何取消注册 Service Worker,并且只需点击一下按钮,即可擦除存储空间和缓存。
  • Source 行会显示当前正在运行的 Service Worker 的安装时间。该链接是 Service Worker 的源文件的名称。点击该链接后,系统会将您转到 Service Worker 的来源。
  • Status 行显示了 Service Worker 的状态。此行的数字(屏幕截图中的 #16)表示 Service Worker 的更新次数。如果您选中 复选框。 Update on refresh 复选框,您会发现该数量在每次网页加载时都会递增。 状态旁边会显示一个 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。

在 serviceworker-internals 注册 Service Worker。

Service Worker 缓存

Cache Storage 窗格提供了一个只读列表,其中包含使用(Service 工作器)Cache API 缓存的资源。

Service Worker 缓存窗格。

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

如果您打开了两个或更多缓存,则会在缓存存储空间下拉菜单下方看到它们。

多个 Service Worker 缓存。

配额用量

“Cache Storage”窗格中的某些响应可能会被标记为“不透明”。这是指在未启用 CORS 的情况下,从其他来源(例如 CDN 或远程 API)检索到的响应。

为避免跨网域信息泄露,navigator.storage API 会报告用于计算存储空间配额限制(即是否抛出 QuotaExceeded 异常)的不透明响应的大小,并增加一个大幅度的内边距。

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

相关指南:

清空存储空间

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

相关指南:

其他应用面板指南

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

相关指南: