使用 Google 云消息传递和服务工作者的桌面推送通知

Posted 2023-02-24

【中文标题】使用 Google 云消息传递和服务工作者的桌面推送通知

【英文标题】：Desktop push notification using Google cloud messaging and service worker

【发布时间】：2016-11-14 19:27:46

【问题描述】：

我想使用谷歌云消息向我的所有桌面用户发送推送通知

我成功完成了以下步骤

在 service worker 中初始化 在 Google Developers Console 上创建了一个项目 添加了清单 使用 php CURL 发送

这是我的 CURL 命令

$url = 'https://android.googleapis.com/gcm/send';
$msg="hi";
$data = array('title'=> $msg,'message'=>'Hello');
$regids= // added regids;
$fields = array('to' => $regids,'data' => $data);
$headers = array( 'Authorization: My auth key','Content-Type: application/json');

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($fields));

print_r(json_encode($fields));
$result=curl_exec($ch);
echo $result; 
if($result==FALSE)

    die('Curl Failed');

curl_close($ch);

一切正常，我可以使用以下代码显示默认通知

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'
    ));
);

但我需要的是显示我通过 CURL 命令发送的通知消息（在应用程序中我们可以轻松地做到这一点）

我得到了以下用于接收推送通知的代码（google）

self.addEventListener('push', function(event)   
  // Since there is no payload data with the first version  
  // of push messages, we'll grab some data from  
  // an API and use it to populate a notification  
  event.waitUntil(  
    fetch(SOME_API_ENDPOINT).then(function(response)   
      if (response.status !== 200)   
        // Either show a message to the user explaining the error  
        // or enter a generic message and handle the
        // onnotificationclick event to direct the user to a web page  
        console.log('Looks like there was a problem. Status Code: ' + response.status);  
        throw new Error();  
      

      // Examine the text in the response  
      return response.json().then(function(data)   
        if (data.error || !data.notification)   
          console.error('The API returned an error.', data.error);  
          throw new Error();  
          

        var title = data.notification.title;  
        var message = data.notification.message;  
        var icon = data.notification.icon;  
        var notificationTag = data.notification.tag;

        return self.registration.showNotification(title,   
          body: message,  
          icon: icon,  
          tag: notificationTag  
        );  
      );  
    ).catch(function(err)   
      console.error('Unable to retrieve data', err);

      var title = 'An error occurred';
      var message = 'We were unable to get the information for this push message';  
      var icon = URL_TO_DEFAULT_ICON;  
      var notificationTag = 'notification-error';  
      return self.registration.showNotification(title,   
          body: message,  
          icon: icon,  
          tag: notificationTag  
        );  
    )  
  );  
);

它总是显示

我们无法获取此推送消息的信息

该代码中提到的 SOME_API_ENDPOINT 是什么？ 我尝试使用 https://android.googleapis.com/gcm/send 而不是端点，也尝试使用服务工作者中的用户端点但不工作。

非常感谢任何帮助

【问题讨论】：

我认为你不能使用 chrome 桌面通知发送消息文本你可以做的是你可以为推送添加一个事件监听器，然后当你收到推送时你可以点击一些返回的 url使用 chrome 获取 fetch('your url here') 的消息。你可以在这里查看示例代码：jsfiddle.net/saineshmamgain/j4L2jfns

这里的 SOME_API_ENDPOINT 还建议了一个 Web 服务，它将返回消息图像、标题等。它可以在您的服务器上。您可以在 url 中传递一些唯一的 id，如果有多个网站，您可以通过它来识别网站。您可以从后端管理消息。

@Codezilla：谢谢，我会检查一下

【参考方案1】：

据我所知，SOME_API_ENDPOINT 提到的是一个 API 后端，用于简化客户端对来自其他应用程序的数据的访问。

如Overview of Cloud Endpoints 中所述，

Google Cloud Endpoints 包含工具、库和功能，可让您从 App Engine 应用（称为 API 后端）生成 API 和客户端库，以简化客户端对来自其他应用的数据的访问。 Endpoints 可以更轻松地为 Web 客户端和移动客户端（例如 Android 或 Apple 的 ios）创建 Web 后端。

关于端点使用的更多信息在Best practices for Google Cloud Endpoints 中有完整的讨论，例如，如何创建您的 App Engine 后端。

您也可以使用此 SO 帖子 - Google endpoints and Google Cloud Messaging 作为您的参考资料之一，这可以提供帮助。

【讨论】：

您好，感谢您的回复。这很有帮助，但它完全适用于 Android 开发人员。我希望在桌面上使用 service worker 和在 javascript 或 jQuery 中具有相同的功能