与 Angular.js 控制器通信 service-worker

Posted 2023-02-24

【中文标题】与 Angular.js 控制器通信 service-worker

【英文标题】：To communicate service-worker with Angular.js controller

【发布时间】：2016-06-15 11:28:22

【问题描述】：

我正在我的应用中实现推送通知。我让服务人员在我的浏览器 (Chrome) 中显示通知。

现在，我需要调用一个位于 Angular 控制器中的函数。我试图在我的服务人员中进行这样的活动。

self.addEventListener('push', function(event) 
 event.waitUntil(
  fetch(self.CONTENT_URL, headers: headers)
  .then(function(response) 
    if (response.status !== 200) 

    
    return response.json().then(function(data) 

      /* some stuff*/

      document.dispatchEvent('myEvent');

      return notification;
    );
  )
 );
);

在此事件中，我处理通知并尝试使用事件。

在控制器中我写了下面的代码

document.addEventListener('myEvent', function()
 console.log("im here");
);

但是浏览器不显示console.log()

有完成这项任务的想法吗？非常感谢！

【问题讨论】：

阅读 dispatchEvent() 的文档。您没有事件对象。尝试在控制台中简单地运行该事件代码将看到抛出的错误。可能想改用角度事件

是的，我想改用角度事件，但服务人员不是角度文件

【参考方案1】：

这是我为 Angular（或窗口/文档端的任何内容）与 Service Worker 之间的通信所做的

---

在您的 Angular 应用程序中的某个位置。

if ('serviceWorker' in navigator) 

  // ensure service worker is ready
  navigator.serviceWorker.ready.then(function (reg) 

    // PING to service worker, later we will use this ping to identifies our client.
    navigator.serviceWorker.controller.postMessage("ping");

    // listening for messages from service worker
    navigator.serviceWorker.addEventListener('message', function (event) 
      var messageFromSW = event.data;
      console.log("message from SW: " + messageFromSW);
      // you can also send a stringified JSON and then do a JSON.parse() here.
    );
  

---

在您的服务人员开始时

let angularClient;
self.addEventListener('message', event => 
  // if message is a "ping" string, 
  // we store the client sent the message into angularClient variable
  if (event.data == "ping")  
    angularClient = event.source;  
  
);

---

当您收到push

// In your push stuff
self.addEventListener('push', function(event) 
 event.waitUntil(
  fetch(self.CONTENT_URL, headers: headers)
  .then(function(response) 
    if (response.status !== 200) 

    
    return response.json().then(function(data) 

      /* some stuff*/

      angularClient.postMessage('"data": "you can send a stringified JSON here then parse it on the client"');

      return notification;
    );
  )
 );
);

【讨论】：

好家伙！！