Service Workers 是谷歌公司推出的加速黑科技，它可以在浏览器层面动态缓存一些请求，从而使网站的二次加载速度大幅提高，今天就给大家分享一下如果在自己的博客里部署 Service Workers。
需要注意的是，Service Workers 只有在 HTTPS 的前提下才能发挥作用。
添加 sw-toolbox 核心
下载 sw-toolbox.js 并且放置到主题目录下的 assets/js 目录
*如果你是默认主题，应该是在 path_to_ghost/content/themes/casper/assets/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
|
'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());
});
})();
|
启用 Service Workers
在主题下的 default.hbs 文件 标签前加入下面代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
|
然后强制刷新一下吧！再次加载后按 F12 查看一下，加载的内容大小会减小很多。
声明：1、本博客不从事任何主机及服务器租赁业务，不参与任何交易，也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动，信息均摘自网络或来自服务商主动提供；所以对本博客提及的内容不作直接、间接、法定、约定的保证，博客内容也不具备任何参考价值及引导作用，访问者需自行甄别。2、访问本博客请务必遵守有关互联网的相关法律、规定与规则；不能利用本博客所提及的内容从事任何违法、违规操作；否则造成的一切后果由访问者自行承担。3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。4、一旦您访问本博客，即表示您已经知晓并接受了以上声明通告。
