DESARROLLO WEB EN ENTORNO SERVIDOR
Desarrollo de aplicaciones Web híbridas
PWA: PROGRESSIVE WEB APP. WEB MANIFEST. SERVICE WORKER.
- 1. Introducción
- 2. Características de una PWA
- 3. Pasos a seguir
- 4. Instalar / desinstalar PWA
- 5. Profundizando en las PWA
- 6. Herramientas para auditoría
- 7. Otras propiedades de metadata
- 8. Favicon
- 9. Optimización
- 10. CASOS PRÁCTICOS AVANZADOS
- 11. Referencias
En este tema veremos como convertir nuestra aplicación web en una PWA.
Una aplicación web progresiva (PWA) es una aplicación creada utilizando tecnologías de plataforma web, pero que proporciona una experiencia de usuario similar a la de una aplicación específica de una plataforma.
Al igual que un sitio web, una PWA puede ejecutarse en múltiples plataformas y dispositivos desde una única base de código. Al igual que una aplicación específica de una plataforma, se puede instalar en el dispositivo, puede funcionar sin conexión y en segundo plano, y puede integrarse con el dispositivo y con otras aplicaciones instaladas.
Las aplicaciones web progresivas combinan las mejores características de los sitios web tradicionales y las aplicaciones específicas de la plataforma.
Las PWA tienen los beneficios de los sitios web, que incluyen:
- Las PWA se desarrollan utilizando tecnologías de plataforma web estándar, por lo que pueden ejecutarse en múltiples sistemas operativos y clases de dispositivos desde una única base de código.
- Se puede acceder a las PWA directamente desde la web.
Las PWA también tienen muchos de los beneficios de las aplicaciones específicas de la plataforma, que incluyen:
-
Se pueden instalar PWA en el dispositivo. Esto significa:
- La PWA se puede instalar desde la tienda de aplicaciones de la plataforma o directamente desde la web.
- La PWA se puede instalar como una aplicación específica de la plataforma y puede personalizar el proceso de instalación.
- Una vez instalada, la PWA obtiene un ícono de aplicación en el dispositivo, junto con aplicaciones específicas de la plataforma.
- Una vez instalada, la PWA se puede iniciar como una aplicación independiente, en lugar de como un sitio web en un navegador.
-
Las PWA pueden funcionar en segundo plano y sin conexión: un sitio web típico solo está activo mientras la página está cargada en el navegador. Una PWA puede:
- Funcionar mientras el dispositivo no tenga conectividad de red.
- Actualizar contenido en segundo plano.
- Responder a los mensajes push del servidor.
- Mostrar notificaciones utilizando el sistema de notificaciones del sistema operativo.
-
Las PWA pueden usar toda la pantalla, en lugar de ejecutarse en la interfaz de usuario del navegador.
-
Las PWA se pueden integrar en el dispositivo, registrarse como destinos y fuentes compartidos y acceder a las funciones del dispositivo.
-
Las PWA se pueden distribuir en tiendas de aplicaciones, así como abiertamente a través de la web.
A continuación se muestran los pasos a seguir para convertir nuestra aplicación web en una aplicación web progresiva.
Deberemos generar un archivo manifest.json (también puede llamarse manifest.webmanifest) e iconos de varios tamaños. Para ello podemos hacer uso de alguno de los generadores de app manifest disponibles en la web.
Un buen sitio para generar el manifest es pwa-icon-generator
Al generador deberemos proporcinarle, además de los datos de configuración, una imagen con fondo transparente y un tamano de 512x512 píxeles. A partir de ella, el generador nos proporcionará varias imagenes de menor tamaño.
Important
En el apartado Display es muy recomendable establecer el valor standalone. Esto hará que nuestra aplicación se muestre en una ventana propia, sin mostrar en ningún momento el navegador subyacente.
A continuación descargaremos los archivos a nuestro PC o portátil.
Una vez descargados los archivos, los colocaremos en la carpeta /public de nuestro proyecto.
IMPORTANTE:
En caso de no disponer de aplicación para generar el manifest.json y los iconos, podemos recurrir a la solución directa, que consiste en los 2 pasos siguientes:
- Usar un archivo manifest.json previo como base para elaborar el nuestro
- Generar los distintos tamaños de los iconos con alguna herramienta de escritorio u on-line (p. ej: pwabuilder )
Para el primer paso, aquí tienes el contenido de un manifest.json de ejemplo:
{
"name": "NextJS Cloudinary CRUD",
"short_name": "nxcloudinary-crud",
"theme_color": "#2e30a1",
"background_color": "#3e586f",
"display": "standalone",
"orientation": "",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "/pwa/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/pwa/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/pwa/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/pwa/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"description": "NextJS Photo Gallery App using Cloudinary",
"screenshots": [
{
"src": "desktop.webp",
"sizes": "1096x1039",
"type": "image/webp"
},
{
"src": "mobile.webp",
"sizes": "665x976",
"type": "image/webp"
}
]
}Para el segundo paso, busca una imagen con un tamaño 512x512 y genera los siguientes tamaños adicionales, aunque se admiten otros tamaños:
- 384x384
- 256x256
- 192x192
Por último deberás renombrar las imágenes para que su nombre y ruta coincida con el indicado en el archivo manifest.json previo, y subir todo a la carpeta public del proyecto.
Indicaremos a nuestra aplicación que haga uso del manifiesto anterior.
src/app/layout.js
import '@/app/globals.css'
// otros imports
export const metadata = {
title: 'ORM Prisma',
description: 'Generated by create next app',
manifest: '/pwa/manifest.json'
}Si abrimos la aplicación con Chrome, nos apareceráen la parte derecha de la barra de direcciones un icono para instalar la app.
Una vez instalada, se nos creará un acceso directo en el escritorio.
También es posible instalar la aplicación en un dispositivo móvil.
En el escritorio de PC o portátil pulsamos en los 3 puntos de la barra de título para realizar la desinstalación.
Una PWA puede proporcionar otras funcionalidades más allá de la simple instalación en un sistema anfitrión.
Más información en el siguiente enlace:
Una herramienta muy conocida que suele venir integrada en las dev tools del navegador Chrome es Lighthouse. Al aplicar la auditoría a nuestra aplicación nos dará información acerca de las siguientes características:
- Rendimiento
- Accesibilidad
- Prácticas recomendadas
- SEO
- PWA (actualmente este apartado ha sido dado de baja)
Lo mismo puede realizarse a través de la web https://pagespeed.web.dev/
Important
Para obtener una información más fiable se recomienda lanzar la auditoría en modo incógnito, puesto que no se cargan plugins que puedan interferir en la medida.
La propiedad manifest forma parte del objeto metadata. Puedes encontrar otras propiedades como openGraph, robots, ... en el siguiente enlace:
Independientemente de la PWA, para generar los distintos tamaños del favicon.ico podemos usar la herramienta web convertico.com
Una técnica novedosa para optimizar nuestra aplicación Next, puede verse en los siguientes enlaces:
Una exposición de las numerosas técnicas que proporciona Next.js para la optimización del rendimiento:
En los temas previos dispones de algunos proyectos de ejemplo que hacen uso bases de datos. Son proyectos básicos que pretenden ser didácticos, no ser extensos ni exhaustivos.
Para que compruebes las posibilidades que tienes a tu disposición, puedes consultar el siguiente proyecto, que está desarrollado y explicado (en inglés) con cierta profundidad.
