Angular 2
Trabajador del servicio

Introducción

Añadir Service Worker a nuestra aplicación

Primero, en caso de que estés consultando mobile.angular.io, la bandera --mobile ya no funciona.

Así que para empezar, podemos crear un proyecto normal con cli angular.

ng new serviceWorking-example
cd serviceWorking-example

Ahora lo importante, para decir a Cli angular que queremos usar el trabajador de servicio que tenemos que hacer:

ng set apps.0.serviceWorker = true

Si por alguna razón no tiene instalado @ angular / service-worker, verá un mensaje:

Su proyecto se configura con serviceWorker = true, pero @ angular / service-worker no está instalado. Ejecute npm install --save-dev @angular/service-worker e intente nuevamente, o ejecute ng set apps.0.serviceWorker=false en su .angular-cli.json.

Verifique .angular-cli.json y ahora debería ver esto: "serviceWorker": verdadero

Cuando este indicador es verdadero, las compilaciones de producción se configurarán con un trabajador de servicio.

Se generará un archivo ngsw-manifest.json (o se aumentará en caso de que tengamos que crear un ngsw-manifest.json en la raíz del proyecto, generalmente esto se hace para especificar el enrutamiento, en un futuro probablemente se hará de forma automática) en el directorio dist / root, y el script del trabajador del servicio se copiará allí. Se agregará una secuencia de comandos corta a index.html para registrar al trabajador del servicio.

Ahora si construimos la aplicación en modo de producción ng build --prod

Y compruebe dist / carpeta.

Verás tres nuevos archivos allí:

• worker-basic.min.js
• sw-register.HASH.bundle.js
• ngsw-manifest.json

Además, index.html ahora incluye esta secuencia de comandos sw-register, que registra un Trabajador de Servicio Angular (ASW) para nosotros.

Actualice la página en su navegador (servido por el servidor web para Chrome)

Abrir herramientas de desarrollo. Ir a la aplicación -> Trabajadores de servicio

¡Bien ahora el trabajador de servicio está en marcha!

Ahora nuestra aplicación debería cargarse más rápido y deberíamos poder usar la aplicación sin conexión.

Ahora, si habilita el modo sin conexión en la consola Chrome, debería ver que nuestra aplicación en http: // localhost: 4200 / index.html funciona sin conexión a Internet.

Pero en http: // localhost: 4200 / tenemos un problema y no se carga, esto se debe a que el caché de contenido estático solo sirve para los archivos listados en el manifiesto.

Por ejemplo, si el manifiesto declara una URL de /index.html, las solicitudes a /index.html serán respondidas por el caché, pero una solicitud a / o / some / route irá a la red.

Ahí es donde entra el complemento de redirección de rutas. Lee una configuración de enrutamiento del manifiesto y redirige las rutas configuradas a una ruta de índice específica.

Actualmente, esta sección de configuración debe estar escrita a mano (19-7-2017). Eventualmente, se generará a partir de la configuración de ruta presente en la fuente de la aplicación.

Así que si ahora creamos o ngsw-manifest.json en la raíz del proyecto

{
  "routing": {
    "routes": {
      "/": {
        "prefix": false
      }
    },
    "index": "/index.html"
  }
}

Y construimos de nuevo nuestra aplicación, ahora cuando vamos a http: // localhost: 4200 / , deberíamos ser redirigidos a http: // localhost: 4200 / index.html .

Para más información sobre enrutamiento, lea la documentación oficial aquí.

Aquí puede encontrar más documentación sobre los trabajadores de servicios:

https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

https://docs.google.com/document/d/19S5ozevWighny788nI99worpcIMDnwWVmaJDGf_RoDY/edit#

Y aquí puede ver una forma alternativa de implementar el servicio trabajando con la biblioteca de precache SW:

https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers