Menu

Service Workers en Angular

angularpwa - December 21, 2017 por Carlos Rojas | Edita este Post.
Angular CLI1.6.1Angular5.0

!Hola!

Si estuviste atento a lo que ocurrio esta semana en el mundo del desarrollo Web, posiblemente escuchaste que Edge y Safari vendran en su proxima versión con Service Workers activos por defecto. Esto significa que tus PWAs van a funcionar perfecto en todas estas plataformas. Adicionalmente, hace unas semanas se libero Angular CLI 1.6 la cual permite habilitar los Service Workers facilmente en tus Proyectos de Angular. Si quieres utilizarlo aca te digo como:

Instalar Angular CLI

$npm install -g @angular/cli

Crear una nueva App

$ng new pwaApp
$cd pwaApp/

Instalar la libreria y decirle al CLI que lo vas a utilizar.

$npm install @angular/service-worker
$ng set apps.0.serviceWorker=true

Importar y registrar el Service Worker

import { ServiceWorkerModule } from '@angular/service-worker'
import { environment } from '../environments/environment';
 
...
 
@NgModule({
  imports: [
    ...
     ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
  ],
  ...
})
export class AppModule { }

Crear el archivo de configuración, ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

Construir el Proyecto.

$ng build --prod

y eso es todo. Ahora tienes una PWA en tu directorio dist/

Opcional: Probando localmente tu PWA

Debido a que ng serve funciona con tareas de construcción de tu App debes tener un Servidor adicional para usar tu App con el Service Worker Activo.

Instalar HTTP Server

$npm install -g http-server

Ejecuta http-server

$cd dist/
$http-server -p 8080

Listo ahora ya tienes tu App corriendo con un Service Worker en tu navegador. Debes utilizar las Chrome Dev Tools para observar el funcionamiento de estas.

¡Compártelo!