无论是在手机还是在电脑，都很喜欢将经常用的网站添加到桌面，苹果手机的是添加到主屏幕，将网站单独当应用使用。网页如果支持PWA，添加到主屏幕后，它就是一个应用。它的缓存机制，能提高访问速度，提供访问体验。如下图：
图 2
让网页支持PWA其实很简单，只需3步骤，前提是网页支持https访问。
1、创建manifest.json
内容如下：比如我的manifest.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
{
"theme_color": "#4c8953",
"background_color": "#ffffff",
"display": "fullscreen",
"scope": "/",
"start_url": "/",
"name": "拾点灵犀",
"short_name": "拾点灵犀",
"description": "刹那的火花，却也是永恒。",
"icons": [{
"src": "https://life97.top/icon.png",
"type": "image/png",
"sizes": "150x150"
}]
}
|
2、创建serviceWorker
内容如下：
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
| (()=> {
var cacheName = 'top';
var offlineUrl = '/offline.html';
var offlineImage = '/offline.jpg';
var errorImage = '/error.svg';
var baseUrl = 'https://life97.top';
console.log('load serviceworker.js');
self.addEventListener('install', event => {
console.log('Installing Service Worker');
event.waitUntil(caches.open(cacheName).then(cache => {
return cache.addAll([
new Request(offlineUrl, {cache: 'reload'}),
new Request(offlineImage, {cache: 'reload'}),
new Request(errorImage, {cache: 'reload'}),
]);
}));
});
self.addEventListener('activate', event => {
console.log('Activating Service Worker');
event.waitUntil(async function() {
if ('navigationPreload' in self.registration) {
await self.registration.navigationPreload.enable();
}
}());
self.clients.claim();
});
self.skipWaiting();
self.addEventListener('fetch', event => {
if (event.request.url.startsWith(baseUrl) || event.request.url.match(/^https:\/\/cdn\.jsdelivr\.net/)) {
event.respondWith(async function() {
let cache = await caches.open(cacheName);
try {
// Enable navigation preload if it's supported.
if ('navigationPreload' in self.registration) {
await self.registration.navigationPreload.enable();
const preloadResponse = await event.preloadResponse;
if (preloadResponse) {
return preloadResponse;
}
}
let response = await fetch(event.request);
if (response.status === 200) {
await cache.put(event.request, response.clone());
}
return response;
} catch (error) {
let cachedResponse = await cache.match(event.request);
return cachedResponse || await cache.match(offlineUrl);
}
}());
}
});
})();
|
这是hugo-theme-luna所写的serviceWorker.js内容，它的更个性化，定义了离线的页面，图片，以及出错的图片。
3、引入
编写 html文件，这是最后一步，就是将它插入到头部引入前面的两个文件。hugo的主题的话，是在head模板的
标签前或者后。 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <head>
// 引入manifest.json
<link rel="manifest" href="/manifest.json" />
<script>
// serviceWorker
// 检查serviceWorker属性是否可用
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker
.register("./serviceWorker.js")
.then(res => console.log("service worker registered"))
.catch(err => console.log("service worker not registered", err));
})
}
</script>
</head>
|
manifest.json，serviceWorker.js还有离线页面还有图片，这些文件的图径一定要正确，否则无法生效。serviceworker并不会对网页产生堵塞，降低访问速度。
解决问题
最后上传部署，果然还是出了问题，也可能是个人特殊遇到了，但也发现好几个都会有这问题，hugo-theme-luna这个也有这个情况，就是中文网站，肯定会有中文名字的分类和标签，所产生的含有中文的URL，就会导致访问404，无法访问。
这是github的问题，需要在URL后面加上“/”才能访问。
后来几经波折，才找到解决方法，目前在cloudflare pages部署，是没有问题了。
1、先去在config.toml里添加uglyURLs = true，这样URL就会产生.html的后缀,当然还可以重定向将它去掉或者替换掉，然后查找categorys和tags模板的相关链接有没有使用urlize函数，比如：{{ “/tags/” | relLangURL }}{{ $name | urlize }}，要把这个函数去掉。
2、如果中文URL有重定向的，一律要去掉，比如，如果加了.html重定向到去html的，必须去掉重定向，要不然也会导致这个URL无法访问。
不知是不是个例，只有一个人遇到。
装好后，在PC端，打开网页在地址栏的最右端，就有PWA应用安装提示。安装好后，chrome://apps/就能看到快捷方式了（如上图一）
edge浏览器在菜单里直接有应用菜单，所以安装的网页应用都在一起。
移动端，苹果手机将它添加到主屏幕，打开后，不再是一个网址标签在浏览器打开，而是像一个独立应用在使用。安卓的也是。
图 1
