我可以生成和配置由angular cli生成的service worker(通过配置文件),没有问题。然而,似乎没有关于如何添加自定义代码ngsw-worker.js的文档,因为我想添加推送通知,发布消息等功能。想插入ngsw-worker.js
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
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
i1icjdpr3#
从Angular 8开始,我找到了一种使用worker-plugin编译自定义ServiceWorker代码的方法:先决条件:
参见:Angular :将TypeScript用于Service Worker(ServiceWorkerModule)
3条答案
按热度按时间bkhjykvo1#
您只需要创建自己的服务工作者文件。
首先,让我们从创建我们自己的非常基本的服务工作者开始。
太棒了,现在在您的App模块中更改service worker注册
您还需要将service worker添加到angular.json文件中的资产
太好了!现在你都设置好了,但是我们刚刚丢失了angular service worker提供的所有东西!等等,我们还没说完呢。回到你的客户服务工作人员和改变它了
好了!现在一切都正常了,angular cli接受推送通知,我们可以向通知事件添加自己的绒毛了!
https://medium.com/@smarth55/extending-the-angular-cli-service-worker-44bfc205894c
hivapdat2#
您可以在应用中订阅消息:
看看这篇文章:https://medium.com/google-developer-experts/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-2-practice-3221471269a1
i1icjdpr3#
从Angular 8开始,我找到了一种使用worker-plugin编译自定义ServiceWorker代码的方法:
先决条件:
参见:Angular :将TypeScript用于Service Worker(ServiceWorkerModule)