Progressieve webapp

PWA’s(Progressieve webapps) zijn webapps die zijn ontwikkeld met behulp van een aantal specifieke technologieën en standaardpatronen, zodat ze kunnen profiteren van zowel web- als native app-functies.

HBS biedt enkele basisfuncties, zoals het installeren van de site op het startscherm, het vooraf cachen van bestanden en het offline beschikbaar zijn.

Siteparameters

Ten eerste moeten we de parameter pwa specificeren, zelfs als deze leeg is.

Naam	Typ	Standaard	Beschrijving
`pwa`	Voorwerp	-
`pwa.manifest`	Voorwerp	-	Web-app-manifest
`pwa.manifest.name`	Tekenreeks	-	Standaard naar sitetitel
`pwa.manifest.short_name`	Tekenreeks	-	Korte naam van uw site.
`pwa.manifest.display`	Tekenreeks	`standalone`
`pwa.manifest.description`	Tekenreeks	-	Standaard naar sitebeschrijving.
`pwa.manifest.theme_color`	Tekenreeks	-
`pwa.manifest.background_color`	Tekenreeks	-
`pwa.manifest.icons`	Array	-
`pwa.manifest.icons.sizes`	Tekenreeks	-	Afmetingen van pictogrammen, bijvoorbeeld ‘96x96’
`pwa.manifest.icons.src`	Tekenreeks	-	De URL van het pictogram
`pwa.precache`	Voorwerp	-	Activa vooraf cachen
`pwa.precache.fonts`	Array	-	Lettertypen vooraf cachen
`pwa.precache.images`	Array	-	Afbeeldingen vooraf cachen
`pwa.precache.pages`	Array	-	Pagina’s vooraf cachen
`pwa.precache.scripts`	Array	-	Precache-scripts
`pwa.precache.styles`	Array	-	Stijlen vooraf cachen

Duidelijk

De manifest.json wordt automatisch gegenereerd.

Offline

Offline pagina

Bij het aanvragen van een nieuwe pagina zonder netwerk wordt de offline pagina getoond.

We moeten een offline pagina maken met de naam offline/_index.md in de map content met het volgende voorwerk.

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

Offlineafbeelding

Hetzelfde als de offline pagina, er is een offline afbeelding voor het aanvragen van afbeeldingen zonder netwerk. HBS biedt een ingebouwde offline-image met de bestandsnaam assets/images/offline.png. U kunt dit overschrijven door uw eigen offline afbeelding te maken met dezelfde bestandsnaam onder de hoofdmap van uw site.

Pre-cache

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}

Progressieve Webapp