与 Angular.js 控制器通信 service-worker
Posted
技术标签:
【中文标题】与 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;
);
)
);
);
【讨论】:
好家伙!!以上是关于与 Angular.js 控制器通信 service-worker的主要内容,如果未能解决你的问题,请参考以下文章
如何将 Angular js 集成到 grails 2.3.4 中?