Las PWA(Aplicaciones web progresivas) son aplicaciones web desarrolladas utilizando una serie de tecnologías específicas y patrones estándar que les permiten aprovechar las funciones de las aplicaciones web y nativas.
HBS proporciona algunas funciones básicas, como instalación del sitio en la pantalla de inicio, archivos de caché previo y disponibilidad sin conexión.
Parámetros del sitio
En primer lugar, debemos especificar el parámetro pwa, incluso si está vacío.
| Nombre | Tipo | Predeterminado | Descripción |
|---|---|---|---|
pwa | Objeto | - | |
pwa.manifest | Objeto | - | Manifiesto de la aplicación web |
pwa.manifest.name | Cadena | - | Título predeterminado del sitio |
pwa.manifest.short_name | Cadena | - | Nombre corto de su sitio. |
pwa.manifest.display | Cadena | standalone | |
pwa.manifest.description | Cadena | - | Predeterminado a la descripción del sitio. |
pwa.manifest.theme_color | Cadena | - | |
pwa.manifest.background_color | Cadena | - | |
pwa.manifest.icons | Matriz | - | |
pwa.manifest.icons.sizes | Cadena | - | Tamaños de los iconos, es decir, “96x96” |
pwa.manifest.icons.src | Cadena | - | URL del icono |
pwa.precache | Objeto | - | Activos de caché previa |
pwa.precache.fonts | Matriz | - | fuentes precaché |
pwa.precache.images | Matriz | - | Imágenes de precaché |
pwa.precache.pages | Matriz | - | páginas de caché previa |
pwa.precache.scripts | Matriz | - | Scripts de caché previa |
pwa.precache.styles | Matriz | - | Estilos de caché previa |
Manifiesto
El manifest.json se generará automáticamente.
Sin conexión
Página sin conexión
La página offline se mostrará en el caso de solicitar una nueva página sin red.
Necesitamos crear una página fuera de línea llamada offline/_index.md en el directorio content con el siguiente contenido.
1+++
2title = 'Offline'
3+++
Imagen sin conexión
Al igual que la página sin conexión, hay una imagen sin conexión para solicitar imágenes sin red. HBS proporciona una imagen sin conexión integrada con el nombre de archivo assets/images/offline.png.
Puede anularlo creando su propia imagen sin conexión con el mismo nombre de archivo en la raíz de su sitio.
Precaché
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}
Comentarios