Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

调试渐进式 Web 应用

Kayce Basques

Sofia Emelianova

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

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

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

本指南仅讨论应用面板的渐进式 Web 应用功能。如果您需要其他窗格方面的帮助，请参阅本指南的最后一节：其他应用面板指南。

摘要

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

Web 应用清单

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

设置好清单后，您可以使用应用面板的清单标签页来检查它。

“清单”标签页。

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

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

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

查看和检查可遮盖式图标

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

如需裁剪图标，以便仅显示最小安全区域，请选中 Show only the minimum safe area for maskable icons（仅显示可遮盖式图标的最小安全区域）。

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

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

触发器安装

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

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

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

安装应用（或某些设备上的添加到主屏幕）功能无法模拟移动设备的工作流程。请注意，即使 DevTools 处于设备模式，桌面版 Chrome 浏览器也会在地址栏中显示安装按钮。不过，如果您能成功将应用添加到桌面设备，那么该应用也能在移动设备上正常运行。

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

检查快捷方式

借助应用快捷方式，您可以让用户快速访问他们经常需要执行的少数常用操作。

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

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

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

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

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

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

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

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

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

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

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

Service Worker

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

相关指南：

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

“Service Worker”标签页。

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

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