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.

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#

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+++

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}