6.1. Usando service workers para pre-cache de App Shell

Aplicaciones Web progresivo debe ser rápido e instalable, que significa que funcionan en línea, offline y en conexiones intermitentes, lento. Para lograr esto, necesitamos almacenar nuestra shell de la aplicación utilizando service worker, para que siempre esté disponible rápidamente y confiablemente.

Si usted está familiarizado con los service worker, puede obtener una comprensión básica de lectura Introduction To Service Workers sobre lo que pueden hacer, cómo funciona su ciclo de vida y más. Una vez que has completado este laboratorio de código, asegúrese de comprobar hacia fuera el Debugging Service Workers code lab para una mirada más de profundo en cómo trabajar con service worker.

Características proporcionadas por los service worker considera una mejora progresiva y añadió sólo si es compatible con el navegador. Por ejemplo, con service workers usted puede caché la shell de la aplicación y los datos para su aplicación, por lo que está disponible incluso cuando la red no es. Cuando los trabajadores de servicio no son compatibles, no es llamado el código fuera de línea y el usuario obtiene una experiencia básica. Usando la característica detección mejora progresiva tiene poca cabeza y no romperá en navegadores antiguos que no admitan esta función.

Recuerde: Service worker funcionalidad sólo está disponible en las páginas que se accede a través de HTTPS (http://localhost y trabajará también, para facilitar las pruebas equivalentes). Para conocer el fundamento de esta restricción de salida Prefieren orígenes seguros de nuevas y potentes funciones desde el equipo de Chromium

Registrar al trabajador de servicio si está disponible

El primer paso para hacer el trabajo de la aplicación offline es dar de alta un trabajador de servicio, un script que permite la funcionalidad de fondo sin la necesidad de una página web abierta o interacción con el usuario.

Esto tiene dos pasos simples: 

1. Dile el navegador para registrar el archivo de JavaScript como la service worker.
2. Cree un archivo JavaScript que contiene el service worker.

En primer lugar, tenemos que comprobar si el explorador admite service workers y si lo hace, registre el service worker. Agregue el código siguiente al archivo app.js, ( después del comentario: // TODO add service worker code here )

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
             .register('./service-worker.js')
             .then(function() { console.log('Service Worker Registered'); });
  }

Fuente: