Webブラウザにプッシュ通知を送信する方法は？

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

私は、デスクトップ通知を使用してブラウザーにプッシュ通知を実装できるかどうかを理解しようとしています。これは、Web通知APIが行うことだと思います。Chrome でこれをどのように行うことができるかについてのGoogleドキュメントをこことここで見ました。

今でも理解できないのは：

1. GCM / APNSを使用して、FirefoxとSafariを含むすべてのWebブラウザーにプッシュ通知を送信できますか？
2. GCMを使用しない場合、独自のバックエンドで同じことを行うことができますか？

これらすべてを1つの回答で回答することで、同様の混乱を抱えている多くの人々を助けることができると思います。

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

更新（2018年5月）：これ は、 GoogleからのWebプッシュ通知に関する包括的で非常によく書かれたドキュメントです。

3年前に尋ねられた元の質問への回答：

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

回答： Googleは2018年4月の時点でGCMを非推奨にしています。FirebaseCloud Messaging（FCM）を使用できるようになりました。これは、Webブラウザーを含むすべてのプラットフォームをサポートします。

2. GCMを使用しない場合、独自のバックエンドで同じことを行うことができますか？

回答：はい、プッシュ通知は独自のバックエンドから送信できます。同じサポートはすべての主要なブラウザに来ています。

Googleのこのコードラボをチェックして、実装をよりよく理解してください。

いくつかのチュートリアル：

• Django Hereにプッシュ通知を実装する。
• フラスコを使用してこことここにプッシュ通知を送信する。
• ここからNodejsからプッシュ通知を送信する
• php Here＆Hereを使用してプッシュ通知を送信する
• Wordpressからプッシュ通知を送信します。こことここ
• Drupalからプッシュ通知を送信します。ここに

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

• NodeJs。
• PHP
• Rails
• パイソン
• ランラン- これとこれ

参考 資料： --Firefox Webサイトのドキュメントは、こちらで読むことができます。-GoogleによるWebプッシュの非常に優れた概要は、こちらにあります。 - よくある混乱と質問に答えるFAQ。

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

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

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

それとは別に、プッシュ通知を送信するにはHTTPSが必要です。ただし、letsencrypt.orgを介してhttpsを自由に取得できます。

ハビエルは通知と現在の制限をカバーしました。

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

これらは、通知機能のテストが失敗したり、権限が拒否されたりした場合の、ダイアログボックスのメッセージ表示ハンドラーのフォールバックオプションにすることができます。

通知に機能と拒否された権限のチェック：

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

サーバー側イベントを介して、サーバーからブラウザーにデータをプッシュできます。これは基本的に、クライアントがブラウザから「サブスクライブ」できる一方向のストリームです。ここから、NotificationSSEがブラウザーにストリーミングするときに新しいオブジェクトを作成するだけです。

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

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

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

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

私はあなたが探しているかもしれないと思いますNotification：

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

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

私は、ユーザーがWebサイトをサーフィンしていないときでも配信できる実際のプッシュ通知について話していると思います（そうでない場合は、WebSocketまたはロングポーリングなどのレガシーメソッドを確認してください）。

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

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

GCMを使用しない場合、独自のバックエンドで同じことを行うことができますか？

Push APIには2つのバックエンドが必要です。1つはブラウザの製造元から提供され、デバイスへの通知の配信を担当します。もう1つはあなたのものであるか（またはPushpadなどのサードパーティサービスを使用できます）、通知をトリガーし、ブラウザの製造元のサービス（GCM、APN、Mozillaプッシュサーバーなど）に連絡します。

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

これは、すべてのブラウザーhttps://pushjs.orgにプッシュ通知を行う簡単な方法です

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

質問を次のように再定義してください。

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

はい。今日（2017/05）までに、同じクライアント側とサーバー側の実装を使用して、Chrome、Firefox、Opera（Safariなし）を処理できます。同じ方法でWebプッシュ通知を実装しているためです。それがW3CによるPush APIプロトコルです。しかし、Safariには独自の古いアーキテクチャがあります。したがって、Safariを個別に保守する必要があります。

独自のバックエンドでWebアプリにWebプッシュ通知を実装するためのガイドラインについては、ブラウザープッシュリポジトリを参照してください。サードパーティのサービスなしでWebアプリケーションにWebプッシュ通知サポートを追加する方法を例を挙げて説明します。

現在、GCMはChromeとAndroidでのみ機能します。同様に、Firefoxや他のブラウザには独自のAPIがあります。

次に、プッシュ通知を実装して、独自のバックエンドを持つすべての一般的なブラウザーで機能するようにする方法について質問します。

1. クライアント側のスクリプトコード、つまりService Worker、refer（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。モジラ用

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

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

pubnubの使用をお勧めします。ブラウザーからServiceWorkersとPushNotificationを使用してみましたが、Webviewはこれをサポートしていませんでした。

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