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

作者：Google 开发技术专家 (GDE) 杨波 (Alpha)

现在很流行基于 GitHub page 和 markdown 的静态 blog，非常适合技术的思维和习惯，针对不同的语言都有一些优秀的静态 blog 系统出现，如 Jekyll/Ruby，Pelican/Python，Hexo/NodeJs，由于静态内容的特性非常适合做缓存来加速页面的访问，就利用 Service worker 来实现加速，结果是除了 PageSpeed，CDN 这些常见的服务器和网络加速之外，通过客户端实现了更好的访问体验。

加速/离线访问只需三步

1. 首页添加注册代码

   

2. 复制代码

将 https://alphayang.github.io/sw.js 保存到你的网站根目录下。

3. 修改不缓存域名列表及离线状态页面

在你的 sw.js 中修改

打开 Chrome Dev Tools->Source，看看自己的 blog 都引用了哪些第三方资源，逐个加到忽略列表里。

在根目录下添加 offline.html，在没有网络且缓存中也没有时使用，效果如下：

在根目录下添加 offline.svg，在无网络时图片资源请求返回该文件。

4. 加速效果

首页加速后，网络请求从 16 降为 1，加载时间从 2.296s 降为 0.654s，得到了瞬间加载的结果。