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.

NameTypeDefaultDescription
pwaObject-
pwa.manifestObject-Web app manifest
pwa.manifest.nameString-Default to site title
pwa.manifest.short_nameString-Short name of your site.
pwa.manifest.displayStringstandalone
pwa.manifest.descriptionString-Default to site description.
pwa.manifest.theme_colorString-
pwa.manifest.background_colorString-
pwa.manifest.iconsArray-
pwa.manifest.icons.sizesString-Icons’ sizes, i.e. “96x96”
pwa.manifest.icons.srcString-Icon’s URL
pwa.precacheObject-Precache assets
pwa.precache.fontsArray-Precache fonts
pwa.precache.imagesArray-Precache images
pwa.precache.pagesArray-Precache pages
pwa.precache.scriptsArray-Precache scripts
pwa.precache.stylesArray-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}