Uso de Angular para construir aplicaciones web progresivas (PWA)
Angular es una gran opción para desarrollar PWA. El soporte para Service Workers se ha incluido en Angular CLI desde la versión 1.7.0,
para comenzar a desarrollar rápidamente aplicaciones PWA . Service Worker se puede configurar en una aplicación angular utilizando un archivo de configuración json que proporciona muchas opciones y funciones. Aunque esto suena genial, hay un gran inconveniente en el uso de Angular Service Worker: su lógica no puede extenderse de manera estándar.
¿Por qué podría necesitar ampliar las capacidades de NGSW?
En mi caso, necesitaba registrar un detector de eventos de notificación de clic personalizado que manejaría la acción de clic de una notificación push. Debo admitir que Angular Service Worker hace un gran trabajo al recibir y mostrar notificaciones push: esta parte es manejada por el archivo ngsw-worker.js sin ningún esfuerzo por parte del desarrollador. Y al principio, parecía que la única forma de proporcionar la lógica que necesitaba era hacer cambios en el código del archivo ngsw-worker.js generado al compilar la aplicación. Pero me di cuenta de que este método es malo: debe ser compatible y revisado cada vez que realice algún cambio en el archivo de configuración ngsw. Afortunadamente, resultó que el problema se resolvió fácilmente ingresando dos archivos adicionales.
Solución
Comencemos creando dos archivos js adicionales en la carpeta
/ src .
sw-custom.js: archivo que contiene el detector de eventos:(function () { 'use strict'; self.addEventListener('notificationclick', (event) => { event.notification.close(); console.log('notification details: ', event.notification); }); }());
sw-master.js es un archivo que combina NGSW con nuestra propia lógica: importScripts('./ngsw-worker.js'); importScripts('./sw-custom.js');
Registro de bienes
Al crear nuevos archivos de script, debemos asegurarnos de que Angular los tenga en cuenta durante la compilación. Desde un punto de vista técnico, estos son activos similares al archivo favicon.ico creado por la CLI angular al crear un proyecto. Podemos registrar nuestros recursos adicionales en el archivo angular.json (.angular-cli.json para versiones anteriores de Angular):
{ ..., "assets": [ "src/favicon.ico", "src/assets", "src/manifest.json", "src/sw-master.js", "src/sw-reminders.js" ], ... }
Volver a registrar el script de Service Worker
El paso final es cambiar el punto de entrada al Service Worker registrado por Angular durante el inicio de la aplicación. Para hacer esto, necesitamos cambiar la entrada ServiceWorkerModule.register en app.module.ts de la siguiente manera:
ServiceWorkerModule.register('/sw-master.js', { enabled: environment.production })
Resumir
Eso es todo, después del ensamblaje de producción de la aplicación, nuestros nuevos archivos de script se copiarán en la carpeta
/ dist y la aplicación los usará al registrar ServiceWorker. Si desea ver más, también puede consultar mi perfil de GitHub, donde
publiqué una aplicación angular de ejemplo con ServiceWorker complementada por una lógica personalizada.