引言
大年初二，做完该做的事情，刷了刷微信公众号看到一篇来自google公众号的文章使用Service worker实现加速/离线访问静态blog网站，实现了，效果非常非常不错，本篇文章仅仅作为学习此文章的学习笔记
解释
文章题目借自原文，文章题目通俗易懂的说就是加速静态blog网站的访问速度
现在我们的静态网站很多一部分使用的是Hexo/Node.js搭建的，然后部署在github或者coding中，如果部署在coding中，由于属于国内的服务器，访问速度还是不错的，但是如果你部署的是github，那么你的网站的访问速度将会变慢，因为服务器毕竟国外的嘛
小编试过很多种方案：
- 百度云加速
- CDN
但是效果都不是很明显，原因是他们基本都是在数据传输上进行提速，但是根本作为一个静态blog，更新的频率并不是很高，所以在体验上解决用户浏览的问题并不是特别明显，而我们在客户端上进行解决此问题，那么说将是一个比较不错的方案
我们知道：数据缓存，可以提高我们的再第二次浏览时候的访问速度，客户端由于需要增加用户多次浏览的体验基本会增加缓存操作，而在浏览器中也是如此
通过查看相关文章，我们发现navigator对象是存在所有浏览器中的
那么我们的着手对象则是navigator
正文
加速/离线访问
小编使用的是hexo/Node.js部署在github的博客
- 首页添加注册代码
在hexo中我们操作的是public下的文件，因为我们在使用hexo d部署文章的时候部署的是public下的文章
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}
</script>- 创建sw.js保存至网站的根目录，意：public下创建一个sw.js并且把内容复制到这个文件
内容地址：https://monsterlin.com/sw.js
- 修改不缓存域名列表及离线状态页面
const ignoreFetch = [
/https?:\/\/cdn1.lncld.net\//,
/https?:\/\/static.duoshuo.com\//,
/https?:\/\/fonts.googleapis.com\//,
/https?:\/\/fonts.gstatic.com\//,
/https?:\/\/hm.baidu.com\//,
];打开Chrome Dev Tools -> Source ，看看自己的blog引入了哪些第三方资源，逐个添加到忽略列表中
- 在根目录下添加offline.html，在没有网络且缓存中也没有时使用，这个页面可以为你无网络时候显示的信息
- 在根目录下添加offline.svg，在无网络时图片资源请求返回该文件。
加速效果
通过上面结果图，我们可以看到效果非常明显
测试网站：webpagetest
注：在Repeat View 勾选 First View and Repeat View属性
加速/离线原理探索
加速的原理：我们在第一次访问的事情请求数据，然后进行缓存，下次使用的时候，优先使用缓存数据，当数据更新的时候,通过检查version进行更新缓存
注意：
- 浏览器：
Google Chrome，Firefox，Opera以及国内的各种双核浏览器都支持，但是 safari 不支持，那么在不支持的浏览器里Service worker不工作。
- https:
网站必须启用https来保证使用Service worker页面的安全性，开发时localhost默认认为是安全的。
- 不能操作DOM
跟DOM所处的环境是相互隔离的。
关于更详细的解析，请移步原文：
因为原文讲的非常详细，在这里就不在多说了...
更多
- Service workers的更新需要手动编辑version，每次发布新文章时需要编辑。
- 使用AMP让页面渲染速度达到最高。
本文由 monsterlin 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Mar 26, 2017 at 09:04 pm