PWA

Ya existen muchas definiciones disponibles en la red acerca de los que son las Aplicaciones Web Progresivas; así que en esta entrada del blog me detendré en algunos puntos que me resultaron interesantes.

Modelo de Service Worker con un fallback que prioriza el contenido de la red sobre el caché:

var filesToCache = [
  '/',
  'fichero.html',
  'otrofichero.html'
];

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

Si prefiere customizar la instalación de su PWA, utilice el evento: beforeinstallprompt:

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Pauso el mensaje por defecto de instalación
  e.preventDefault();
  // Lo reservo, para lanzarlo más tarde
  deferredPrompt = e;
  // Actualizo mi UI para notificar al usuario que puede instalar mi PWA
  showInstallPromotion();
});

En su manifiesto (json), puede definir la orientación de arranque del dispositivo (preste atención a la última línea):

{
    "short_name": "Nombre corto",
    "name": "Breve descripción ...",
    "icons": [
        {
            "src": "carpeta/imagen.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
        El resto del juego de imágenes ...
        }
    ],
    "start_url": "su_fichero_de_arranque.html",
    
    "display": "standalone",
    "theme_color": "#000000",
    "background_color": "#ffffff",
    "orientation": "portrait"
}

No se olvide de «decirle» a iOS que cuenta con los recursos para operar correctamente:

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-title" content="Nombre para su PWA">
  <meta name="apple-mobile-web-app-status-bar-style" content=" color de la barra ... ">
   
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

Si implementa «Push Notification», una vez que tenga el permiso del usuario, recuerde invocar en la API el método showNotification:

function displayNotification() {
  if (Notification.permission == 'granted') {
    navigator.serviceWorker.getRegistration().then(function(reg) {
      reg.showNotification('¡Estás notificado!');
    });
  }
}

Dos recursos adicionales:

El primero es Lighthouse que lo ayudará durante todo el proceso de aprestado de su PWA.

El segundo es el conversor de su PWA en el mercado: https://www.pwabuilder.com/