A-A+

使用谷歌黑科技Service Workers为网站加速

2019年03月17日建站教程已关闭评论阅读次

Vultr：月付$2.5起，注册送$100，按小时计费VPS，随时删除，随时更换IP

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

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

添加 sw-toolbox 核心

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

*如果你是默认主题，应该是在path_to_ghost/content/themes/casper/assets/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 = 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());
    }); 

})();

'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 = 50;

self.importScripts('assets/js/sw-toolbox.js');

self.toolbox.options.debug = false;

// 缓存本站静态文件

self.toolbox.router.get('/assets/(.*)', self.toolbox.cacheFirst, {

cache: {

maxEntries: maxEntries

}

});

// 缓存 googleapis

self.toolbox.router.get('/css', self.toolbox.fastest, {

origin: /fonts\.googleapis\.com/,

cache: {

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: {

maxEntries: maxEntries

}

});

self.toolbox.router.get('/content/(.*)', self.toolbox.fastest, {

cache: {

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: {

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 文件标签前加入下面代码

 <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>

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查看一下，加载的内容大小会减小很多。

国外VPS

vps测评_便宜vps_国外vps_vps优惠大全_柒柒测评

使用谷歌黑科技Service Workers为网站加速

添加 sw-toolbox 核心

创建缓存规则

启用 Service Workers