菜单
菜单
文章目录
  1. What PWA
  2. 准备工作
  3. 配置清单文件
  4. 配置Service Worker
  5. 测试PWA
  6. 安装PWA
  7. 结束语

Hexo博客适配并支持PWA

PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送。

在移动端可以利用标准化框架,让网页应用呈现和原生应用相似的体验。

What PWA

总的来说 PWA 不是特指某一项技术,而是应用了多项技术的 Web App

其核心技术包括 App ManifestService WorkerWeb Push等等。

Web APP与传统 Native APP的区别:

  • 可安装性,无论手机可直接安装到桌面用户,更强的用户黏性。
  • 可链接访问
  • 可索引性,搜索引擎可索引其内容。
  • 可离线访问,更好的浏览体验。

Hexo上是有插件可以直接支持PWA的,但是插件并不适配Hexo 5.2.0,只支持到Hexo 4.2.0之前的版本。

现通过非插件的方法让Hexo博客支持 PWA

准备工作

首先,需要全站开启 HTTPS,因为 PWA仅仅支持 HTTPS站点。

另,准备好各种分辨率的图标一套,48x48、96x96、144x144、192x192、512x512等分辨率的图标。

配置清单文件

配置站点清单文件 manifest.json or site.webmanifest

内容如下:

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
{
"lang": "zh-CN", //站点语言
"name": "睿先森", //站点名称
"short_name": "睿先森", //站点短名称
"description": "这是一个睿先森(Senorui)记录和分享生活中所学、所思和所悟的小破站。",
"theme_color": "#abd7ff", //应用主题颜色
"background_color": "#abd7ff", //应用开屏背景颜色
"start_url": "/", //应用开屏页面
"Scope": "/", //manifest.json的作用域
"display": "standalone", //应用显示模式
"orientation": "any", //应用的默认方向
"icons": [{ //应用图标
"src": "/icon/apple-icon-60x60.png",
"type": "image/png",
"sizes": "60x60"
},{
"src": "/icon/apple-icon-72x72.png",
"type": "image/png",
"sizes": "72x72"
},{
"src": "/icon/apple-icon-96x96.png",
"type": "image/png",
"sizes": "96x96"
},{
"src": "/icon/apple-icon-144x144.png",
"type": "image/png",
"sizes": "144x144"
},{
"src": "/icon/android-icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
},{
"src": "/icon/android-icon-512x512.png",
"type": "image/png",
"sizes": "512x512"
}]
}

将APP清单文件放在博客根目录下,并在</head>前引入。

1
<link rel="manifest" href="/site.webmanifest">

或者

1
<link rel="manifest" href="/manifest.json">

配置Service Worker

Service WorkerPWA拥有离线缓存的能力,这样即使在无网络的情况下也可以继续浏览文章,大大地增强了访客对站点的浏览体验。

那么就需要在根目录下新建文件sw.js

以下为一份很简单的 Service Worker文件,非科班的博主也不太懂怎么写。

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
const version = 'offline-cache-v1'

self.addEventListener('install', function (event) {
event.waitUntil(self.skipWaiting());
});

self.addEventListener('activate', function (event) {
event.waitUntil(
Promise.all([
self.clients.claim(),
caches.keys().then(function (cacheList) {
return Promise.all(
cacheList.map(function (cacheName) {
if (cacheName !== version) {
return caches.delete(cacheName);
}
})
);
})
])
);
});

self.addEventListener('fetch', function (event) {

console.log('url is', event.request.url)

event.respondWith(
caches.match(event.request).then(function (response) {
if (response) {
return response;
}

var request = event.request.clone();
return fetch(request).then(function (httpRes) {
if (!httpRes || httpRes.status !== 200) {
return httpRes;
}

var responseClone = httpRes.clone();
caches.open(version).then(function (cache) {
cache.put(event.request, responseClone);
});

return httpRes;
});
})
);
})

再在博客的</body>前引入 Service Worker注册代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/sw.js')
.then(function (registration) {
console.log('sw.js 注册成功', registration.scope);
})
.catch(function (err) {
console.log('sw.js 注册失败 ', err);
});
});
}
</script>

测试PWA

以上配置完成后,hexo cl && hexo g && hexo s后在浏览器 Ctrl+shift+I打开开发工具,在 Application即可查看site.webmanifest or manifest.json以及sw.js是否配置正确。

配置成功后在下方控制台可看到缓存资源的情况。

1

安装PWA

当适配成功后,在电脑端浏览器右上角搜索框内会出现一个符号,点击即可安装 PWA

2

而安卓手机端和平板端的浏览器会直接在底部弹窗提示。

3

结束语

PWA更多、更高级的功能,本站还未涉及,等我后续研究。

本文作者: Senorui

本文链接: https://senorui.top/posts/bce7.html

版权声明: 本站所有文章除特别声明外,均采用【CC BY-NC-ND 4.0】国际许可协议,若转载请注明出处!

支持一下
欢迎和Senorui进行PY交易😎!
  • 微信扫一扫
  • 支付宝扫一扫