此页面由 Cloud Translation API 翻译。

调试渐进式 Web 应用

Kayce Basques

Sofia Emelianova

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

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

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

本指南仅介绍应用面板的渐进式 Web 应用功能。如需有关其他窗格的帮助，请参阅本指南的最后一部分，即其他应用窗格指南。

摘要

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

Web 应用清单

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

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

“清单”标签页。

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

此外，如果 DevTools 遇到错误（例如无法加载图标），清单标签页会显示一个可安装性部分来说明该错误。

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

查看和检查可遮盖式图标

清单标签页的图标部分会显示应用的所有图标。在本部分中，您还可以查看可遮盖式图标的安全区域，这种图标格式可适应各种平台。

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

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

如果整个徽标都在安全区域内显示，则说明您已完成设置。

触发器安装

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

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

在 Chrome 中打开 PWA 的着陆页。
点击顶部地址栏右侧的安装。
按照屏幕上的说明操作。

安装应用功能无法模拟移动设备的工作流程。请注意，桌面版 Chrome 浏览器如何在地址栏中显示安装按钮，即使 DevTools 处于设备模式也是如此。不过，如果您能成功将应用添加到桌面设备，那么它也适用于移动设备。

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

检查快捷方式

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

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

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

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

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

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

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

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

PWA 可以处理使用特定协议的链接，从而提供更集成的体验。如需了解如何创建处理程序，请参阅 PWA 的网址协议处理程序注册。

如需测试您的处理脚本，请执行以下操作：

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

如果处理脚本成功处理链接，您会在应用中看到一个打开的咖啡杯图片。

Service Worker

Service Worker 是未来 Web 平台的基础技术。它们是浏览器在后台运行的脚本，与网页无关。借助这些脚本，您可以访问不需要网页或用户互动的功能，例如推送通知、后台同步和离线体验。

相关指南：

应用面板中的服务工件标签页是开发者工具中用于检查和调试服务工件的主要位置。

“Service Workers”标签页。

如果当前打开的网页上安装了 Service Worker，您会在此标签页中看到该 worker。例如，在上面的屏幕截图中，为 https://airhorner.com/ 的范围安装了服务工件。
离线复选框可将 DevTools 切换到离线模式。这相当于网络面板中提供的离线模式，或命令菜单中的 Go offline 选项。
重新加载时更新复选框会强制服务工件在每次网页加载时更新。
绕过以转到网络复选框会绕过服务工件，并强制浏览器转到网络以获取请求的资源。
点击 Network requests（网络请求）链接可前往 Network（网络）面板，其中列出了与服务工件相关的拦截请求（is:service-worker-intercepted 过滤条件）。
更新链接会对指定的服务工件执行一次性更新。
Push 按钮会模拟不带载荷的推送通知（也称为“tickle”）。
同步按钮会模拟后台同步事件。
取消注册链接用于取消注册指定的 Service Worker。如需了解如何取消注册服务工件并一键擦除存储空间和缓存，请参阅清除存储空间。
Source 行会告知您当前正在运行的服务工件何时安装。该链接是服务工件的源文件的名称。点击该链接即可前往服务工作器的来源。
状态行会显示 Service Worker 的状态。此行中的数字（屏幕截图中的 #16）表示服务工件已更新的次数。如果您启用 Update on reload 复选框，您会发现该数字会在每次网页加载时递增。状态旁边会显示一个启动链接（如果服务工件已停止）或停止链接（如果服务工件正在运行）。Service Worker 旨在由浏览器随时停止和启动。使用 stop 链接明确停止您的服务工件可以模拟这种情况。停止您的服务工件是一种很好的方式，可用于测试您的代码在服务工件重新启动后会如何运行。由于对持久性全局状态的假设有误，因此它经常会揭示 bug。
客户端行会显示服务工件的范围所涵盖的来源。当您有多个已注册的服务工件时，聚焦按钮最有用。如果您点击在其他标签页中运行的某个服务工件旁边的聚焦按钮，Chrome 会聚焦到该标签页。
更新周期表会显示服务工件的活动及其所用时间，例如安装、等待和激活。如需查看每个活动的确切时间戳，请点击展开按钮。

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