Angular：为 Service Worker 使用 TypeScript (ServiceWorkerModule)

Question

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

当前在 app.module.ts 中注册服务工作者如下所示：

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

是否可以注册ngsw-worker.ts？

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

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

my-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 开始可用。

例子：

workers/service-worker.worker.ts

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

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

workers/service-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 {}

Answer 2

当然可以在打字稿中重写 js 中的任何内容。但是要在浏览器中运行它，你必须将它编译成 JavaScript。因为，浏览器目前还不能解释/理解打字稿。

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

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

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

现在运行上面的命令：-

npm run compile-to-ts

它将您的打字稿文件编译成javascript并将生成的文件放在基于tsconfig文件的目录中。

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