Convertir un sitio web en una Progressive Web App (PWA) es una excelente manera de mejorar la experiencia del usuario y aprovechar las características modernas que permiten que tu web funcione como una aplicación nativa en cualquier dispositivo. A continuación, te indicaré cómo puedes convertir una página o aplicación web en una PWA de manera sencilla y rápida, sin necesidad de ser un experto en programación.
Las PWA ofrecen la posibilidad de ser instaladas directamente desde el navegador, pueden funcionar sin conexión a internet y enviar notificaciones push, entre otras funcionalidades. Sigue estos cinco pasos para convertir tu web en una PWA.
Paso 1: Asegúrate de que tu sitio es HTTPS
El primer requisito para convertir tu sitio en una PWA es que funcione bajo HTTPS. Esto es necesario para garantizar la seguridad de los datos que viajan entre el usuario y tu web. Las PWA dependen de HTTPS porque muchas de sus funcionalidades, como el almacenamiento local y los service workers, solo están disponibles bajo conexiones seguras.
¿Cómo obtener HTTPS?
Si tu sitio web no tiene HTTPS, puedes obtener un certificado SSL gratuito a través de Let’s Encrypt. La mayoría de los proveedores de alojamiento web ya ofrecen certificados SSL de forma automática, por lo que este paso podría ser más sencillo de lo que parece.
Paso 2: Crea un archivo manifest.json
El segundo paso consiste en crear el archivo manifest.json, que le dirá al navegador cómo debe comportarse tu PWA. Este archivo contiene información clave sobre tu aplicación, como el nombre, los iconos, la pantalla de inicio, los colores y el comportamiento cuando se instala en un dispositivo.
Ejemplo de manifest.json:
{
"name": "Mi PWA",
"short_name": "PWA",
"start_url": "./index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "./images/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./images/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}Este archivo deberá estar ubicado en la raíz de tu sitio web. Algunas claves importantes son:
name: Nombre completo de la aplicación.short_name: Nombre corto, que aparecerá bajo el icono cuando se instale.start_url: URL de inicio de la PWA. Nota que estamos usando./index.htmlpara asegurarnos de que la ruta es relativa y específica para la estructura de tu aplicación.display: El valor “standalone” permite que la PWA se vea como una app nativa, sin barras de navegador.icons: Aquí defines los iconos que se utilizarán al instalar la aplicación. Debes recordar crear e incluir estos iconos en la ruta indicada.
Incluir manifest.json en tu HTML
Para que el navegador detecte el archivo manifest.json, debes añadirlo dentro de la etiqueta <head> de tu archivo HTML de la siguiente manera:
<link rel="manifest" href="./manifest.json">Este enlace le dirá al navegador dónde está ubicado tu archivo manifest.json usando la ruta relativa ./manifest.json.
Paso 3: Implementa un Service Worker
El Service Worker es el corazón de una PWA. Se trata de un archivo JavaScript que actúa como intermediario entre la red y tu aplicación, permitiendo funcionalidades como la carga rápida de contenido, el almacenamiento en caché y el soporte para trabajar sin conexión.
Crear un archivo service-worker.js:
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('pwa-cache-v1').then((cache) => {
return cache.addAll([
'./',
'./index.html',
'./styles.css',
'./app.js',
'./images/icon-192x192.png'
]);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});Este código realiza dos funciones clave:
- Instalación del Service Worker: Durante la instalación, se almacenan en caché los archivos críticos de la aplicación, con rutas relativas (
./) para que se ubiquen correctamente dentro de la estructura del proyecto. - Intercepción de las solicitudes de red: Para cada solicitud, el Service Worker primero intenta obtener la respuesta desde la caché. Si no lo encuentra, hará una solicitud a la red.
Incluir el Service Worker en tu HTML
Una vez que hayas creado el archivo service-worker.js, necesitas registrarlo en tu sitio web. Esto se hace dentro del archivo HTML principal, justo antes de la etiqueta de cierre </body>:
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./service-worker.js')
.then(function(registration) {
console.log('Service Worker registrado con éxito:', registration);
}).catch(function(error) {
console.log('Error en el registro del Service Worker:', error);
});
}
</script>Aquí también usamos una referencia relativa ./service-worker.js para asegurarnos de que el archivo se carga desde la carpeta actual.
Paso 4: Asegúrate de que tu web sea responsiva
Uno de los aspectos más importantes de una PWA es que sea completamente responsiva, es decir, que se adapte y funcione correctamente en cualquier tamaño de pantalla. Las aplicaciones web deben proporcionar una experiencia de usuario coherente en teléfonos móviles, tabletas y computadoras.
Buenas prácticas para diseño responsivo:
- Usa medias queries en CSS para adaptar el diseño a diferentes resoluciones.
- Implementa flexbox o grid para que los elementos de la página se distribuyan bien en cualquier pantalla.
- Evita el uso de tamaños fijos para contenedores e imágenes. Opta por valores porcentuales o relativos.
Paso 5: Comprueba que tu PWA funciona correctamente
Una vez que hayas seguido estos pasos, deberías poder instalar y utilizar tu PWA. Puedes comprobar si está funcionando de manera correcta, por ejemplo debería mostrarse el icono de instalar al acceder a tu página. También puedes chequearla con PWABuilder.
Conclusión sobre convertir una web en una PWA
Convertir tu página o aplicación web en una PWA es un proceso sencillo si sigues estos cinco pasos. No solo mejorarás la experiencia del usuario, sino que también aumentarás la accesibilidad de tu web, permitiendo que funcione de manera similar a una app nativa, sin necesidad de pasar por las tiendas de aplicaciones tradicionales.