使用Javascript将数据/有效内容发送到Google Chrome浏览器推送通知 [英] Sending data / payload to the Google Chrome Push Notification with Javascript

问题描述

我正在研究Google Chrome推送通知，我正在尝试将有效内容发送给Google Chrome工作人员，但我不知道如何收到此有效内容。

我有一个API在我的数据库中创建并保存通知，我需要通过 https://android.googleapis.com/gcm/send 并在worker.js上接收

这是我的worker.js

  self.addEventListener（'push'，function（event）{
 var title ='Yay a message。'; 
 var body ='我们收到了推送信息'; 
 var icon ='/images/icon-192x192.png'; 
 var tag ='simple-push-demo-notification-tag'; 
 
 event.waitUntil（
 self.registration.showNotification（title，{
 body：body，
 icon：icon，
 tag：tag 
}）
）; 
}） ; 
  

这就是我如何打电话给GCM

  curl --headerAuthorization：key = AIzaSyDQjYDxeS9MM0LcJm3oR6B7MU7Ad2x2Vqc--headerContent-Type：application / jsonhttps://android.googleapis.com/gcm/send  - d {\ data\ ：{\ foo\ ：\ bar\ }，\ registration_ids\ ：[\ APA91bGqJpCmyCnSHLjY6STaBQEumz3eFY9r-2CHTtbsUMzBttq0crU3nEXzzU9TxNpsYeFmjA27urSaszKtA0WWC3yez1hhneLjbwJqlRdc_Yj1EiqLHluVwHB6V4FNdXdKb_gc_-7rbkYkypI3MtHpEaJbWsj6M5Pgs4nKqQ2R-WNho82mnRU\ ]}
  

我尝试获取 event.data


有没有人有任何想法或消息？

解决方案

要检索这些数据，您需要将event.data.text（）解析为JSON对象。我猜测，自从你试图让它起作用之后，更新了一些东西，但现在它已经可以工作了。红颜薄命！ 然而，由于我自己在寻找解决方案时已经发布了这篇文章，其他人可能会喜欢有效的答案。这里是：



  //推送消息事件处理程序
 self.addEventListener（'push'，function（event） {
 
 //如果为true，则事件包含数据
 if（event.data）{
 
 //需要解析为JSON格式
 / /  - 考虑event.data.text（）stringify（）
 //数据版本
 var payload = JSON.parse（event.data.text（））; 
 //对于那些喜欢记录
 console.log（有效负载）; 
 
 var title = payload.data.title; 
 var body = payload.data.body; 
 var icon ='./assets/icons/icon.ico'
 var tag ='notification-tag'; 
 
 //等到有效载荷被取出
 event.waitUntil（
 self.registration.showNotification（title，{
 body：body，
 icon：icon，
 tag：tag，
 data：{} / /将它保存在这里以备后面需要时使用
））
）; 
 
} else {
 console.log（Event does没有数据......）; 
} 
 
}）; //结束推送监听器
 
 //通知单击事件
 self.addEventListener（'notificationclick'，function（event）{
 console.log（Notification Clicked）; 
}）; //结束点击侦听器
  

就我个人而言，我将创建一个通用时髦，并且还将使用try / catch。我建议你也这样做。

I'm working on the Google Chrome Push Notification and I'm trying to send the payload to the google chrome worker but, I have no idea how I receive this payload.

I have an API to create and save the notifications in my database and I need send the values through the https://android.googleapis.com/gcm/send and receive on the worker.js

This is my worker.js

    self.addEventListener('push', function(event) {
      var title = 'Yay a message.';
      var body = 'We have received a push message.';
      var icon = '/images/icon-192x192.png';
      var tag = 'simple-push-demo-notification-tag';

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

And this is how I'm calling the GCM

curl --header "Authorization: key=AIzaSyDQjYDxeS9MM0LcJm3oR6B7MU7Ad2x2Vqc" --header  "Content-Type: application/json" https://android.googleapis.com/gcm/send -d "{ \"data\":{\"foo\":\"bar\"}, \"registration_ids\":[\"APA91bGqJpCmyCnSHLjY6STaBQEumz3eFY9r-2CHTtbsUMzBttq0crU3nEXzzU9TxNpsYeFmjA27urSaszKtA0WWC3yez1hhneLjbwJqlRdc_Yj1EiqLHluVwHB6V4FNdXdKb_gc_-7rbkYkypI3MtHpEaJbWsj6M5Pgs4nKqQ2R-WNho82mnRU\"]}"

I tried to get event.data but, this is undefined.

Does anyone have any idea or sugestion?

解决方案

To retrieve that data, you need to parse "event.data.text()" to a JSON object. I'm guessing something was updated since you tried to get this to work, but it works now. Unlucky!

However, since I made it to this post when searching for a solution myself, others would probably like a working answer. Here it is:

// Push message event handler
self.addEventListener('push', function(event) {

  // If true, the event holds data
  if(event.data){

    // Need to parse to JSON format
    // - Consider event.data.text() the "stringify()"
    //   version of the data
    var payload = JSON.parse(event.data.text());
    // For those of you who love logging
    console.log(payload); 

    var title = payload.data.title;
    var body  = payload.data.body;
    var icon  = './assets/icons/icon.ico'
    var tag   = 'notification-tag';

    // Wait until payload is fetched
    event.waitUntil(
      self.registration.showNotification(title, {
        body: body,
        icon: icon,
        tag: tag,
        data: {} // Keeping this here in case I need it later
      })
    );

  } else {
    console.log("Event does not have data...");
  }

}); // End push listener

// Notification Click event
self.addEventListener('notificationclick', function(event) {
  console.log("Notification Clicked");
}); // End click listener

Personally, I will be creating a "generic" notification in case my data is funky, and will also be using try/catch. I suggest doing the same.

这篇关于使用Javascript将数据/有效内容发送到Google Chrome浏览器推送通知的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！