为WordPress启用Service Worker
Service Worker是Google推出的一项技术。Service Worker是浏览器在后台独立于网页运行的脚本，它打开了通向不需要网页或用户交互的功能的大门。但是对于博客来说我们只需要用到Service Worker缓存功能，加速网站的二次访问。
从上面的加载情况看，除去Bing的每日一图，其他文件共15k，其中gif和png图都未配置Service Worker，实际请求会更小
注：Service Workers只有在HTTPS的前提下才能发挥作用
加入sw-toolbox核心至WordPress
下载sw-toolbox.js并且放到根目录
创建缓存规则
在根目录下创建serviceworker.js，并且写入下面内容（以下均为参考，具体配置请根据情况进行配置）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | '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>前加入以下代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <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> |
以上就是WordPress启用Service Worker的方法，由于WordPress是动态博客所以实现断网访问有些困难，博主我很菜，所以暂时无法实现断网访问（摊手
声明:本文采用 BY-NC-SA 协议进行授权，如无注明均为原创，转载请注明转自青空之蓝
本文地址:为WordPress启用Service Worker
本文地址:为WordPress启用Service Worker
说点什么
1 评论 在 "为WordPress启用Service Worker"
开发者工具->network->offline