importar - usando WorkerGlobalScope.importScripts() en typescript
Estoy trabajando en un service-worker para aplicaciones web (Angular). Este service worker está hecho en Typescript. La aplicación web debe servir el service-worker y un archivo configuration.js separado para configurar el service-worker precompilado.
Debido a que la configuración es única para cada aplicación web, se requiere que la configuración no se incluya directamente en el service-worker. Quiero usar el mismo service-worker para múltiples aplicaciones web.
Usando WorkerGlobalScope.importScripts() es posible importar recursos externos en el alcance global de un service worker. ¿Pero cómo funcionará esto con TypeScript?
dado el siguiente código, ¿cómo usaría uno importScripts() en TypeScript
interface IConfiguration {
name: string;
}
let configuration: IConfiguration;
const initialize = (service: ServiceWorkerGlobalScope): void => {
service.addEventListener("install", (event) => {
console.log("Installing Service-Worker");
service.importScripts("SWConfiguration.js");
configuration = new service.SWConfiguration() // <-- This won't compile
return service.skipWaiting();
});
service.addEventListener("activate", (event) => {
console.log("Activating Service-Worker");
event.waitUntil(service.clients.claim());
});
service.addEventListener("fetch", (event) => {
// Do something with the configuration
});
};
initialize(self as any);
SWConfiguration.js se vería algo así:
public class SWConfiguration {
name = "myName";
}
¿Cómo se importaría una configuración que se encuentra en un archivo diferente?
Respuesta #1
Después de muchas búsquedas/investigaciones adicionales, no he descubierto nada, creo que no es posible en este momento.
He investigado el funcionamiento del Service-Worker de Angular y cómo carga su configuración (la cual se configura usando un formato JSON). Este service-worker simplemente intentará obtener el archivo desde /ngsw.json y escribir la configuración resultante en el IndexedDB. También realizan algunas comprobaciones de versión usando un hash. El configurador de SW de Angular, puedes ver la solicitud en la línea 693;
this.safeFetch(this.adapter.newRequest('ngsw.json?ngsw-cache-bust=' + Math.random()));
Aunque esta es una solución más complicada, es una que ha demostrado funcionar.
