引言
大年初二,做完该做的事情,刷了刷微信公众号看到一篇来自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