使用Service worker实现加速/离线访问静态blog网站
in Hexo with 0 comment
Read: 701

使用Service worker实现加速/离线访问静态blog网站

in Hexo with 0 comment

引言

大年初二,做完该做的事情,刷了刷微信公众号看到一篇来自google公众号的文章使用Service worker实现加速/离线访问静态blog网站,实现了,效果非常非常不错,本篇文章仅仅作为学习此文章的学习笔记

文章原地址使用Service worker实现加速/离线访问静态blog网站

解释

文章题目借自原文,文章题目通俗易懂的说就是加速静态blog网站的访问速度

现在我们的静态网站很多一部分使用的是Hexo/Node.js搭建的,然后部署在github或者coding中,如果部署在coding中,由于属于国内的服务器,访问速度还是不错的,但是如果你部署的是github,那么你的网站的访问速度将会变慢,因为服务器毕竟国外的嘛

小编试过很多种方案:

但是效果都不是很明显,原因是他们基本都是在数据传输上进行提速,但是根本作为一个静态blog,更新的频率并不是很高,所以在体验上解决用户浏览的问题并不是特别明显,而我们在客户端上进行解决此问题,那么说将是一个比较不错的方案

我们知道:数据缓存,可以提高我们的再第二次浏览时候的访问速度,客户端由于需要增加用户多次浏览的体验基本会增加缓存操作,而在浏览器中也是如此

通过查看相关文章,我们发现navigator对象是存在所有浏览器中的

navigator

那么我们的着手对象则是navigator

正文

加速/离线访问

小编使用的是hexo/Node.js部署在github的博客

在hexo中我们操作的是public下的文件,因为我们在使用hexo d部署文章的时候部署的是public下的文章

<script>
if ('serviceWorker' in navigator) {
 navigator.serviceWorker.register('/sw.js');
}
</script>

内容地址: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引入了哪些第三方资源,逐个添加到忽略列表中

nocache

加速效果

result

通过上面结果图,我们可以看到效果非常明显

测试网站:webpagetest

注:在Repeat View 勾选 First View and Repeat View属性

pagetest

加速/离线原理探索

image

加速的原理:我们在第一次访问的事情请求数据,然后进行缓存,下次使用的时候,优先使用缓存数据,当数据更新的时候,通过检查version进行更新缓存

注意:

Google Chrome,Firefox,Opera以及国内的各种双核浏览器都支持,但是 safari 不支持,那么在不支持的浏览器里Service worker不工作。

网站必须启用https来保证使用Service worker页面的安全性,开发时localhost默认认为是安全的。

跟DOM所处的环境是相互隔离的。

关于更详细的解析,请移步原文:

点我跳转到原文

因为原文讲的非常详细,在这里就不在多说了...

更多

Responses