javascript 如何将自定义代码添加到Angular cli生成的service worker

vx6bjr1n  于 2023-06-04  发布在  Java
关注(0)|答案(3)|浏览(155)

我可以生成和配置由angular cli生成的service worker(通过配置文件),没有问题。然而,似乎没有关于如何添加自定义代码ngsw-worker.js的文档,因为我想添加推送通知,发布消息等功能。想插入ngsw-worker.js

bkhjykvo

bkhjykvo1#

您只需要创建自己的服务工作者文件。

首先,让我们从创建我们自己的非常基本的服务工作者开始

//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 })

您还需要将service worker添加到angular.json文件中的资产

//angular.json

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

太好了!现在你都设置好了,但是我们刚刚丢失了angular service worker提供的所有东西!等等,我们还没说完呢。回到你的客户服务工作人员和改变它了

//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

hivapdat

hivapdat2#

您可以在应用中订阅消息:

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

i1icjdpr

i1icjdpr3#

Angular 8开始,我找到了一种使用worker-plugin编译自定义ServiceWorker代码的方法:
先决条件:

  • Angular8+
  • 在Angular中启用Service Workers(“serviceWorker”:true,etc)
  • 在Angular中启用WebWorkers(“webWorkerTsConfig”:“tsconfig.workers.json”

参见:Angular :将TypeScript用于Service Worker(ServiceWorkerModule)

相关问题