网络应用程序显示“此网站已在后台更新”

Question

后台可以很好地接收消息，但前台收不到消息，只是显示“该网站已在后台更新”。

我使用了 fcm 文档中的代码示例。

Index.html（跳过初始化脚本）

messaging.onMessage(function(payload) {
   console.log('Message received. ', payload);
   notificationTitle = payload.data.title;
   notificationOptions = {
     body: payload.data.body,
     icon: payload.data.icon
   };

   var notification = new Notification(notificationTitle,notificationOptions); });

sw.js

messaging.setBackgroundMessageHandler(function(payload) {

  const notificationTitle = payload.data.title;
  const notificationOptions = {
    body: payload.data.body,
    icon: payload.data.icon,
    badge: payload.data.badge
  };

  return self.registration.showNotification(notificationTitle,
    notificationOptions);
});

有人可以帮忙吗？谢谢！

Answer 1

如果您想在应用程序中显示来自 Service Worker 的消息，请使用以下命令。

在您的 sw.js 中，这就是您与用户/应用程序实例对话的方式：

self.clients.matchAll().then(function(clients) {
    clients.forEach(function(client) {
        client.postMessage({
            msg: "cached: " + event.request.url
        });
    });
});   

然后在您的index.html脚本中，这就是您处理消息的方式：

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, function(err) {
            console.log('ServiceWorker registration failed: ', err);
        });
    });
}
navigator.serviceWorker.addEventListener('message', function(event) {
  console.log("service worker " + event.data.msg);
  //you can do whatever you want now that you have this data in script.
});

Answer 2

这个话题已经很老了，但我会在这里留下我的解决方案，以防有人遇到这个问题。

这个问题的解释可以在这篇文章中找到https://developers.google.com/web/fundamentals/push-notifications/handling-messages#wait_until

简而言之，在解决由

self.registration.showNotification

创建的 Promise 之前，不应执行推送事件。

使用官方 fcm

docs 提供的方式

onBackgroundMessage揭示了同样的问题。要理解为什么我们可以查看 sw-listeners.ts

 中 

onPush 函数的声明以及该函数在 register.ts 文件中的实际调用方式。您可以看到 onPush

 被传递给 

e.waitUntil

，这意味着推送事件在 

onPush

 返回的 Promise 之前不会得到解决：

self.addEventListener('push', e => {
    e.waitUntil(onPush(e, messaging as MessagingService));
});

但是，当您查看

onBackgroundMessageHandler

 内部如何调用 

onPush

 时，您会发现该调用不会返回 Promise 或其他内容。

我得出的解决方案是这样的：

self.addEventListener('push', function (event) {
    event.waitUntil(
        self.clients
            .matchAll({type: 'window', includeUncontrolled: true})
            .then(windowClients => {
                let visibleClients = windowClients.some(client => client.visibilityState === 'visible' &&
                    // Ignore chrome-extension clients as that matches the background pages of extensions, which
                    // are always considered visible for some reason.
                    !client.url.startsWith('chrome-extension://'));

                if (!visibleClients) {
                    event.waitUntil(
                        self.registration.showNotification(data.data.title)
                    );
                }
            })
    );
});

检查客户端的可见性仅提供对后台消息的处理；此检查取自库的

onPush

 函数。

Answer 3

当您设置推送通知消息的格式时，您的消息应该有一个“通知”字段。否则，Service Worker 只会将该消息视为更新。

 const message = {
    token,
    notification: {
        title: 'Your title here',
        body: `Message here`,
    },
    data: {
        key: value...
    },
};

await admin.messaging().send(message);