如何把网站改成PWA( 四 ) _PWA

上面这些代码demo在 https://github.com/craigbuckler/pwa-retrofit
上面只简单讲了 Service Worker 如何工作。我们会发现有很多问题需要我们进一步解决：

预缓存的静态资源修改后在下一次发版本时的文件名都不一样，手动写死太低效，最好每次都自动生成资源文件名。
缓存资源是以硬编码字符串判断是否有效，这样每次发版本都需要手动修改，才能更新缓存。并且每次都是全量更新。能否以文件的粒度进行资源缓存呢？
请求代理没有区分静态资源和动态接口。已经缓存的动态接口也会一直返回缓存，无法请求新数据。

上面只列出了三个明显的问题，还有很多问题是没有考虑到的。如果让我们自己来解决这些问题，不仅是工作量很大，而且也很难写出生产环境可用的 Service Worker 。
3. workbox既然如此，我们最好是站在巨人的肩膀上，这个巨人就是谷歌。workbox 是由谷歌浏览器团队发布，用来协助创建 PWA 应用的 JavaScript 库。当然直接用 workbox 还是太复杂了，谷歌还很贴心的发布了一个 webpack 插件，能够自动生成 Service Worker 和静态资源列表 - workbox-webpack-plugin 。
只需简单一步就能生成生产环境可用的 Service Worker ：
const { GenerateSW } = require('workbox-webpack-plugin')new GenerateSW()