PWAs(Progressive web apps) are web apps developed using a number of specific technologies and standard patterns to allow them to take advantage of both web and native app features.
We are in the experimental stage of PWA, but some major features have been added, such as install site to home screen, precache files and available offline.
Site Parameters#
Firstly, we need to specify the pwa parameter, even it is empty.
| Name | Type | Default | Description |
|---|---|---|---|
pwa | Object | - | |
pwa.manifest | Object | - | Web app manifest |
pwa.manifest.name | String | - | Default to site title |
pwa.manifest.short_name | String | - | Short name of your site. |
pwa.manifest.display | String | standalone | |
pwa.manifest.description | String | - | Default to site description. |
pwa.manifest.theme_color | String | - | |
pwa.manifest.background_color | String | - | |
pwa.manifest.icons | Array | - | |
pwa.manifest.icons.sizes | String | - | Icons’ sizes, i.e. “96x96” |
pwa.manifest.icons.src | String | - | Icon’s URL |
pwa.precache | Object | - | Precache assets |
pwa.precache.fonts | Array | - | Precache fonts |
pwa.precache.images | Array | - | Precache images |
pwa.precache.pages | Array | - | Precache pages |
pwa.precache.scripts | Array | - | Precache scripts |
pwa.precache.styles | Array | - | Precache styles |
Manifest#
The manifest.json will be generated automatically.
Offline#
The offline page will be shown in the case of requesting a new page without network.
We need to create an offline page called offline/index.md in the content directory with the following front matter.
1+++
2title = 'Offline'
3layout = 'offline'
4+++
Precache#
1[pwa]
2 [pwa.precache]
3 fonts = ['/assets/katex/fonts/KaTeX_Math-Italic.woff2']
4 images = ['/images/logo.webp', '/images/profile.webp']
5 pages = ['/']
6 scripts = ['https://utteranc.es/client.js']
7 styles = ['https://fonts.googleapis.com/css2?family=Roboto&display=swap']
1pwa:
2 precache:
3 fonts:
4 - /assets/katex/fonts/KaTeX_Math-Italic.woff2
5 images:
6 - /images/logo.webp
7 - /images/profile.webp
8 pages:
9 - /
10 scripts:
11 - https://utteranc.es/client.js
12 styles:
13 - https://fonts.googleapis.com/css2?family=Roboto&display=swap
1{
2 "pwa": {
3 "precache": {
4 "fonts": [
5 "/assets/katex/fonts/KaTeX_Math-Italic.woff2"
6 ],
7 "images": [
8 "/images/logo.webp",
9 "/images/profile.webp"
10 ],
11 "pages": [
12 "/"
13 ],
14 "scripts": [
15 "https://utteranc.es/client.js"
16 ],
17 "styles": [
18 "https://fonts.googleapis.com/css2?family=Roboto\u0026display=swap"
19 ]
20 }
21 }
22}
Comments