Cómo crear una Progressive Web App (PWA) o web progresiva

por
Tiempo de lectura: 2 minutos

Para crear una Progressive Web App (PWA) con Service Worker, sigue los siguientes pasos:

  • Crea un archivo manifest.json: Este archivo define cómo se verá y se comportará la aplicación en diferentes dispositivos. Incluye información como el nombre de la aplicación, el icono de la aplicación, el tema de color, la orientación de pantalla y mucho más.
{
  "name": "Mi App PWA",
  "short_name": "Mi App",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "display": "standalone",
  "icons": [
    {
      "src": "icono-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icono-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
  • Crea un archivo index.html: Este archivo es el punto de entrada de tu aplicación. Incluye un enlace al archivo manifest.json y a tu archivo service-worker.js. Además, aquí es donde debes incluir todo el contenido de tu aplicación.
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Mi App PWA">
  <link rel="manifest" href="/manifest.json">
  <title>Mi App PWA</title>
</head>
<body>
  <h1>Mi App PWA</h1>
  <p>¡Bienvenido a mi aplicación PWA!</p>
  <script src="/main.js"></script>
  <script src="/service-worker.js"></script>
</body>
</html>
  • Crea un archivo service-worker.js: Este archivo es donde se alojará el Service Worker. En este archivo, debes definir qué recursos debe cachear tu aplicación y cómo manejar las solicitudes de red.
const CACHE_NAME = 'mi-app-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/main.js',
  '/styles.css'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
      .catch(error => console.log('Error al instalar el Service Worker:', error))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
      .catch(error => console.log('Error al intentar acceder a la caché:', error))
  );
});
  • Registra el Service Worker: Para registrar tu Service Worker, debes agregar el siguiente código al final de tu archivo index.html:
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => console.log('Service Worker registrado:', registration))
      .catch(error => console.log('Error al registrar el Service Worker:', error));
  });
}
  • Prueba tu aplicación: Una vez que hayas completado los pasos anteriores, debes probar tu aplicación en diferentes dispositivos y navegadores para asegurarte de que todo funcione como se esperaba.

Al crear una PWA con Service Worker, debes asegurarte de que la aplicación sea segura, confiable y fácil de usar en todos los dispositivos y navegadores. Esto significa que debes tener en cuenta la seguridad, la accesibilidad y la usabilidad de la aplicación.

Post Views: 12

Deja un comentario