Tengo una aplicación web que necesita funcionar sin conexión. Quiero crear mi trabajador de servicio para manejar la lógica de sincronización/caché de API, y dejar que el trabajador de servicio de angular almacene en caché los activos de la aplicación.
Conseguí que el trabajador angular se registrara y funcionara perfectamente. Pero no pude llegar a registrar a mi trabajador.
Probé tres métodos:
//1. Does not seem to do anything. No worker built, no worker starter. ServiceWorkerModule.register('./offline.worker', {enabled: environment.production}); //2. The worker does not get built, registering fails since the script does not exist. navigator.serviceWorker.register('./offline.worker'); //3. The worker gets built, it even gets started, but is not registered as ServiceWorker. new Worker('./offline.worker', {type: 'module'});Entonces, la opción 1 funciona bien usando los documentos en el trabajador de servicio angular cuando apuntamos al archivo ngsw js. ¿Quizás simplemente no está hecho para trabajar para nuestros trabajadores?
La opción 2 es la forma documentada/estándar de registrar a los trabajadores de servicios, ¿tal vez debería simplemente hacer que mi trabajador sea construido? No se por donde empezar a hacer eso... El error completo que me sale es
TypeError no capturado (en promesa): no se pudo registrar un ServiceWorker para el alcance (' http://localhost:8080/ ') con script (' http://localhost:8080/offline.worker '): un código de respuesta HTTP incorrecto ( 404) se recibió al obtener el script.
La opción 3 hace todo como esperaba. ¡Mi trabajador está compilado, el ./offline.worker incluso se cambia al paquete creado! Así es como esperaba que las cosas funcionaran. Desafortunadamente, el trabajador creado así es solo un trabajador web, no un ServiceWorker. Esto significa que no puede manejar FetchEvents...
En aras de la exhaustividad, aquí está mi tsconfig.worker.json
{ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/worker", "lib": [ "es2018", "webworker" ], "types": [] }, "include": [ "src/**/*.worker.ts" ], "exclude": [ "test.ts", "**/*.spec.ts" ] }Y los comandos utilizados para iniciar angular en modo de producción ya que los trabajadores de servicio no trabajan en desarrollo:
ng build --prod http-server dist/appHemos agregado una lógica personalizada junto con Angular Service Worker mediante el uso de una secuencia de comandos intermediaria simple para cargar tanto la secuencia de comandos ngsw generada como nuestra propia secuencia de comandos personalizada. Esto funciona bien con el proceso de compilación de Angular.
@NgModule({ //... imports: [ ServiceWorkerModule.register('sw-master.js', { enabled: environment.production }), //... ], //... }); ... "assets": [ ... "src/manifest.json", "src/sw-custom.js", "src/sw-master.js" ],... importScripts('./ngsw-worker.js'); // generated by Angular build process importScripts('./sw-custom.js');Solo un ejemplo... lo estábamos haciendo para que los usuarios pudieran hacer clic en las notificaciones automáticas y ser dirigidos a una vista de aplicación en particular.
(function () { 'use strict'; self.addEventListener('notificationclick', (event) => { event.notification.close(); if (clients.openWindow && event.notification.data.url) { event.waitUntil(clients.openWindow(event.notification.data.url)); } }); }());Solo se permite registrar un trabajador de servicio por ámbito , por lo que no puede registrar más de un trabajador de servicio.
Puede manejar el almacenamiento en caché/sincronización de API y el almacenamiento en caché de activos de aplicaciones en un solo archivo de trabajador de servicio.