浏览器的兼容性
考虑到service worker是⼀个新的接⼝本⾝，肯定会存在兼容性问题。PWA的意思在于Progressive，也就是⽀持pwa的页⾯则使⽤SW的缓存机制，⽽不⽀持的页⾯使⽤原来的HTTP缓存机制。由于pwa是⾕歌的“亲⼉⼦”，所以它在新版本安卓的各⼤浏览器都有⾮常好的⽀持。详情我lavas的兼容性报告
js中文正则表达式重点的重点当然是浏览器对pwa的⽀持情况，我们可以看到除了推送信息和⽀付接⼝之外基本已经实现⽀持（⽀付接⼝的⽀持应该是出于安全的考虑，以及和weixin-js-sdk重叠的原因，X5浏览器⽀持它只是时间的问题）。如今我们更关⼼的是关于SW-cache这⼀部分，换句话说，我们可以放⼼在安卓上使⽤SW-cache的技术。
安卓浏览器的⽀持情况
io s（苹果）的⽀持
苹果safari已开始⽀持service worker
Sw-precache和Workbox
sw-precache是什么？
workbox⼜是什么？
web前端的各位同学可能或多或少听过pwa，听过service worker（后⾯简称为SW），也知道对应的
⽣命周期。知道了这些api后，你还是不知道如何将pwa技术投⼊⽣产。它不仅仅是个玩具，它是⼀个“神器”，是⽤来拉近native和web app之间的差距。当我们做spa项⽬越做越⼤的时候，JS bundle会越来越⼤，单页⾯不能承载那么多的逻辑，我们可能会选择多个单页⾯（也就是多页⾯）。每次加载都会存在空⽩加载的情景，虽然性能优化上，我们能把这个时间减少到很少很少，但是没法完全把它“⼲掉”。pwa的service-worker技术很好地弥补这⽚“空⽩”。
“app-shell”也就是web app中的应⽤壳将会缓存在浏览器端，让它的加载速度更加快速。⽽可变的内容则是异步加载。
对⽐
我们知道vue-cli打造出来的pwa模版，使⽤的是sw-precache，⽽workbox是它的取代品。它们各⾃有⼀个webpack版的插件，分别是sw-precache-webpack-plugin和workbox-webpack-plugin。
它们之间的区别如下，可以说⾮常相似：
中⽂说明workbox中⽂说明sw-precache
缓存的⽬录globDirectory缓存前缀stripPrefix
缓存的静态⽂件类型globPatterns缓存的静态⽂件类型staticFileGlobs
sw⽂件路径swDest sw⽂件名filename
让sw⽴即接管⽹页clientsClaim（相同）clientsClaim
激活的等待skipWaiting（相同）skipWaiting
动态请求runtimeCaching（相同）runtimeCaching
sw-precache的主要开发者 jeffposnick 也是workbox的主要开发者，这说明了它们之间的关系，sw-precache是为了满⾜service worker的cache API中的静态资源⽂件的注册作⽤。⽽workbox是为了满⾜所有pwa的资源内容，可以看作⼀个“平台”。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。