【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。

在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：

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

• 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信息。

Manifest

在Application中，点击Manifest便可看到当前应用所使用的Manifest配置：

一样，点击manifest.json出连接能够查看manifest文件。点击“Add to homescreen”能够把应用添加到桌面。除了点击“Add to homescreen”，也能够使用chrome中的添加到应用文件夹。

Cache

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

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

若是想删除某些cache，能够右键点击，而后选择Delete；也能够点击上方的×。除了在这里清除cache，还能够在Application下的Clear Storage中清除包括Service Worker、Cache与Storage（cookie/localstorage/IndexedDB……）等数据。

写在最后

若是你喜欢或想要了解更多的PWA相关知识，欢迎关注我，关注《PWA学习与实践》系列文章。我会总结整理本身学习PWA过程的遇到的疑问与技术点，并经过实际代码和你们一块儿实践。

在下一篇文章里，咱们会继续了解另外一个常常与Push API组合在一块儿的功能——消息提醒，Notification API。

《PWA学习与实践》系列

• 第一篇：2018，开始你的PWA学习之旅
• 第二篇：10分钟学会使用Manifest，让你的WebApp更“Native”
• 第三篇：从今天起，让你的WebApp离线可用
• 第四篇：TroubleShooting: 解决FireBase login验证失败问题
• 第五篇：与你的用户保持联系: Web Push功能
• 第六篇：How to Debug? 在chrome中调试你的PWA（本文）
• 第七篇：加强交互：使用Notification API来进行提醒
• 第八篇：使用Service Worker进行后台数据同步
• 第九篇：PWA实践中的问题与解决方案
• 第十篇：Resource Hint - 提高页面加载性能与体验
• 第十一篇：从PWA离线工具集workbox中学习各种离线策略（写做中…）