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.
HBS provides some basic features, 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§
Offline Page§
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'
3+++
Offline Image§
Same as offline page, there is an offline image for requesting images without network. HBS provides a built-in offline image with the filename assets/images/offline.png.
You can override it by creating your own offline image with the same filename under your site root.
Precache§
params.toml
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 = ['/assets/js/foo.js']
7 styles = ['https://fonts.googleapis.com/css2?family=Roboto&display=swap']
params.yaml
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 - /assets/js/foo.js
12 styles:
13 - https://fonts.googleapis.com/css2?family=Roboto&display=swap
params.json
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 "/assets/js/foo.js"
16 ],
17 "styles": [
18 "https://fonts.googleapis.com/css2?family=Roboto\u0026display=swap"
19 ]
20 }
21 }
22}
Comments