This article will tell you how to support pwa on hexo.

1.Requirements

All stations support https ,it is the premise of support pwa.

There are too many tutorials to enable https online ,so this article is not in the narrative.

2.Install hexo-pwa

1
$ npm install --save hexo-pwa

3.Modify the configuration file

You can configure this plugin in _config.yml.

Example:

_config.yml

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
pwa:
manifest:
path: /manifest.json
body:
name: hexo
short_name: hexo
icons:
- src: /images/android-chrome-192x192.png
sizes: 192x192
type: image/png
- src: /images/android-chrome-512x512.png
sizes: 512x512
type: image/png
start_url: /index.html
theme_color: '#ffffff'
background_color: '#ffffff'
display: standalone
serviceWorker:
path: /sw.js
preload:
urls:
- /
posts: 5
opts:
networkTimeoutSeconds: 5
routes:
- pattern: !!js/regexp /hm.baidu.com/
strategy: networkOnly
- pattern: !!js/regexp /.*\.(js|css|jpg|jpeg|png|gif)$/
strategy: cacheFirst
- pattern: !!js/regexp /\//
strategy: networkFirst
priority: 5

If you want to read more information ,please visit lavas-project/hexo-pwa.

After the plugin was installed , the configuration file will automatically generate manifest.json and sw.js on public directory.

4.Generates static files and deploys your website

Windows:

1
hexo clean ; hexo g -d

Linux:

1
hexo clean && hexo g -d

5.References

hexo博客简单支持PWA

三步,让 Hexo 轻松支持 PWA