【性价之王】	【线路之王】	【价格之王】	【配置之王】
【免费之王】	【香港首推】	【梯子之王】	【独服之王】

Service Workers是谷歌公司推出的加速黑科技，它可以在浏览器层面动态缓存一些请求，从而使网站的二次加载速度大幅提高，今天就给大家分享一下如果在自己的博客里部署Service Workers。

需要注意的是，Service Workers 只有在 HTTPS 的前提下才能发挥作用。

添加 sw–toolbox 核心

下载 sw-toolbox.js 并且放置到主题目录下的  assets/js 目录

*如果你是默认主题，应该是在 path_to_ghost/content/themes/casper/assets/js

创建缓存规则

在主题根目录下创建 serviceworker.js，并且写入下面内容

 

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384

‘use strict’;(function () {  ‘use strict’;        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 = 50;    self.importScripts(‘assets/js/sw-toolbox.js’);    self.toolbox.options.debug = false;    // 缓存本站静态文件    self.toolbox.router.get(‘/assets/(.*)’, self.toolbox.cacheFirst, {        cache: {          name: staticAssetsCacheName,          maxEntries: maxEntries        }    });    // 缓存 googleapis    self.toolbox.router.get(‘/css’, self.toolbox.fastest, {        origin: /fonts.googleapis.com/,            cache: {              name: dynamicVendorCacheName,              maxEntries: maxEntries            }    });    // 不缓存 DISQUS 评论    self.toolbox.router.get(‘/(.*)’, self.toolbox.networkOnly, {        origin: /disqus.com/    });    self.toolbox.router.get(‘/(.*)’, self.toolbox.networkOnly, {        origin: /disquscdn.com/    });    // 缓存所有 Google 字体    self.toolbox.router.get(‘/(.*)’, self.toolbox.cacheFirst, {        origin: /(fonts.gstatic.com|www.google-analytics.com)/,        cache: {          name: staticVendorCacheName,          maxEntries: maxEntries        }    });    self.toolbox.router.get(‘/content/(.*)’, self.toolbox.fastest, {        cache: {          name: contentCacheName,          maxEntries: maxEntries        }    });    self.toolbox.router.get(‘/*’, function (request, values, options) {        if (!request.url.match(/(/ghost/|/page/)/) && request.headers.get(‘accept’).includes(‘text/html’)) {            return self.toolbox.fastest(request, values, options);        } else {            return self.toolbox.networkOnly(request, values, options);        }        }, {        cache: {            name: contentCacheName,            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());    });})();

启用 Service Workers

在主题下的  default.hbs 文件  </body> 标签前加入下面代码

 

 

1234567891011121314151617

<script>    var serviceWorkerUri = ‘/serviceworker.js’;    if (‘serviceWorker’ in navigator) {        navigator.serviceWorker.register(serviceWorkerUri).then(function() {          if (navigator.serviceWorker.controller) {            console.log(‘Assets cached by the controlling service worker.’);          } 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>

然后强制刷新一下吧！再次加载后按F12查看一下，加载的内容大小会减小很多。