How to send push notifications in Chrome(Progressive Web Apps)

问题

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..

回答1:

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.

回答2:

This will work:

function send()
{
    navigator.serviceWorker.ready
    .then(function(registration) {
      registration.pushManager.getSubscription()
      .then(function (subscription) {        
        curlCommand(subscription);

    $.ajax({
        url: "https://cors-anywhere.herokuapp.com/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
});
})
})
}

来源：https://stackoverflow.com/questions/36691533/how-to-send-push-notifications-in-chromeprogressive-web-apps

标签

ajax

push-notification

xmlhttprequest

google-cloud-messaging

progressive-web-apps