如何將自定義代碼添加到 Angular cli 生成的 Service Worker

Question

我可以毫無問題地生成和配置由 angular cli 生成的 service worker（通過配置文件）。 然而，似乎沒有關於如何在 ngsw-worker.js 中添加自定義代碼的文檔，因為我想添加推送通知、發布消息等功能。想插入 ngsw-worker.js

Answer 1

您可以訂閱應用中的消息：

import { SwPush } from '@angular/service-worker';

this.SwPush.messages.subscribe(message => {
    console.log('[App] Push message received', message)
}

查看這篇文章： https : //medium.com/google-developer-experts/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-2-practice-3221471269a1

Answer 2

您只需要創建自己的 Service Worker 文件。

首先，讓我們從創建我們自己的非常基本的 service worker 開始。

//my-service-worker.js

self.addEventListener('notificationclick', (event) => {
  console.log('notification clicked!')
});

太棒了，現在在您的 App 模塊中更改 Service Worker 注冊

//app.module.ts

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

您還需要將您的服務工作者添加到您的 angular.json 文件中的資產中

//angular.json

  "assets": {
  ...,
  "src/my-service-worker.js"
}

太棒了！ 現在，你都設置，但我們只是失去了所有的角服務人員提供的東西！ 等等，我們還沒有完成。 返回您的自定義服務人員並進行更改

//my-service-worker.js

importScripts('./ngsw-worker.js');
self.addEventListener('notificationclick', (event) => {
  console.log('notification clicked!')
});

好吧！ 現在我們一切正常，angular cli 接受推送通知，我們可以將我們自己的絨毛添加到通知事件中！

https://medium.com/@smarth55/extending-the-angular-cli-service-worker-44bfc205894c

Answer 3

從Angular8開始，我找到了一種使用worker-plugin來編譯自定義 ServiceWorker 代碼的方法：

先決條件：

• 角8
• 在 Angular 中啟用 Service Workers ( "serviceWorker": true等)
• 在 Angular 中啟用 WebWorkers ( "webWorkerTsConfig": "src/tsconfig.workers.json" )

請參閱： Angular：為 Service Worker 使用 TypeScript (ServiceWorkerModule)