Crear una Progressive Web App (PWA) usando React y Next.js

Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo podemos crear una web progresiva PWA utilizando React y Next.js.

Instalamos la dependencia que vamos a utilizar next-pwa

npm install next-pwa --save-dev @types/next-pwa --save-dev

Ahora creamos un archivo manifest.json dentro de public.

{
  "short_name": "Mi PWA",
  "name": "Mi PWA",
  "icons": [
    {
      "src": "/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

Pondremos el nombre y los datos de nuestra app y enlazaremos el icono. Podemos elegir la orientación indicando:   «orientation»: «portrait»

Creamos un archivo llamado service-worker.js dentro de public:

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('cache01').then(function(cache) {
      return cache.addAll([
        '/_next/static/', // Aquí debes agregar las rutas a los archivos estáticos generados por Next.js
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

var cacheWhitelist = ['cache01'];
caches.keys().then(function(cacheNames) {
  return Promise.all(
    cacheNames.map(function(cacheName) {
      if (cacheWhitelist.indexOf(cacheName) === -1) {
        return caches.delete(cacheName);
      }
    })
  );
});

caches.keys().then(function(cacheKeys) {
  console.log('Versión SW: '+cacheKeys);
});

Añadimos el manifest.json a nuestro head:

<link rel="manifest" href="./manifest.json" />

Y ahora cargaremos la web en el navegador Chrome de móvil para ver cómo nos indica instalar la APP o entramos en Ajustes y pulsamos en Instalar aplicación.