如何在Chrome中发送推送通知（Progressive Web Apps） [英] How to send push notifications in Chrome(Progressive Web Apps)

问题描述

请解释如何使用XHR和Javascript进行推送通知。或者是否有其他方式在渐进式网络应用中发送推送通知。我已经创建了curl命令，当我在终端推送通知中执行它，但是如何在按钮单击时执行它？

以下是我的cURL命令： -

  curl --headerAuthorization：key = AIzaSxUdg--header Content-Type：application / jsonhttps：// android。 googleapis.com/gcm/send -d{\registration_ids \：[\cxA-dUj8BTs：APAvGlCYW\]}
   
 
这是我尝试过的： -  
 
 
  function send（）
 {
 navigator.serviceWorker.ready 
 .then（function（registration）{
 registration.pushManager.getSubscription（）
 .then（function（subscription）{
 curlCommand（订阅）; 
 
 $ .ajax（{
 url：https://android.googleapis.com/gcm/send，
 headers：{
授权：key = AIzaSxUdg，
}，
 contentType：application / json，
 data：JSON.stringify（{
regist 
，b 
），
 xhrFields：{
 withCredentials：true 
}，
 crossDomain：true，
 type：push ，
 dataType：'json'
}）
 .done（function（）{
 alert（'done'）; 
}）
 .fail（function（）{
 
 alert（'err'）; //错误
}）; 
}）
}）
} 
  
但显示错误----- 
 XMLHttpRequest无法加载 https://android.googleapis.com/gcm/send 。对预检请求的响应不会通过访问控制检查：请求的资源上不存在访问控制 - 允许来源标头。因此'Origin' http：// localhost：8880 '不允许访问。
 
 
 
当你正在执行跨源XHR（从您的域到Google的域），用户代理会发出预检请求来搜索CORS标头，告诉您的客户有权执行操作。
 
 
 
为此，您需要向您的服务器（即 POST   / notifications / send ），然后你的服务器应该执行GCM的cURL请求。
 
Please explain how to do push notifications with XHR and Javascript. or is there any other way to send push notifications in progressive web apps. I have created curl command and when i execute it in my terminal push notification sent but how to do it on button click?

Here is my cURL command:-
curl --header "Authorization: key=AIzaSxUdg" --header Content-Type:"application/json" https://android.googleapis.com/gcm/send -d "{\"registration_ids\":[\"cxA-dUj8BTs:APAvGlCYW\"]}"
This is what i have tried :-
function send()
{
    navigator.serviceWorker.ready
    .then(function(registration) {
      registration.pushManager.getSubscription()
      .then(function (subscription) {        
        curlCommand(subscription);

    $.ajax({
        url: "https://android.googleapis.com/gcm/send",
        headers: {
            Authorization: "key=AIzaSxUdg",
        },
    contentType: "application/json",
    data: JSON.stringify({
        "registration_ids": [endpoint]
    }),         
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            type:"push",
            dataType: 'json'
})
.done(function() {
  alert('done');
})
.fail(function() {

     alert('err');// Error
});
})
})
}
But it shows error -----
XMLHttpRequest cannot load https://android.googleapis.com/gcm/send. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8880' is therefore not allowed access..
解决方案
Google API is intended to be used from a server so it is not including CORS headers.

As you are performing a cross origin XHR (from your domain to Google's domain), the User Agent makes a preflight request in search of the CORS headers that tell your client is authorized to perform operations.

To do this you need to make a request to your server (i.e. a POST on /notifications/send) and your server should then execute the cURL request to GCM.

                        
这篇关于如何在Chrome中发送推送通知（Progressive Web Apps）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！