Chrome桌面通知不会显示该消息 [英] Chrome Desktop Notification doesn't display the message

问题描述

我正在开发支持桌面通知的网站。我正在利用GCM和Azure通知中心向最终用户发送推送消息。我遵循这个 codelab 教程。在测试时，我发现推送通知确实显示在屏幕上，但是我写入有效内容中的消息未显示在通知中。所以我再次通过了codelab，他们在 showNotification 方法中提到了一个 body 键。

$ b

代码

  self.addEventListener（'push' ，函数（事件）{
 console.log（'Push message'，event）; 
 var title ='推送消息'; 
 event.waitUntil（
 self.registration。 showNotification（title，{
 body：'The Message'，
 icon：'images / icon.png'，
 tag：'my-tag'
}））; 
}）; 
  

他们在 showNotification

解决方案

Chrome尚不支持推送有效内容，现在只能在Firefox中使用它们。 p>



解决方法是在收到通知后从服务器请求负载（使用 fetch ）。

类似这样的：

  self.addEventListener（'push'，function（event ）{
 event.waitUntil（
 fetch（'./ getPayload？someUniqueID ='+ someUniqueID）
 .then（function（response）{
 return response.text（）; 
}）
 .then（function（payload）{
 self.registration.showNotification（'Title'，{
 body：payload，
}）; 
}）
）; 
}）; 
  

显然，响应也可以在JSON中，以便您可以指定所有内容（标题，正文，图标等）。

你可以在这里看到一个例子： https://serviceworke.rs/push-get-payload.html 。

另一种可能的解决方案是在使用有效载荷时可用并使用 fetch 否则。通过这种方式，您可以利用Firefox中的功能（以及Chrome一次可用），并为尚不支持有效负载的浏览器提供后备功能。
在 Mercurius 。

I'm developing a website that supports desktop notifications. I'm utilizing GCM and Azure Notification Hub to send push messages to end users. I followed this codelab tutorial. When testing I have found that the push notifications do get displayed on the screen, but the message that I have written in the payload is not shown in the notification. So I again went through the codelab, and they have mentioned a body key in the showNotification method.

Code

self.addEventListener('push', function(event) {
    console.log('Push message', event);
    var title = 'Push message';
    event.waitUntil(
        self.registration.showNotification(title, {
            body: 'The Message',
            icon: 'images/icon.png',
            tag: 'my-tag'
    }));
});

They have hardcoded "The Message" in the showNotification function. I don't want to hardcode my message in the function since my message won't be the same always and will vary time to time. I want to know how to make the function take the message in payload and display it. Thanks in advance!

解决方案

Chrome doesn't support push payloads yet, for now you could use them only in Firefox.

The solution is to request the payload from the server (using fetch) once you get a notification.

Something like this:

self.addEventListener('push', function(event) {
  event.waitUntil(
    fetch('./getPayload?someUniqueID=' + someUniqueID)
    .then(function(response) {
      return response.text();
    })
    .then(function(payload) {
      self.registration.showNotification('Title', {
        body: payload,
      });
    })
  );
});

Obviously, the response can also be in JSON, so that you can specify everything (title, body, icon, etc.).

You can see an example here: https://serviceworke.rs/push-get-payload.html.

Another possible solution is to use the payload when it's available and use fetch otherwise. This way you can take advantage of the feature in Firefox (and in Chrome once available), and have a fallback for browsers that don't support payloads yet. There's an example in Mercurius.

这篇关于Chrome桌面通知不会显示该消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！