Chrome 推送通知：本站已在后台更新答案

【问题标题】：Chrome Push Notification: This site has been updated in the backgroundChrome 推送通知：本站已在后台更新
【发布时间】：2015-09-15 12:06:13
【问题描述】：

在实现 chrome 推送通知时，我们正在从服务器获取最新更改。这样做时，服务人员会显示带有消息的额外通知

本站已在后台更新

已经尝试过这里发布的建议 https://disqus.com/home/discussion/html5rocks/push_notifications_on_the_open_web/
但直到现在找不到任何有用的东西。有什么建议吗？

【问题讨论】：

标签： google-chrome push-notification web-push push-api

【解决方案1】：

我遇到了同样的问题，但经过长时间的研究，我知道这是因为 PUSH 事件和 self.registration.showNotification() 之间发生了延迟。我只是在 self.registration.showNotification() 之前错过了 return 关键字

所以你需要实现以下代码结构来获取通知：

var APILINK = "https://xxxx.com";
 self.addEventListener('push', function(event) {
      event.waitUntil(
          fetch(APILINK).then(function(response) {

        return response.json().then(function(data) {
                  console.log(data);
                  var title = data.title;
                  var body = data.message;
                  var icon = data.image;
                  var tag = 'temp-tag';
                  var urlOpen = data.URL;

                return  self.registration.showNotification(title, {
                      body: body,
                      icon: icon,
                      tag: tag
                  })
              });
          })
      );
  });

【讨论】：

对于遇到此问题的其他任何人，需要返回的不仅仅是“self.registration.showNotification”。每个嵌套函数都需要返回一个 Promise。我通过这篇文章发现了这一点：stackoverflow.com/a/33187502/1451657
@Yogendra：所以我需要为内容制作一个 API？
@Mehul Tandale，是的，您需要为内容创建一个 API，以便在通知滑块中显示。但现在 chrome 也开始提供任意内容（有效负载），您可以进一步探索。
感谢@Yogendra 的澄清
我有一个简化的答案，请看下面。

【解决方案2】：

我过去遇到过这个问题。根据我的经验，原因通常是以下三个问题之一：

您没有显示通知以响应推送信息。每次在设备上收到推送消息时，当您完成了事件的处理，通知必须保持可见设备。这是由于订阅了userVisibleOnly: true 选项（尽管请注意这不是可选的，并且没有设置它将导致订阅失败。
您没有调用event.waitUntil() 来响应处理事件。应将一个 Promise 传递给此函数，以向浏览器指示它应等待该 Promise 解决，然后再检查是否显示通知。
由于某种原因，您在显示通知之前解决了传递给event.waitUntil 的承诺。请注意，self.registration.showNotification 是一个 Promise 和异步，因此您应该确保它在传递给 event.waitUntil 的 Promise 解析之前已经解析。

【讨论】：

【解决方案3】：

通常，一旦您收到来自 GCM（Google Cloud Messaging）的推送消息，您就必须在浏览器中显示推送通知。这里的第三点提到了这一点：

https://developers.google.com/web/updates/2015/03/push-notificatons-on-the-open-web#what-are-the-limitations-of-push-messaging-in-chrome-42

因此，您可能会以某种方式跳过推送通知，尽管您收到了来自 GCM 的推送消息，并且您收到了带有一些默认消息的推送通知，例如“此站点已在后台更新”。

【讨论】：

GCM 代表什么？
请注意，实际上您必须在解决您传递给 event.waitUntil() 的承诺之前显示通知。本质上，通过传递一个承诺，你是在说“当这个问题解决时我已经完成了，当时可以随意验证我向我的用户显示了通知”
换句话说，正如@Yogendra 的回答中提到的，您需要返回显示通知，以便在解决承诺之前解决通知
那个链接是旧的，检查我的答案（2018）
此答案对 firebase(FCM) 通知也有效。

【解决方案4】：

这行得通，只需复制/粘贴/修改。用下面的代码替换“return self.registration.showNotification()”。第一部分是处理通知，第二部分是处理通知的点击。但不要感谢我，除非你感谢我在谷歌上搜索答案的时间。

说真的，所有感谢 developers.google.com developers.google.comMatt Gaunt

self.addEventListener('push', function(event) {
  console.log('Received a push message', event);

  var title = 'Yay a message.';
  var body = 'We have received a push message.';
  var icon = 'YOUR_ICON';
  var tag = 'simple-push-demo-notification-tag';
  var data = {
    doge: {
        wow: 'such amaze notification data'
    }
  };

  event.waitUntil(
    self.registration.showNotification(title, {
      body: body,
      icon: icon,
      tag: tag,
      data: data
    })
  );
});

self.addEventListener('notificationclick', function(event) {
  var doge = event.notification.data.doge;
  console.log(doge.wow);
});

【讨论】：

【解决方案5】：

我试图理解为什么 Chrome 会要求服务人员在收到推送通知时必须显示通知。我相信原因是即使在用户关闭网站的选项卡后，推送通知服务人员也会继续在后台运行。所以为了防止网站在后台偷偷运行代码，Chrome 要求它们显示一些信息。

What are the limitations of push messaging in Chrome?

...

您必须在收到推送消息时显示通知。

...

和

Why not use Web Sockets or Server-Sent Events (EventSource)?

使用推送消息的好处是，即使你的页面关闭了，你的 Service Worker 也会被唤醒并能够显示通知。当页面或浏览器关闭时，Web Sockets 和 EventSource 的连接也会关闭。

【讨论】：

Chrome（桌面）启动时是否所有注册的通知服务工作者都重新启动？
这对我来说很有意义

【解决方案6】：

如果您在收到推送通知事件时需要发生更多事情，showNotification() 将返回 Promise。所以你可以使用经典的链接。

const itsGonnaBeLegendary = new Promise((resolve, reject) => {
    self.registration.showNotification(title, options)
        .then(() => {
            console.log("other stuff to do");

            resolve();
        });
});

event.waitUntil(itsGonnaBeLegendary);

【讨论】：