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