2
为WordPress启用Service Worker
source link: https://blog.ixk.me/post/wordpress-enabled-service-worker
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
为WordPress启用Service Worker
2018-07-01 • Otstar Lin •
本文最后更新于 268 天前，文中所描述的信息可能已发生改变
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"use strict";
2
3(function () {
4 "use strict";
5 /**
6 * Service Worker Toolbox caching
7 */
8
9 var cacheVersion = "-toolbox-v1";
10 var dynamicVendorCacheName = "dynamic-vendor" + cacheVersion;
11 var staticVendorCacheName = "static-vendor" + cacheVersion;
12 var staticAssetsCacheName = "static-assets" + cacheVersion;
13 var contentCacheName = "content" + cacheVersion;
14 var maxEntries = 50;
15 //以下的网址请更换为博客地址(可以填写绝对链接或者相对链接)
16 self.importScripts("https://blog.ixk.me/sw-toolbox.js");
17 self.toolbox.options.debug = false;
18 //由于我的博客启用Autoptimize，以及WP Super Cache，所以添加Cache目录
19 self.toolbox.router.get("wp-content/cache/(.*)", self.toolbox.cacheFirst, {
20 cache: {
21 name: staticAssetsCacheName,
22 maxEntries: maxEntries
23 }
24 });
25 //添加毒瘤jquery的缓存规则
26 self.toolbox.router.get(
27 "wp-includes/js/jquery/jquery.js",
28 self.toolbox.cacheFirst,
29 {
30 cache: {
31 name: staticAssetsCacheName,
32 maxEntries: maxEntries
33 }
34 }
35 );
36 //添加主题的静态资源，具体目录请自行更换
37 self.toolbox.router.get(
38 "/wp-content/themes/grace-minimal-theme/assets/(.*)",
39 self.toolbox.cacheFirst,
40 {
41 cache: {
42 name: staticAssetsCacheName,
43 maxEntries: maxEntries
44 }
45 }
46 );
47 //以下均为第三方资源缓存
48 self.toolbox.router.get("/(.*)", self.toolbox.cacheFirst, {
49 origin: /cdn\.bootcss\.com/,
50 cache: {
51 name: staticVendorCacheName,
52 maxEntries: maxEntries
53 }
54 });
55
56 self.toolbox.router.get("/(.*)", self.toolbox.cacheFirst, {
57 origin: /static\.yecdn\.com/,
58 cache: {
59 name: staticVendorCacheName,
60 maxEntries: maxEntries
61 }
62 });
63
64 // 缓存 googleapis
65 self.toolbox.router.get("/css", self.toolbox.fastest, {
66 origin: /fonts\.googleapis\.com/,
67 cache: {
68 name: dynamicVendorCacheName,
69 maxEntries: maxEntries
70 }
71 });
72
73 self.toolbox.router.get("/css", self.toolbox.fastest, {
74 origin: /fonts\.yecdn\.com/,
75 cache: {
76 name: dynamicVendorCacheName,
77 maxEntries: maxEntries
78 }
79 });
80
81 self.toolbox.router.get("/(.*)", self.toolbox.cacheFirst, {
82 origin: /(fonts\.gstatic\.com|www\.google-analytics\.com)/,
83 cache: {
84 name: staticVendorCacheName,
85 maxEntries: maxEntries
86 }
87 });
88
89 self.toolbox.router.get("/(.*)", self.toolbox.cacheFirst, {
90 origin: /(fonts-gstatic\.yecdn\.com|www\.google-analytics\.com)/,
91 cache: {
92 name: staticVendorCacheName,
93 maxEntries: maxEntries
94 }
95 });
96
97 // immediately activate this serviceworker
98 self.addEventListener("install", function (event) {
99 return event.waitUntil(self.skipWaiting());
100 });
101
102 self.addEventListener("activate", function (event) {
103 return event.waitUntil(self.clients.claim());
104 });
105})();启用 Service Workers
打开主题文件所在目录，修改 footer.php，在 </body> 前加入以下代码
1<script>
2 var serviceWorkerUri = "/serviceworker.js";
3
4 if ("serviceWorker" in navigator) {
5 navigator.serviceWorker
6 .register(serviceWorkerUri)
7 .then(function () {
8 if (navigator.serviceWorker.controller) {
9 console.log("Assets cached by the controlling service worker.");
10 } else {
11 console.log(
12 "Please reload this page to allow the service worker to handle network operations."
13 );
14 }
15 })
16 .catch(function (error) {
17 console.log("ERROR: " + error);
18 });
19 } else {
20 console.log("Service workers are not supported in the current browser.");
21 }
22</script>以上就是 WordPress 启用 Service Worker 的方法，由于 WordPress 是动态博客所以实现断网访问有些困难，博主我很菜，所以暂时无法实现断网访问（摊手
为WordPress启用Service Worker
Otstar Lin
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK