I'm currently developing a service-worker for (Angular) web-apps using Typescript. The idea is to have the service worker serve alongside a separate configuration.js file that can be used to customize it for each specific web-app.
Since the configuration needs to be tailored for each web-app, we cannot directly include it in the service worker itself. The goal is to have a reusable service worker that can be applied to multiple web-apps.
I am aware that with WorkerGlobalScope.importScripts(), external resources can be imported into a service worker's global scope. However, I am curious about how this process would work with Typescript.
Given the code snippet below, how can importScripts() be used effectively in 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);
The SWConfiguration.js file would contain:
public class SWConfiguration {
name = "myName";
}
How can one successfully import and use a configuration served from a separate file?