Javascript Web推送服务的局部缺陷

不确定我的服务人员实现有什么问题

理想情况下，我面临的问题要么是“网站已在后台刷新”，要么是这个问题

我以前在代码中没有遇到过这个问题，但是一旦推送通知订户数达到600左右，就会开始对每个订户造成问题

var init={method:'GET'，
标题：{
“内容类型”：“应用程序/javascript”
},
模式：“cors”，
缓存：“无缓存”
};
var工作者=自我；
var_端点=“”；
fetch（_端点，init）.then（函数（响应）{
返回response.json（）；
}).then（功能（数据）{
worker.addEventListener（'push'，函数（事件）{
event.waitill(
worker.registration.showNotification（data.title{
body:data.body，
图标：data.icon，
requireInteraction:正确
})
);
});
如果（data.link！=''）{
worker.addEventListener（'notificationclick'，函数（事件）{
event.notification.close（）；
var url=data.link；
event.waitill(
客户。匹配球({
键入：“窗口”
})
.then（函数（WindowClient）{
对于（var i=0；i});经常发生这种情况的原因是返回到
事件的承诺。waitill（）
没有通过显示通知来解析

可能显示默认“网站已在后台刷新”通知的示例：

function handlePush() {
  // BAD: The fetch's promise isn't returned
  fetch('/some/api')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    // BAD: the showNotification promise isn't returned
    showNotification(data.title, {body: data.body});
  });
}

self.addEventListener(function(event) {
   event.waitUntil(handlePush());
});

相反，您可以这样写：

function handlePush() {
  // GOOD
  return fetch('/some/api')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    // GOOD
    return showNotification(data.title, {body: data.body});
  });
}

self.addEventListener(function(event) {
   const myNotificationPromise = handlePush();
   event.waitUntil(myNotificationPromise);
});

这一点非常重要的原因是浏览器会等待传递到event.waitUntil中的承诺被解析/完成，以便知道服务工作者需要保持活动状态并运行

当承诺解决推送事件时，chrome将检查通知是否已显示，并且它是否属于竞争条件/特定情况，即chrome是否显示此通知。最好的办法是确保你有一个正确的承诺链

我在这篇文章中对承诺做了一些额外的注释（参见：'侧面任务：承诺'）