Chromeでプッシュ通知を送信する方法（プログレッシブウェブアプリ）

Question

XHRとJavascriptでプッシュ通知を行う方法を説明してください。プログレッシブウェブアプリでプッシュ通知を送信する他の方法があります。私はカールコマンドを作成して、私は私の端末プッシュ通知が送信されたときにそれを実行するが、どのようにボタンクリックでそれを行うには？

はここに私のcurlコマンドである： -

curl --header "Authorization: key=AIzaSxUdg" --header Content-Type:"application/json" https://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(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 
}); 
}) 
}) 
} 

しかし、それはエラーが----- のXMLHttpRequestがhttps://android.googleapis.com/gcm/sendをロードすることはできませんを示しています。プリフライト要求への応答がアクセス制御チェックを通過しない：要求されたリソースに「アクセス制御許可」がない。したがって、Origin 'http://localhost:8880'はアクセスできません。

Answer 1

Google APIはCORSヘッダーを含まないようにサーバーから使用することを目的としています。

ユーザエージェントは、（ドメインからGoogleのドメインに）クロスオリジンXHRを実行しているときに、クライアントに操作を実行する権限があることを伝えるCORSヘッダーを検索するプリフライトリクエストを行います。

あなたは （すなわち/notifications/send上POST）サーバーして、GCMへのcURLの要求を実行する必要があり、サーバーにリクエストを行う必要があり、これを行うために。