Progressive Web App

PWA’s (Progressive web apps) zijn webapps die zijn ontwikkeld met specifieke technologieën en standaardpatronen, zodat ze zowel van web- als van native app-functies gebruik kunnen maken.

HBS biedt enkele basisfuncties, zoals de site toevoegen aan het startscherm, bestanden vooraf in cache plaatsen en offline beschikbaarheid.

Siteparameters

Geef eerst de parameter pwa op, ook als deze leeg is.

Naam	Type	Standaard	Beschrijving
`pwa`	Object	-
`pwa.manifest`	Object	-	Web app manifest
`pwa.manifest.name`	String	-	Standaard is de sitetitel
`pwa.manifest.short_name`	String	-	Korte naam van je site.
`pwa.manifest.display`	String	`standalone`
`pwa.manifest.description`	String	-	Standaard is de sitebeschrijving.
`pwa.manifest.theme_color`	String	-
`pwa.manifest.background_color`	String	-
`pwa.manifest.icons`	Array	-
`pwa.manifest.icons.sizes`	String	-	Iconformaten, bijv. “96x96”
`pwa.manifest.icons.src`	String	-	URL van het icoon
`pwa.precache`	Object	-	Assets vooraf in cache plaatsen
`pwa.precache.fonts`	Array	-	Lettertypen vooraf in cache plaatsen
`pwa.precache.images`	Array	-	Afbeeldingen vooraf in cache plaatsen
`pwa.precache.pages`	Array	-	Pagina’s vooraf in cache plaatsen
`pwa.precache.scripts`	Array	-	Scripts vooraf in cache plaatsen
`pwa.precache.styles`	Array	-	Stijlen vooraf in cache plaatsen

Manifest

De manifest.json wordt automatisch gegenereerd.

Offline

Offlinepagina

De offlinepagina wordt weergegeven wanneer een nieuwe pagina wordt opgevraagd zonder netwerkverbinding.

Maak een offlinepagina aan met de naam offline/_index.md in de map content met de volgende front matter.

1+++
2title = 'Offline'
3+++

Offlineafbeelding

Net als de offlinepagina is er een offlineafbeelding voor het opvragen van afbeeldingen zonder netwerkverbinding. HBS biedt een ingebouwde offlineafbeelding met de bestandsnaam assets/images/offline.png. Je kunt deze overschrijven door je eigen offlineafbeelding aan te maken met dezelfde bestandsnaam in de hoofdmap van je site.

Vooraf in Cache Plaatsen

params.toml

1[pwa]
2  [pwa.precache]
3    fonts = ['/assets/katex/fonts/KaTeX_Math-Italic.woff2']
4    images = ['/images/logo.webp', '/images/Martijn_001.jpeg']
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/Martijn_001.jpeg
 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/Martijn_001.jpeg"
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}