PWA实践经验小结

[p2227]

0x00 背景

由于最近的业务都是面向海外用户的，所以我果断申请在主站中加入PWA功能，由此得到了一次PWA的实践机会。
网上关于PWA的文章很多，但大多数是停留在理论层级。印象最深刻的是饿了么的知乎专栏，因为是真正实践的总结。
PWA中最重要的一个点是service worker，以下简称sw。

0x02 参考文章

• 搭建一个PC版本的 ng-redux 项目 1 （引入开源库） #11
• 前端大多数的基础归根到底要看标准，https://w3c.github.io/ServiceWorker/
• 当然，PWA首先是google提出来的，所以有不少文章可以在google 找到 1 2

0x03 开发域名

• 开发的过程中，要么用http localhost ，要么用https 带域名，其他方式不允许

0x04 生命周期

sw的生命周期不同页面，页面刷新不等于sw.js重来，需要自己手动停止或者卸载。
这个是前端以前会有的思维，觉得页面数据乱了或者不正常，就刷新一下，但一直启用了sw，你的这个思维会被打乱。你必须要按红色框里面的stop才是把servie worker停掉。

0x05 更新sw

当你的PWA已经上线，然后再推一版新的功能时，旧版本的sw会保持着运行，只有当你手动点击skipWaiting或者把运行这个sw的所有tab页关掉，新的sw才会运行。点击focus会找到所有有关的tab页。调试的时候可以主动调用skipWaiting()

0x06 调试与断点

sw的进程不同于页面，要在控制台里面选中sw的那个进程，才能进入断点。你要不习惯性地在main进程，要进入 sw.js 进程，才能打断点以及进入断点。

0x07 全局api

没有dom，全局是self。全局不再是那个熟悉的window，也不能直接操作dom。那么全局都有些啥呢？有几个比较重要的

• addEventListener 增加事件监听
• fetch 在sw中一般网络请求的方法。以上两者是sw拦截更改网络请求的基础API
• registration sw的实例
• caches 缓存保存的地方
• clients 与主tabs通信的地方
• importScripts 引入已有script的方法

0x08 入口js文件

在我的项目中，是以/sw.js作为pwa的入口js文件，这个文件应该配置一个协商缓存的http cache策略，让pwa能自我检测更新。

后续再写文章细说fetch，先总结到这里！