首页 » 折腾记录 » 为WordPress启用Service Worker

为WordPress启用Service Worker

2018年7月1日 Otstar Lin 折腾记录

Service Worker是Google推出的一项技术。Service Worker是浏览器在后台独立于网页运行的脚本,它打开了通向不需要网页或用户交互的功能的大门。但是对于博客来说我们只需要用到Service Worker缓存功能,加速网站的二次访问。

blog-network

从上面的加载情况看,除去Bing的每日一图,其他文件共15k,其中gif和png图都未配置Service Worker,实际请求会更小

注:Service Workers只有在HTTPS的前提下才能发挥作用


加入sw-toolbox核心至WordPress

下载sw-toolbox.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('https://blog.ixk.me/sw-toolbox.js');
    self.toolbox.options.debug = false;
    //由于我的博客启用Autoptimize,以及WP Super Cache,所以添加Cache目录
    self.toolbox.router.get('wp-content/cache/(.*)', self.toolbox.cacheFirst, {
        cache: {
          name: staticAssetsCacheName,
          maxEntries: maxEntries
        }
    });
    //添加毒瘤jquery的缓存规则
    self.toolbox.router.get('wp-includes/js/jquery/jquery.js', self.toolbox.cacheFirst, {
        cache: {
          name: staticAssetsCacheName,
          maxEntries: maxEntries
        }
    });
    //添加主题的静态资源,具体目录请自行更换
    self.toolbox.router.get('/wp-content/themes/grace-minimal-theme/assets/(.*)', self.toolbox.cacheFirst, {
        cache: {
          name: staticAssetsCacheName,
          maxEntries: maxEntries
        }
    });
    //以下均为第三方资源缓存
    self.toolbox.router.get('/(.*)', self.toolbox.cacheFirst, {
        origin: /cdn\.bootcss\.com/,
        cache: {
          name: staticVendorCacheName,
          maxEntries: maxEntries
        }
    });

    self.toolbox.router.get('/(.*)', self.toolbox.cacheFirst, {
        origin: /static\.yecdn\.com/,
        cache: {
          name: staticVendorCacheName,
          maxEntries: maxEntries
        }
    });
    
    // 缓存 googleapis
    self.toolbox.router.get('/css', self.toolbox.fastest, {
        origin: /fonts\.googleapis\.com/,
            cache: {
              name: dynamicVendorCacheName,
              maxEntries: maxEntries
            }
    });
    
    self.toolbox.router.get('/css', self.toolbox.fastest, {
        origin: /fonts\.yecdn\.com/,
            cache: {
              name: dynamicVendorCacheName,
              maxEntries: maxEntries
            }
    });

    self.toolbox.router.get('/(.*)', self.toolbox.cacheFirst, {
        origin: /(fonts\.gstatic\.com|www\.google-analytics\.com)/,
        cache: {
          name: staticVendorCacheName,
          maxEntries: maxEntries
        }
    });
    
    self.toolbox.router.get('/(.*)', self.toolbox.cacheFirst, {
        origin: /(fonts-gstatic\.yecdn\.com|www\.google-analytics\.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());
    }); 

})();

启用Service Workers

打开主题文件所在目录,修改footer.php,在</body>前加入以下代码

%MINIFYHTMLf6f580ff8144ccb29ee6f9df0fe21ac50%

以上就是WordPress启用Service Worker的方法,由于WordPress是动态博客所以实现断网访问有些困难,博主我很菜,所以暂时无法实现断网访问(摊手

说点什么

在 "为WordPress启用Service Worker"已有1条评论
Loading...
Prev Post Next Post
已跳转到上次阅读的位置,从头阅读?