使用谷歌加速黑科技Service Workers為網(wǎng)站加速的方

Service Workers是谷歌公司推出的加速黑科技，它可以在瀏覽器層面動(dòng)態(tài)緩存一些請求，從而使網(wǎng)站的二次加載速度大幅提高，今天就給大家分享一下如何在自己的博客里部署Service Workers。

需要注意的是，Service Workers 只有在 HTTPS 的前提下才能發(fā)揮作用。

方法步驟

1、添加 sw-toolbox 核心

下載  并且放置到主題目錄下的 assets/js 目錄

*如果你是默認主題，應該是在path_to_ghost/content/themes/casper/assets/js

2、創(chuàng )建緩存規則

在主題根目錄下創(chuàng )建 serviceworker.js，并且寫(xiě)入下面內容

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

    // 緩存本站靜態(tài)文件
    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());
    }); 

})();

3、啟用 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>

然后強制刷新一下吧！再次加載后按F12查看一下，加載的內容大小會(huì )減小很多。

來(lái)源鏈接：https://www.zyhot.com/article/8380.html

本站聲明:網(wǎng)站內容來(lái)源于網(wǎng)絡(luò ),如有侵權,請聯(lián)系我們,我們將及時(shí)處理。