!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.