【PWA学习与实践】(6) 在Chrome中调试你的PWA

《PWA学习与实践》系列文章已整理至gitbook - PWA学习手册,文字内容已同步至learning-pwa-ebook。转载请注明作者与出处。

本文是《PWA学习与实践》系列的第六篇文章。

PWA作为时下最火热的技术概念之一,对提升Web应用的安全、性能和体验有着很大的意义,非常值得我们去了解与学习。对PWA感兴趣的朋友欢迎关注《PWA学习与实践》系列文章。

前几篇文章介绍了PWA中的一些功能与背后的技术。工欲善其事,必先利其器。这一篇会介绍如何调试我们的PWA。

Service Worker

新版的chrome调试工具中集成了Service Worker调试工具。

开启chrome调试工具,选择Application选项卡。在左侧的列表选择Application --> Service Worker,就会显示当前站点下的Service Worker。

【PWA学习与实践】(6) 在Chrome中调试你的PWA

在Service Worker下有三个复选框:

  • Offline:切换为无网环境。通过勾选可以方便查看应用在无网环境中的表现。
  • Update on reload:每次reload都更新Service Worker。一般来说,当访问站点发现Service Worker有更新后,为了保证本次访问,不会立即激活新的Service Worker,只会在安装后进入等待状态,在下一次访问时激活。勾选该选项就可以使每次Reload后都重新安装与激活Service Worker。
  • Bypass for network:使用网络请求。我们知道Service Worker可以拦截客户端请求,勾选该选项后所有请求都会直接走网络请求。

面板右上角的Upadte按钮可以手动触发Service Worker的更新;而Unregister类似于代码中的unregister,用于注销当前的Service Worker。

从下方“Service workers from other domain”中,可以查看在这个client上所有注册过的Service Worker:

【PWA学习与实践】(6) 在Chrome中调试你的PWA

Service Worker主面板区域包括了:Source、Status、Clients、Push和Sync五个项目。

【PWA学习与实践】(6) 在Chrome中调试你的PWA

  • Source:展示了当前注册所使用的Service Worker脚本(sw.js),点击可以查看脚本内容。同时还展示了该Service Worker的安装时间。
  • Status:展示Service Worker所处的生命周期。通过点击stop按钮可以暂停该Service Worker。其中,#1201表示Service Worker的版本,当sw.js文件未更改时,reload站点该数字是不会增加的;但是当勾选Update on reload后,由于每次reload都会触发Service Worker重新安装,因此该数字会增加。
  • Clients:显示了当前Service Worker所作用的root。focus按钮用来帮你快速切换到该Service Worker对应的tab(当你打开多个站点的tab时,点击可以快速切换)。
  • Push:用来模拟进行推送。
  • Sync:用来模拟进行后台同步。

在Service Worker中console.log的信息也会显示在Console中。此外,由于默认情况下,reload页面会清空console,为了保存一些日志信息,可以打开Preserve log来保留Console信息。

【PWA学习与实践】(6) 在Chrome中调试你的PWA

Manifest

在Application中,点击Manifest即可看到当前应用所使用的Manifest配置:

【PWA学习与实践】(6) 在Chrome中调试你的PWA

同样,点击manifest.json出链接可以查看manifest文件。点击“Add to homescreen”可以把应用添加到桌面。除了点击“Add to homescreen”,也可以使用chrome中的添加到应用文件夹。

【PWA学习与实践】(6) 在Chrome中调试你的PWA

Cache

除了Service Worker与Manifest,在我们的WebApp中还用到了Cache。在Application中也支持查看Cache:在Cache列表的Cache Storage中查看。

【PWA学习与实践】(6) 在Chrome中调试你的PWA

其中bs-0-2-0和api-0-1-1就是我们的“图书搜索”Web App所创建与使用的两个cache。在bs-0-2-0中缓存了包括页面、js、css、图片在内的一些静态资源;在而api-0-1-1中则缓存了图书检索的XHR请求。

【PWA学习与实践】(6) 在Chrome中调试你的PWA

如果想删除某些cache,可以右键点击,然后选择Delete;也可以点击上方的×。除了在这里清除cache,还可以在Application下的Clear Storage中清除包括Service Worker、Cache与Storage(cookie/localstorage/IndexedDB……)等数据。

【PWA学习与实践】(6) 在Chrome中调试你的PWA

写在最后

如果你喜欢或想要了解更多的PWA相关知识,欢迎关注我,关注《PWA学习与实践》系列文章。我会总结整理自己学习PWA过程的遇到的疑问与技术点,并通过实际代码和大家一起实践。

在下一篇文章里,我们会继续了解另一个经常与Push API组合在一起的功能——消息提醒,Notification API。

《PWA学习与实践》系列

相关推荐