HEXO 支持 PWA

今天发生的大事:

  1. 计协讲座依旧这么水,那么尬。真实难受。
  2. 配置了一通 hexo,支持了 PWA,更加舒服了。

HEXO 支持 PWA 桌面应用

安装 npm 模块

1
npm install hexo-offline 或者 yarn add hexo-offline

配置 _config.yml

在 _config.yml 中加入 PWA 的配置,以使开启站点编译支持。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Offline
## Config passed to sw-precache
## https://github.com/JLHwung/hexo-offline
offline:
maximumFileSizeToCacheInBytes: 10485760
staticFileGlobs:
- public/**/*.{js,html,css,png,jpg,jpeg,gif,svg,json,xml}
stripPrefix: public
verbose: true
runtimeCaching:
# CDNs - should be cacheFirst, since they should be used specific versions so should not change
- urlPattern: /*
handler: cacheFirst
options:
origin: cdnjs.cloudflare.com

配置 melody.yml

在主题配置文件中开启 pwa 支持,使得主题在编译的时候启用 pwa 选项。

1
2
3
pwa:
enable: true
manifest: /manifest.json

生成 PWA 的配置文件 manifest.json

App Manifest Generator 配置好自己网页要生成 PWA 的应用的格式,例如主题背景颜色图标等等。

本站点的 manifest 配置:

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
{
"name": "Case of Xeon",
"short_name": "SmallXeon",
"theme_color": "#2196f3",
"background_color": "#b1ddff",
"display": "fullscreen",
"scope": "/",
"start_url": "/index.html",
"icons": [
{
"src": "img/icon/idpi.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "img/icon/mdpi.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "img/icon/xhdpi.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "img/icon/xxhdpi.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "img/icon/xxxhdpi.png",
"sizes": "192x192",
"type": "image/png"
}
]
}

可以很清楚的看到,站点名称,站点短名等等,都是可以设置的。

而有一点比较有意思,就是 display 模式的选择:

显示类型 描述 降级显示类型
fullscreen 应用的显示界面将占满整个屏幕 standalone
standalone 浏览器相关UI(如导航栏、工具栏等)将会被隐藏 minimal-ui
minimal-ui 显示形式与standalone类似,浏览器相关UI会最小化为一个按钮,不同浏览器在实现上略有不同 browser
browser 浏览器模式,与普通网页在浏览器中打开的显示一致 (None)

要根据自己的需求来选择 display 的现实模式,我想就让博客像一个应用一样打开像一个全屏化的 APP,所以就选了fullscreen

最后将配置好的 manifest.json 拷贝下来放到 hexo 的 source 目录下,就大功告成了!

配置图标

在看到 manifest.json 的内容之后,估计也能看出来图标是怎么配置的了。

就贴几个好用的在线工具,可以直接生成不同大小的图标。

1:1图片生成不同尺寸的 app 图标,格式为 png。需要使用特殊的上网方式才能顺利上去。resizeappicon.com - Web-based icon resizer for iOS and Android

典型的 SVG 图标网页,直接可以下载或者拷贝 svg 信息。simpleicons

svg在线解析。URL-encoder for SVG

png 转 ico。此外还有很多转换功能。aconvert


明天也要加油~

Author: SmallXeon
Link: https://hexo.chensmallx.top/2018/11/23/post-everyday-2018-11-23/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
一些推广链接
几个便宜量大的小✈场: FASTLINK, YToo, 论坛邀请注册: ,
便宜量大但是稳定性不足的VPS: , 价格略贵但好用的VPN: , ,