利用浏览器web push api 进行离线通知,
不打开网站时推送通知,打开网站时不用推送通知
如果用户已经打开了网站,那我们可能就不需要推送了,那么针对于这种情况,我们应该怎么检测用户是否打开了网站呢
利用 cilents 提供的相关 API 获取,当前浏览器已经打开的页面 URLs。而且 URLs 只能是和你 SW 同域的。
Clients.matchAll()
返回一个 Client对象 数组类型的 Promise . options参数允许您控制返回的clients类型.
通过 Client 数组的长度。为0的话,说明没有打开网站,则发送通知。
self.addEventListener('push', function(event) {
clients.matchAll().then( windowClients => {
console.log(windowClients.length);
if (windowClients.length<1){ //说明没有打开网站
const msg = event.data.json()
const title = 'title';
const options = {
body:msg.body,
tag:msg.tag,
icon:'icon.png',
};
event.waitUntil(self.registration.showNotification(title, options));
}
})
});
https://developer.mozilla.org/zh-CN/docs/Web/API/Clients https://developer.mozilla.org/zh-CN/docs/Web/API/WindowClient https://villainhr.com/page/2017/01/08/Web%20%E6%8E%A8%E9%80%81%E6%8A%80%E6%9C%AF#%E6%A3%80%E6%B5%8B%E6%98%AF%E5%90%A6%E9%9C%80%E8%A6%81%E6%8E%A8%E9%80%81