专注于
IT技术和业内交流

Chrome-DevTools — 调试 Progressive Web Apps

使用Application面板检查、修改和调试Web应用程序的manifests,service workers和 service worker caches。

本指南仅讨论Application面板的功能。如果你正在寻找其他面板的帮助文档,请查阅本指南中最后一部分,

Web app manifest

如果您希望用户能够将您的应用程序添加到其移动设备的主屏上,你需要一个 manifest
manifest定义该应用程序图标在主屏幕上的显示方式及其打开应用时的样式。


一旦你有了你的manifest配置,您就可以使用Application面板中的manifest查看他。

manifest pane

  • 查看Manifest源代码,请单击App Manifest下面的 (如上面的截图) 链接。https://airhorner.com/manifest.json
  • 添加到主屏幕(Add to homescreen )按钮,来模拟添加到主屏幕事件。您可以在下一节中找到更多相关信息。
  • IdentityPresentation部分只是为了更友好的展示 Manifest 源码中的字段。
  • Icons部分将显示您所指定的每个图标。

模拟添加到主屏幕的事件

一个 web 应用程序添加到主屏幕是有条件限制的(五分钟内至少打开两次)。
在开发或调试您的应用时,此条件可能不太方便。
每当这时你只需要在App Manifest面板下点击 Add to homescreen 按钮即可。

你可以在[ Google I/O 2016 progressive web app](https://events.google.com/io2016/)测试发现Add to Homescreen已经被支持。
点击 Add on Homescreen 按钮chrome 会提示 ‘add this site to your shelf’这样的横幅,这相当于移动设备中的“Add o Homescreen”提示

add to desktop shelf

提示︰ 在模拟添加到主屏幕事件时打开控制台。控制台会告诉你你的manifest是否有问提,并将相关的信息记录进 Add to Homescreen 事件的生命周期内。

添加到主屏幕功能还不能模拟移动设备的工作流。”add to shelf”的提示会如上面的截图一样触发,虽然 DevTools 是在Device模式。但是,如果可以成功的将您的应用程序添加到桌面,它理应也会在手机上同样的工作。

如果你想要测试真正的移动体验,你可以通过[远程调试]将真的移动设备连接到DevTools 远程调试,然后单击添加到主屏幕按钮 (DevTools) 来触发连接的移动设备上的”添加到主屏幕”的提示。

Service workers

Service workers 是未来web平台的基本技术。他们是一个单独的在后台运行的脚本。这些脚本使您能够在后台也能够访问 web 页面或与用户交互,像推送通知、 后台同步和脱机工作一样。

Service workers面板,是应用程序在 DevTools 中进行检查和调试Service workers的主要场所。

service worker pane

  • 如果在当前打开的页面运行有一个Service workers,你会在此窗格的列表中看见他。例如,在上面截图。https://events.google.com/io2016/
  • Offline复选框将 DevTools 置于脱机模式。这是相当于Network面板的脱机模式或Command Menu菜单中的Go offline选项。
  • Update on reload 复选框强制在每次页加载时更新Service workers。
  • Bypass for network复选框 可绕过Service workers强制浏览器加载网络资源。
  • Update 按钮来执行指定的Service workers更新。
  • Push 按钮会模拟推送一个没有payload的通知(我们可以叫之 tickle)。
  • Sync按钮模拟后台同步事件。
  • Unregister按钮注销指定的Service workers及其缓存。
  • Source行告诉你当前运行的Service worker源。链接是service worker的源代码文件的名称。单击该链接将转跳至service worker的源
  • Status行告诉你service worker的地位。(在上面的截图) 这条线上的数字指示已更新service worker的多少倍。如果您启用Update on reload复选框,你会发现每一页上的数字增量加载。旁边的地位你会看到启动按钮 (如果停止service worker) 或stop按钮 (如果service worker正在运行)。有时很有用,停止service worker来测试网页如何执行服务工作者不可用时。
  • Clients 告诉你service worker的起源。当您启用show all复选框时,focus按钮是很有用的。当启用该复选框,则会列出所有已注册的service worker。当你点击正在其他选项卡中运行的service workerfocus按钮,chrome侧会重于该选项卡。

如果service worker 出现任何错误,一个新的错误提示就会展现。

service worker with errors

Service worker caches

Service worker caches 面板只显示调用 Cache API(service worker) 存储的文件列表,以只读形式展现。

service worker cache pane

请注意,第一次你打开缓存并添加资源,DevTools 可能无法检测出变化。重新加载该页面,你应该会看到缓存文件。
如果你有两个或多个缓存打开,你会在他们下面的下拉列表中看到已经缓存的文件。

Cache Storage dropdown.

multiple service worker caches

Clear storage

清除存储项是一个非常有用的功能。此项允许您注销service worker和清除所有的缓存。

Other Application panel guides

查阅以下更多其他窗格的应用指南。

Application 面板.

本文由@W翻译、@海鸥校验,感谢大家的参与.如有错译、漏译请留言我们会及时更正。

未经允许,不得转载本站任何文章:代码山 » Chrome-DevTools — 调试 Progressive Web Apps

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们