Progressive Web-App

PWAs(Progressive Web-Apps) sind Web-Apps, die mithilfe einer Reihe spezifischer Technologien und Standardmuster entwickelt wurden, damit sie sowohl Web- als auch native App-Funktionen nutzen können.

HBS bietet einige grundlegende Funktionen, wie z. B. die Installation der Site auf dem Startbildschirm, das Vorcache von Dateien und die Offline-Verfügbarkeit.

Site-Parameter

Zuerst müssen wir den Parameter pwa angeben, auch wenn er leer ist.

Name	Geben Sie	ein Standard	Beschreibung
`pwa`	Objekt	-
`pwa.manifest`	Objekt	-	Web-App-Manifest
`pwa.manifest.name`	Zeichenfolge	-	Standardmäßig wird der Site-Titel verwendet
`pwa.manifest.short_name`	Zeichenfolge	-	Kurzname Ihrer Website.
`pwa.manifest.display`	Zeichenfolge	`standalone`
`pwa.manifest.description`	Zeichenfolge	-	Standardmäßig wird die Site-Beschreibung verwendet.
`pwa.manifest.theme_color`	Zeichenfolge	-
`pwa.manifest.background_color`	Zeichenfolge	-
`pwa.manifest.icons`	Array	-
`pwa.manifest.icons.sizes`	Zeichenfolge	-	Symbolgrößen, z. B. „96 x 96 Zoll“
`pwa.manifest.icons.src`	Zeichenfolge	-	URL des Symbols
`pwa.precache`	Objekt	-	Assets vorab zwischenspeichern
`pwa.precache.fonts`	Array	-	Schriftarten vorab zwischenspeichern
`pwa.precache.images`	Array	-	Bilder vorab zwischenspeichern
`pwa.precache.pages`	Array	-	Seiten vorab zwischenspeichern
`pwa.precache.scripts`	Array	-	Skripte vorab zwischenspeichern
`pwa.precache.styles`	Array	-	Precache-Stile

Manifestieren

Das manifest.json wird automatisch generiert.

Offline

Offline-Seite

Wenn Sie eine neue Seite ohne Netzwerk anfordern, wird die Offline-Seite angezeigt.

Wir müssen eine Offline-Seite namens offline/_index.md im Verzeichnis content mit dem folgenden Titelthema erstellen.

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

Offline-Bild

Wie bei der Offline-Seite gibt es ein Offline-Bild zum Anfordern von Bildern ohne Netzwerk. HBS stellt ein integriertes Offline-Image mit dem Dateinamen assets/images/offline.png bereit. Sie können es überschreiben, indem Sie im Stammverzeichnis Ihrer Website ein eigenes Offline-Image mit demselben Dateinamen erstellen.

Vorcache

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}