Angular:将 TypeScript 用于 Service Worker (ServiceWorkerModule)

Question

是否可以使用 @angular/service-worker 注册用 TypeScript 编写的 ServiceWorker？ ?

当前注册服务 worker 在 中看起来像这样app.module.ts :

ServiceWorkerModule.register('ngsw-worker.js', {
  enabled: environment.production
})

是否可以以某种方式注册 ngsw-worker.ts ?

至少这对于 Angular 中的网络 worker 来说是可能的:

const worker = new Worker('../my-worker.worker', {
      type: 'module'
    });

我的worker.worker.ts

/// <reference lib="webworker" />

import {someMethod} from './some-method';

addEventListener('message', ({ data }) => {
  const response = `worker response to ${data}`;
  postMessage(response);
  someMethod();
});

任何帮助表示赞赏 - 谢谢

Answer 1

作为 Angular/TypeScript/Javascript 的初学者，我已经尝试了几天。
我的意图是使用 TypeScript 作为我的主要语言，将其用作 es5 转译器，因此我不必担心:

语言版本控制 (es5, es2015, ...)

捆绑

Lint

等

我想我有一个很好但很奇怪的解决方案，它使用了 worker-plugin，从 开始可用。 Angular8 .

例子:

worker /服务 worker .worker.ts

// Import angular serviceworker
importScripts("ngsw-worker.js");

// custom code
addEventListener("message", (data) => {
    console.log(data);
});

worker /服务 worker -config.ts

import { environment } from "../../environments/environment";

export let generatedServiceWorkerUrl: string = null;
(function generateUrl(): void {
    // Override the real Worker with a stub
    // to return the filename, which will be generated/replaced by the worker-plugin.
    // @ts-ignore
    Worker = class WorkerStub {
        constructor(public stringUrl: string, public options?: WorkerOptions) {}
    };

    const worker = new Worker("./service-worker.worker", { type: "module" }) as any;
    generatedServiceWorkerUrl = worker.stringUrl;
})();

export const serviceWorkerConfig = {
    enabled: environment.production,
    serviceWorkerUrl: generatedServiceWorkerUrl
};

app.module.ts

import { serviceWorkerConfig  } from "./workers/service-worker-config";

@NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [
        [...],
        ServiceWorkerModule.register(serviceWorkerConfig.serviceWorkerUrl, { enabled: serviceWorkerConfig.enabled })
    ],
    providers: [...],
    bootstrap: [AppComponent]
})
export class AppModule {}