使用 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 标签页进行检查。
- 如需查看清单来源,请点击 App Manifest 标签(上方屏幕截图中的
manifest.webmanifest
)下方的链接。 - 身份和呈现部分仅以更便于用户理解的方式显示清单来源中的字段。
- 通过协议处理程序部分,只需点击一下按钮,即可测试 PWA 的网址协议处理程序注册情况。 如需了解详情,请参阅测试网址协议处理程序注册。
- Icons 部分显示了您指定的每个图标,您可以检查它们的蒙版。
- 快捷方式 #N 组显示了您的所有快捷方式对象的相关信息。
- 屏幕截图 #N 部分用于展示更丰富的应用安装界面的屏幕截图。
此外,如果开发者工具遇到错误(例如无法加载的图标),清单标签页会显示可安装性部分来说明此错误。
查看和勾选可遮盖图标
清单标签页的图标部分显示应用的所有图标。在此部分中,您还可以查看可遮盖式图标的安全区域,这种图标格式会根据平台进行调整。
如需修剪图标,以便仅显示最小安全区域,请勾选 仅显示可遮盖图标的最小安全区域。
如果整个徽标都在安全区域内清晰可见,您就可以放心使用。
触发器安装
借助 Chrome,您可以直接在界面中启用并宣传 PWA 安装。 了解如何提供您自己的应用安装体验。
如需触发 PWA 的安装流程,请执行以下操作:
- 在 Chrome 中打开 PWA 的着陆页。
在顶部地址栏的右侧,点击
安装。
按照屏幕上的说明操作。
安装应用功能无法模拟移动设备的工作流程。请注意,即使开发者工具处于设备模式,桌面版 Chrome 浏览器也会在地址栏中显示安装按钮。不过,如果您能够成功将应用添加到桌面,那么在移动设备上也可以使用。
如果您想测试真实的移动体验,可以通过远程调试将真实移动设备连接到开发者工具。如需在已连接的移动设备上触发安装,请打开 三点状菜单,然后点击
安装应用。
检查快捷方式
通过应用快捷方式,您可以快速访问用户经常需要的一些常用操作。
要检查您在清单文件中定义的快捷方式,请滚动到清单标签页的快捷方式 #N 部分。
检查屏幕截图,以获取更丰富的安装界面
如果您向清单文件添加说明和一组屏幕截图,应用的安装对话框会更加丰富。
如需检查屏幕截图,请滚动到清单标签页的屏幕截图 #N 部分。
测试网址协议处理程序注册
PWA 可以处理使用特定协议的链接,以实现更完整的体验。 如需了解如何创建处理程序,请参阅为 PWA 注册网址协议处理程序。
如需测试处理程序,请执行以下操作:
- 在 PWA 的着陆页上打开开发者工具。例如,查看此演示 PWA。
- 在演示页面中,安装 PWA 并在安装后重新加载应用。浏览器现已将 PWA 注册为
web+coffee
协���的处理程序。 - 在应用 > 清单 > 协议处理程序部分中,输入您希望处理程序测试的网址,然后点击测试协议。
在此示例中,处理程序可以处理
americano
、chai
和latte-macchiato
。 - 当 Chrome 询问您能否打开该应用时,请点击打开协议处理程序进行确认。
- 在下一个对话框中,允许应用处理
web+coffee
链接。
如果处理程序成功处理了链接,您会看到应用中已打开咖啡杯的图片。
Service Worker
Service Worker 是未来网络平台中的一种基础技术。它们是浏览器在后台独立于网页运行的脚本。通过这些脚本,您可以使用不需要网页或用户互动的功能,例如推送通知、后台同步和离线体验。
相关指南:
Application 面板中的 Service Workers 标签页是开发者工具中用于检查和调试 Service Worker 的主要位置。
- 如果 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 Workers 标签页底部的 See all registrations。此链接指向 chrome://serviceworker-internals/?devtools
,您可以在其中进一步调试您的 Service Worker。
Service Worker 缓存
Cache Storage 标签页提供了一个使用(Service Worker)Cache API 缓存的资源的只读列表。
请注意,当您首次打开缓存并向其添加资源时,开发者工具可能无法检测到更改。重新加载页面,您应该会看到缓存。
如果您打开了两个或更多缓存,它们就会列在缓存存储空间下拉菜单下方。
配额用量
“缓存存储空间”标签中的某些响应可能被标记为“不透明”。在未启用 CORS 的情况下,这是指从其他来源(例如 CDN 或远程 API)检索到的响应。
为避免跨网域信息泄露,不透明响应的大小会添加明显的填充,用于计算存储空间配额限制(即是否抛出 QuotaExceeded
异常),并由 navigator.storage
API 报告。
此内边距的详细信息因浏览器而异,但对于 Google Chrome 来说,这意味着,任何单个缓存的不透明响应对总存储空间用量所占的最小大小约为 7 MB。在确定要缓存的不透明响应数量时,您应牢记这一点,因为根据不透明资源的实际大小,您可能会比预期快得多的速度轻松超出存储配额限制。
相关指南:
清空存储空间
在开发渐进式 Web 应用时,Clear Storage 标签页是一项非常实用的功能。在该标签页中,只需点击一下按钮,即可取消注册 Service Worker,并清除所有缓存和存储空间。请查看以下部分了解详情。
相关指南:
其他应用面板指南
如需有关 Application 面板其他窗格的更多帮助,请查看以下指南。
相关指南: