web-dev-qa-db-ja.com

Webブラウザにプッシュ通知を送信するにはどうすればいいですか？

プッシュ通知API および Web通知API について、ここ数時間読んでいます。私はまたGoogleとAppleがそれぞれGCMとAPNSを介して無料でプッシュ通知サービスを提供していることを発見しました。

デスクトップ通知を使用してブラウザへのプッシュ通知を実装できるかどうかを理解しようとしています。これがWeb通知APIの機能であると考えています。 Chrome here ＆ here でこれをどのように行うことができるかについてのGoogleドキュメントを見ました。

今はまだ理解できないのは、

  1. FirefoxやSafariを含むすべてのWebブラウザにプッシュ通知を送信するためにGCM/APNSを使用できますか？
  2. もしGCM経由でなければ、同じことをするために私たち自身のバックエンドを持つことができますか？

私はこれらすべてが一つの答えに答えたことが、同じような混乱をしている多くの人々を助けることができると信じています。

javascriptgoogle-cloud-messagingweb-notificationsweb-pushpush-api
149
esafwan

だからここに私は私自身の質問に答えています。私は過去にプッシュ通知サービスを構築してきた人々からの私のすべての質問に対する答えを得ました。

更新（2018年5月）： これはaです ウェブ上の包括的で非常によく書かれた文書Googleからのプッシュ通知。

3年前に寄せられた元の質問への回答：

  1. FirefoxやSafariを含むすべてのWebブラウザにプッシュ通知を送信するためにGCM/APNSを使用できますか？

答え： 2018年4月現在、GoogleはGCMを廃止しています。これで Firebase Cloud Messaging （FCM）を使用できるようになりました。これはWebブラウザを含むすべてのプラットフォームをサポートします。

  1. もしGCM経由でなければ、同じことをするために私たち自身のバックエンドを持つことができますか？

答え： はい、プッシュ通知は私たち自身のバックエンドから送ることができます。同じことに対するサポートはすべての主要なブラウザにもたらされました。

実装の理解を深めるには、Googleの this codelab を確認してください。

さまざまなプログラミング言語で独自のバックエンドを実装しています。：

さらなる読み：

同じことをする無料のサービスはありますか？ 無料、フリーミアム、有料モデルで同様のソリューションを提供している会社がいくつかあります。以下にいくつかリストしています。

  1. https://onesignal.com/ （無料|すべてのプラットフォームをサポート）
  2. https://firebase.google.com/products/cloud-messaging/ （無料）
  3. https://clevertap.com/ （無料プランあり）
  4. https://goroost.com/

注： 無料サービスを選択するときは、必ずTOSを読んでください。無料サービスは、分析を含むさまざまな目的でユーザーデータを収集することによって機能します。

それ以外に、プッシュ通知を送信するにはHTTPSが必要です。ただし、httpsは letsencrypt.org から自由に入手できます。

131
esafwan

Javierは通知と現在の制限をカバーしました。

私の提案：window.postMessageは障害のあるブラウザが追いつくのを待っている間、Worker.postMessage()はまだWeb Workersで動作しているのです。

これらは、通知機能のテストが失敗した場合や許可が拒否された場合のための、ダイアログボックスメッセージ表示ハンドラの代替オプションです。

通知に機能があり、許可が拒否されました。

if (!("Notification" in window) || (Notification.permission === "denied") ) {
    // use (window||Worker).postMessage() fallback ...
}
20
greg.arnott

Server Side Events を使用して、サーバーからブラウザにデータをプッシュできます。これは基本的に、クライアントがブラウザから「サブスクライブ」できる単方向のストリームです。ここから、SSEがブラウザにストリーミングするときに新しいNotificationオブジェクトを作成することができます。

var source = new EventSource('/events');

source.on('message', message => {
  var notification = new Notification(message.title, {
    body: message.body
  });
});

少し古いですが、 Eric Bidelmanによるこの記事 はSSEの基本を説明し、サーバーコードの例もいくつか提供します。

11
djfdev

GCM/APNSはそれぞれChromeとSafari専用です。

Notificationを探しているのではないでしょうか。

https://developer.mozilla.org/en-US/docs/Web/API/notification

Chrome、Firefox、OperaそしてSafariで動作します 。

10
Javier Conde

私はあなたがrealプッシュ通知について話していると思います（ユーザーがあなたのウェブサイトをサーフィンしていないときでさえも配信されることができます）（そうでなければWebSocketsまたはロングポーリングのような従来の方法をチェックしてください）.

FirefoxやSafariを含むすべてのWebブラウザにプッシュ通知を送信するためにGCM/APNSを使用できますか？

GCMはChrome専用で、APNはSafari専用です。各ブラウザ製造元は独自のサービスを提供しています。

もしGCM経由でなければ、同じことをするために私たち自身のバックエンドを持つことができますか？

Push APIには 2つのバックエンド ！が必要です。 1つはブラウザの製造元から提供され、通知をデバイスに配信する責任があります。もう1つはあなたのものでなければならず（または Pushpad のようなサードパーティのサービスを使用することもできます）、通知をトリガーしてブラウザ製造元のサービスに連絡する責任があります（すなわちGCM、APN、 Mozilla Pushサーバー ）。

開示：私はプッシュパッドの創設者です

9
collimarco

あなたの質問を以下のように再定義してください

プッシュ通知をChrome、Firefox、Opera、Safariに送信するための独自のバックエンドはありますか？

はい。今日までに、{（2017/05）、Chrome、Firefox、およびOpera（Safariなし）を処理するために、同じクライアント側とサーバー側の実装を使用できます。なぜなら彼らは同じ方法でWebプッシュ通知を実装しているからです。それは Push API W3Cによるプロトコルです。しかし、Safariには独自の古いアーキテクチャがあります。だから我々はSafariを別にメンテナンスしなければならない。

あなた自身のバックエンドであなたのWebアプリのためのWebプッシュ通知を実装するためのガイドラインについては browser-push repoを参照してください。それはあなたがどんな第三者のサービスなしであなたのWebアプリケーションのためにWebプッシュ通知サポートを追加することができるかを例で説明します。

6
TRiNE

今のところGCMはchromeとAndroidでしか動作しません。同様にFirefoxや他のブラウザには独自のAPIがあります。

今それが独自のバックエンドを持つすべての一般的なブラウザのために働くようにプッシュ通知を実装する方法についての質問に来ます。

  1. クライアントサイドのスクリプトコード、すなわちサービスワーカーが必要です。（ Googleプッシュ通知 ）を参照してください。これは他のブラウザでも同じです。

2. Ajaxを使用してエンドポイントを取得した後、ブラウザ名とともに保存します。

3.あなたの要件に従ってタイトル、メッセージ、アイコン、クリックURLのフィールドを持つバックエンドを作成する必要があります。送信通知をクリックした後、send_Push（）と言う関数を呼び出します。これは、たとえばさまざまなブラウザ用のコードを書くことです。

3.1。 クロムの場合 

 $headers = array(
          'Authorization: key='.$api_key(your gcm key),
          'Content-Type: application/json',
     );
   $msg = array('to'=>'register id saved to your server');
   $url = 'https://Android.googleapis.com/gcm/send';
   $ch = curl_init();

      // Set the url, number of POST vars, POST data
      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($msg));

      $result = curl_exec($ch);

3.2。 mozillaの場合 

$headers = array(            
              'Content-Type: application/json',
              'TTL':6000
            );

       $url = 'https://updates.Push.services.mozilla.com/wpush/v1/REGISTER_ID_TO SEND NOTIFICATION_ON';

      $ch = curl_init();

      // Set the url, number of POST vars, POST data
      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);


      $result = curl_exec($ch);

他のブラウザのためにグーグルしてください...

4
Arjun singh

これはすべてのブラウザのプッシュ通知をするための簡単な方法です https://pushjs.org

Push.create("Hello world!", {
body: "How's it hangin'?",
icon: '/icon.png',
timeout: 4000,
onClick: function () {
    window.focus();
    this.close();
 }
});
2
abderrahime sanadi

私はpubnubを使うことを勧めます。私はブラウザからServiceWorkersとPushNotificationを使用しようとしました、しかし、私がそれを試したとき、ウェブビューはこれをサポートしませんでした。

https://www.pubnub.com/docs/web-javascript/pubnub-javascript-sdk

1
ColacX