Angular：将 TypeScript 用于 Service Worker (ServiceWorkerModule)

Question

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

当前在app.module.ts 中注册 service worker 如下所示：

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

是否有可能以某种方式注册一个ngsw-worker.ts？

至少这对于 Angular 中的网络工作者来说是可能的：

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, ...)
• 捆绑
• 掉毛
• 等等

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

例子：

工人/服务工人.worker.ts

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

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

工人/服务工人-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 {}

Answer 2

当然，可以用 typescript 重写 js 中的任何内容。但要在浏览器中运行它，您必须将其编译为 JavaScript。因为，浏览器目前无法解释/理解打字稿。

为此，您可以使用 typescript 命令：tsc。

在 package.json 中，创建如下脚本命令：-

"scripts": {
    "compile-to-ts": "tsc my-service-worker.ts"
}

现在运行上面的命令：-

npm run compile-to-ts

它将把你的 typescript 文件编译成 javascript，并将生成的文件放置在基于 tsconfig 文件的目录中。

更新：您还可以从此处使用服务工作者的类型定义 。您可以利用它来提高 Service Worker TypeScript 代码中的类型安全性，并避免任何与 TypeScript 相关的错误（如果有）。