使用 service worker+sw-precache 实现网站加速

[metaquant]

service worker 是谷歌 chrome 团队近年提出的一个技术方案，本意为渐进式网络应用(progressive web app, PWA)提供离线支持，使得网络应用可以离线运行。一旦启用 service worker ，则它可以根据开发者的缓存配置为用户缓存网站静态与动态资源，并截获用户的所有网络请求，并根据缓存配置来决定是从缓存还是网络获取相应资源，从而可以提高网页的加载速度。测试结果表明，一般能实现 4-5 倍的加速，最好的时候能够实现 10 倍的加速。使用 service worker 实现网站加速的优势有：

• 可以很轻易地实现静态与动态资源缓存，决定缓存空间的大小与缓存时间期限，可定制性高；
• 不需要服务端支持，只需要在本地生成 service worker 文件并上传就可以使用，特别适用于没有服务端的静态博客或网站；
• 配合 sw-precache ，只需要做好缓存配置， sw-precache 可以自动生成 service woker 文件，不需要自己实现缓存逻辑；
• 可以灵活为动态与静态资源，以及不同网址提供不同的缓存机制，并实现资源的动态更新，同样不需要自己编写代码

劣势包括：

• 网站必须启用 HTTPS:这个不太算劣势，毕竟是大势所趋，但在目前可能会限制其适用范围；
• 不是所有浏览器都支持：目前 chrome, firefox,opera 以及国内的各种双核浏览器都支持，但是 safari 不支持
• 不能解决首次访问缓慢的问题，因为还没有缓存。

相关文章：

• 关于使用 service worker+sw-precache 实现网站加速的方案： https://metaquant.org/service%20worker-web%20performance-cache.html
• 关于 service worker 的工作原理： https://metaquant.org/pwayu-service-workergong-zuo-yuan-li-tan-xi.html
• 关于 sw-precache 的使用指南： https://metaquant.org/sw-precache.html
• 关于 service worker 的导论性介绍： https://developers.google.com/web/fundamentals/getting-started/primers/service-workers?hl=zh-cn

[momentum]

之前接触过 service worker ，但没想过可以用来网站加速，很新颖的思路

[piedpipper]

wordpress 可以用吗？

[metaquant]

@momentum 感谢支持

[metaquant]

@piedpipper 虽然没有试过，但应该可以，没有什么本质的区别

[kimwang]

不是有 Page Speed 了吗

[zeninger]

通过本地缓存加快网页加载？感觉和 ququblog 的思路类似，虽然那个是在后端实现的

[metaquant]

@zeninger 的确是类似的方案