本文是PWA 学习与实践系列的第六篇文章.
PWA 作为今年最火热的技术概念之一, 对提升 web 应用的安全, 性能和体验有着很大的意义, 非常值得我们去了解与学习.
本系列文章PWA 学习与实践会逐步拆解 PWA 背后的各项技术, 通过实例代码来讲解这些技术的应用方式. 也正是因为 PWA 中技术点众多, 知识细碎, 因此我在学习过程中, 进行了整理, 并产出了PWA 学习与实践系列文章, 希望能带大家全面了解 PWA 中的各项技术. 对 PWA 感兴趣的朋友欢迎关注.
前几篇文章介绍了 PWA 中的一些功能与背后的技术. 工欲善其事, 必先利其器. 这一篇会介绍如何调试我们的 PWA.
对之前的文章感兴趣的话, 可以从这里找到:
第一篇: 2018, 开始你的 PWA 学习之旅
第二篇: 10 分钟学会使用 Manifest, 让你的 WebApp 更 "Native"
第三篇: 从今天起, 让你的 WebApp 离线可用
第四篇: TroubleShooting: 解决 FireBase login 验证失败问题
第五篇: 与你的用户保持联系: Web Push 功能
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 进行后台数据同步 (写作中......)
来源: https://juejin.im/post/5ae56f926fb9a07aca79edf6