Crea tu primera PWA

A partir de hoy, mi sitio está disponible como una aplicación web progresiva. ¡Yaay! 💯

En esta publicación, aprenderá más sobre cómo y por qué agregué esta interesante función a mi sitio.

¿Por qué lo hice?

Me gusta pensar en mí mismo como una persona muy pedante, y traté de mejorar mi sitio desde el primer día. En el momento en que estaba creando mi sitio, no entendía todas las métricas de las herramientas de rendimiento web como PageSpeed ​​Insights o WebPageTest. Pero, mientras intentaba mejorar mi sitio, estaba aprendiendo nuevas técnicas y mi sitio web fue mejorando cada vez más.

Ahora mi sitio obtiene las mejores puntuaciones, pero una cosa me molestó durante algún tiempo. Fue la puntuación de la aplicación web progresiva.

Al mirar el informe de PWA, me di cuenta de que mi sitio está listo para PWA. Solo quedaban algunos problemas por resolver. No entendí estos problemas, pero eso nunca me detuvo antes.

Como lo hice

Como punto de partida, decidí seguir el tutorial “Tu primera aplicación web progresiva”. El primer paso fue actualizar mi webmanifest.json expediente. yo añadí start_url y display opciones y algunas metaetiquetas necesarias, como

<meta name=”apple-mobile-web-app-capable” content=”yes”>.
{
“name”: “SB site — Silvestar Bistrović website”,
“short_name”: “SB site — Silvestar Bistrović website”,
“icons”: [
…
],
“theme_color”: “#12e09f”,
“background_color”: “#fff”,
“start_url”: “/offline.html”,
“display”: “standalone”
}

A continuación, creé el archivo sw.js para Service Worker. Para registrar al trabajador del servicio, hay un pequeño fragmento que debe agregarse a su página de índice:

// CODELAB: Register service worker.
if (‘serviceWorker’ in navigator) {
  window.addEventListener(‘load’, () => {
    navigator.serviceWorker.register(‘/service-worker.js’)
      .then((reg) => {}
         console.log(‘Service worker registered.’, reg);
            });
        });
      }

El contenido del archivo Service Worker puede variar, dependiendo de lo que desee lograr con su sitio. Como mi sitio es bastante sencillo, decidí utilizar únicamente la experiencia básica sin conexión. Eso significa que necesitaba un archivo offline.html para la experiencia sin conexión. Sería una versión reducida de mi página de inicio. Así que eliminé las imágenes externas y creé un marcador de posición usando CSS. Eliminé el archivo CSS externo y lo inserté en la sección head. Lo único que quedaba por hacer era agregar archivos de favicon. Todavía no estoy seguro de si esto es necesario, pero decidí ponerlo allí, por si acaso. Esos archivos no son grandes de todos modos.

El archivo sw.js se puede dividir en cuatro segmentos:

• definiendo constantes,
• instalación,
• activación, y
• atractivo.

Primero, definí el nombre de la caché y qué archivos almacenar en caché.

// constants
const CACHE_NAME = 'sb-cache-v1.3'
const FILES_TO_CACHE = [
'/offline.html',
'/favicon/apple-touch-icon.png',
'/favicon/favicon-32x32.png',
'/favicon/favicon-16x16.png',
'/favicon/site.webmanifest',
'/favicon/safari-pinned-tab.svg',
'/favicon/favicon.ico',
'/favicon/mstile-144x144.png',
'/favicon/browserconfig.xml'
]

A continuación, creé el evento de install que abre la caché con el nombre de caché dado y almacena los archivos.

self.addEventListener('install', (event) => {
// CODELAB: Precache static resources here.
event.waitUntil(
  caches.open(CACHE_NAME).then((cache) => {
    console.log('[ServiceWorker] Pre-caching offline page')
      return cache.addAll(FILES_TO_CACHE)
    })
   )
 })

Después de eso, creé el evento de activate, que limpia los archivos en caché del disco.

self.addEventListener('activate', (event) => {
// CODELAB: Remove previous cached data from disk.
event.waitUntil(
  caches.keys().then(keyList => Promise.all(keyList.map((key) 
=> {
     if (key !== CACHE_NAME) {
         console.log('[ServiceWorker] Removing old cache', key)
          return caches.delete(key)
        }
     })))
    )
   })

Finalmente, creé el evento fetch, que maneja la navegación de la página solo cuando request .mode es navigate. Si la solicitud no consigue recuperar el elemento de la red, intenta recuperar el archivo offline.html.

self.addEventListener('fetch', (event) => {
 // CODELAB: Add fetch event handler here.
 if (event.request.mode === 'navigate') {
   event.respondWith(
     fetch(event.request)
      .catch(() => caches.open(CACHE_NAME)
        .then(cache => cache.match('offline.html')))
   )
 }
})

Resultados finales

Creo que los fuegos artificiales merecen otra aparición. 💯

Próximos pasos

Los siguientes pasos son aprender más sobre Workbox. Y después de eso, planeo agregar una experiencia completa fuera de línea para mi proyecto paralelo Code Line Daily.