Les PWA (Applications Web progressives) sont des applications Web développées à l’aide d’un certain nombre de technologies spécifiques et de modèles standard pour leur permettre de tirer parti des fonctionnalités du Web et des applications natives.
HBS fournit certaines fonctionnalités de base, telles que l’installation du site sur l’écran d’accueil, les fichiers de pré-cache et la disponibilité hors ligne.
Paramètres du site
Tout d’abord, nous devons spécifier le paramètre pwa, même s’il est vide.
| Nom | Tapez | Par défaut | Descriptif |
|---|---|---|---|
pwa | Objet | - | |
pwa.manifest | Objet | - | Manifeste d’application Web |
pwa.manifest.name | Chaîne | - | Par défaut, le titre du site |
pwa.manifest.short_name | Chaîne | - | Nom court de votre site. |
pwa.manifest.display | Chaîne | standalone | |
pwa.manifest.description | Chaîne | - | Par défaut, la description du site. |
pwa.manifest.theme_color | Chaîne | - | |
pwa.manifest.background_color | Chaîne | - | |
pwa.manifest.icons | Tableau | - | |
pwa.manifest.icons.sizes | Chaîne | - | Tailles des icônes, c’est-à-dire “96x96” |
pwa.manifest.icons.src | Chaîne | - | URL de l’icône |
pwa.precache | Objet | - | Actifs de pré-cache |
pwa.precache.fonts | Tableau | - | Polices de pré-cache |
pwa.precache.images | Tableau | - | Images de pré-cache |
pwa.precache.pages | Tableau | - | Pages de pré-cache |
pwa.precache.scripts | Tableau | - | Scripts de pré-cache |
pwa.precache.styles | Tableau | - | Styles de pré-cache |
Manifeste
Le manifest.json sera généré automatiquement.
Hors ligne
Page hors ligne
La page hors ligne sera affichée en cas de demande d’une nouvelle page sans réseau.
Nous devons créer une page hors ligne appelée offline/_index.md dans le répertoire content avec les éléments de présentation suivants.
1+++
2title = 'Offline'
3+++
Image hors ligne
Comme pour la page hors ligne, il existe une image hors ligne pour demander des images sans réseau. HBS fournit une image hors ligne intégrée avec le nom de fichier assets/images/offline.png.
Vous pouvez le remplacer en créant votre propre image hors ligne avec le même nom de fichier sous la racine de votre site.
Pré-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}