Angular：将TypeScript用于Service Worker（ServiceWorkerModule） [英] Angular: Using TypeScript for Service Worker (ServiceWorkerModule)

问题描述

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

Is it possible to register a ServiceWorker written in TypeScript with @angular/service-worker?

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

currently registering a service worker looks like this in app.module.ts:

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

是否可以通过某种方式注册 ngsw-worker.ts ？

Is it somehow possible to register a ngsw-worker.ts?

至少可以通过网络实现

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();
});

感谢任何帮助-谢谢

推荐答案

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

As a beginner with Angular/TypeScript/Javascript I've tried the same for a few days. My intents were to use TypeScript as my main language to use it as an es5 transpiler, so I don't have to worry about:

• 语言版本控制（es5，es2015，...）


• 捆绑


• 棉绒


• 等

• language versioning (es5, es2015, ...)
• bundling
• linting
• etc

我认为我有一个不错的解决方案，但使用了worker插件，可从开始使用Angular8 。

And I think I've got a nice, yet weird solution with uses the worker-plugin, available starting with 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 {}

这篇关于Angular：将TypeScript用于Service Worker（ServiceWorkerModule）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！