成功启用Service Workers浏览器缓存加速啦

碎碎念

国庆假期的第一天，肯定不出门，因为广州假期前几天肯定会很多人，今天刷微博还有朋友圈，果然不出所料，广州地铁3号线简直就是人挤人，搭地铁人多，自己开车的话也堵车，前天晚上我凌晨2-3点还没睡，突然门口有人拿钥匙来开门，结果是我父亲从深圳过来了，我说咋这么晚回来，我爸说塞车

可想而知，国庆假期出行又多可怕，坐地铁人挤人，开车基本上也到处塞，当然这个国庆假期，计划着去露营，应该过2-3天再出行了，目前还没确定，地点也还没选好，如果实在不知道去哪里，备选方案就是去之前去过的白云湖，我起码好几年没去过白云湖了，听说现在建造得很美。

白云湖 白云湖

hhhh，我是秘书

父亲从深圳带了几只大闸蟹过来，今天下午就把它们煮了吃！在阳台洗大闸蟹的时候，喆喆也过来凑热闹了，因为这些大闸蟹没有绑起来，所以一开始我就拿剪刀把它们的钳子都剪掉了，哈哈哈哈，避免被夹到。

大闸蟹 大闸蟹

折腾站点

下午闲着没事干，和表弟打打CSGO，然后还折腾了一下博客网站，已经成功给站点添加上了Service Workers浏览器缓存加速，来复盘一下折腾流程：

什么是Service Workers？查阅了相关资料后，其实大多数内容讲得太过复杂，毕竟我们只是简单了解一下它，而不是深入的去学习这项浏览器缓存加速技术，我在知乎的一篇文章差不多明白了：https://zhuanlan.zhihu.com/p/115243059，有兴趣的小伙伴可以看一看。

当然，我们其实也不用纠结什么是Service Workers，仅仅知道它可以优化网站的速度就可以啦。

【一】下载sw-toolbox.js文件

将一个JS文件下载到Typecho的主题目录下，如：

usr/theme/你的主题/sw-toolbox.js

下载地址：https://cdn.jsdelivr.net/gh/GoogleChromeLabs/sw-toolbox/sw-toolbox.js

【二】创建缓存规则

在网站的根目录下创建一个JS文件serviceworker.js，把以下代码复制到serviceworker.js文件里。

'use strict';

(function () {
    'use strict';
    /**
    * Service Worker Toolbox caching
    */

    var cacheVersion = '-toolbox-v1';
    var dynamicVendorCacheName = 'dynamic-vendor' + cacheVersion;
    var staticVendorCacheName = 'static-vendor' + cacheVersion;
    var staticAssetsCacheName = 'static-assets' + cacheVersion;
    var contentCacheName = 'content' + cacheVersion;
    var maxEntries = 200;


    self.importScripts('usr/theme/你的主题/sw-toolbox.js');

    self.toolbox.options.debug = false;

    // 缓存站点静态文件（Typecho核心缓存规则）
    self.toolbox.router.get('/usr/(.*)', self.toolbox.cacheFirst, {
        cache: {
            name: staticAssetsCacheName,
            maxEntries: maxEntries
        }
    });

    // 缓存 Gravatar 头像（看情况）
    self.toolbox.router.get('/avatar/(.*)', self.toolbox.cacheFirst, {
        origin: /(secure\.gravatar\.com)/,
        cache: {
            name: staticVendorCacheName,
            maxEntries: maxEntries
        }
    });

    // 缓存 Google 字体（看情况，如果站点没有Google字体可不要这个缓存规则）
    self.toolbox.router.get('/(.*)', self.toolbox.cacheFirst, {
        origin: /(fonts\.googleapis\.com)/,
        cache: {
            name: staticVendorCacheName,
            maxEntries: maxEntries
        }
    });
    self.toolbox.router.get('/(.*)', self.toolbox.cacheFirst, {
        origin: /(fonts\.gstatic\.com)/,
        cache: {
            name: staticVendorCacheName,
            maxEntries: maxEntries
        }
    });

    // immediately activate this serviceworker
    self.addEventListener('install', function (event) {
        return event.waitUntil(self.skipWaiting());
    });

    self.addEventListener('activate', function (event) {
        return event.waitUntil(self.clients.claim());
    });

})();

【三】主题footer.php文件添加代码

在主题里的footer.php文件里添加以下代码，主要需要在</body>标签之前。

<script>
    var serviceWorkerUri = '/serviceworker.js';
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register(serviceWorkerUri).then(function() {
            if (navigator.serviceWorker.controller) {
                console.log('Service woker is registered and is controlling.');
            } else {
                console.log('Please reload this page to allow the service worker to handle network operations.');
            }
        }).catch(function(error) {
            console.log('ERROR: ' + error);
        });
    } else {
        console.log('Service workers are not supported in the current browser.');
    }
</script>

【四】编辑Nginx配置文件

这里的操作需要到服务器端了，找到该站点的Nginx配置文件，然后添加以下代码：

# serviceworker.js 不设置缓存
location ~* /(.*)/serviceworker\.js {
    add_header Cache-Control no-cache;
    add_header Pragma no-cache;
    add_header Expires 0;
}

添加完成后，重启一下Nginx服务即可，这个时候网站已经成功启用Service Workers浏览器缓存加速了

写在最后

在最近的新评论里@溯源 网站好快问我是不是套了CDN，其实并没有套CDN，说实话我对于自己这个博客站点，也不知道到底快还是慢，因为有些小伙伴说慢，有些说快。

当然，我自己平时肯定是有在网站优化方面下功夫的，毕竟能快则快嘛，目前站点用的是狗云DogYun的香港-CLD云服务器，因为想着安心建站，这台服务器还有400多天到期，就把站点搭在这服务器上了，虽然配置有点低，只有512MB，8GB硬盘，但是目前挂这个博客还是带得起的。

从理论测试结果来看，感觉自己的博客网站还是很快的，基本上都能达到全绿的状态，当然实际访问情况肯定会受网络波动等因素影响。

网站Ping 网站测速

优化完成 优化完成

经过折腾，确实有效果，通过F12浏览器工具可以看到Service Workers缓存加速 ，有空专门写一写关于网站具体优化的思路和流程，给一些对这方面不太了解或熟悉的小伙伴提供一些参考。

Service Workers教程原文：https://www.moewah.com/archives/4489.html