206

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

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

今でも理解できないのは次のとおりです。

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

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

4

9 に答える 9

200

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

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

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

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

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

  1. GCM 経由でない場合、独自のバックエンドで同じことを行うことはできますか?

回答:はい、プッシュ通知は当社独自のバックエンドから送信できます。同じことがすべての主要なブラウザーでサポートされています。

実装をよりよく理解するには、Google のこのコードラボを確認してください。

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

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

その他の資料: - - Firefox Web サイトのドキュメントは、ここで読むことができます。- Google による Web Push の非常に優れた概要については、こちらを参照してください。 - 最も一般的な混乱と質問に答える 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 を取得できます。

于 2015-11-28T22:03:09.437 に答える
26

Javier は、通知と現在の制限について説明しました。

私の提案:window.postMessageハンディキャップのあるブラウザーが追いつくのを待つ間、それ以外のWorker.postMessage()場合は Web Workers で動作し続けることをお勧めします。

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

通知には機能があり、権限が拒否されているかどうかのチェック:

if (!("Notification" in window) || (Notification.permission === "denied") ) {
    // use (window||Worker).postMessage() fallback ...
}
于 2015-11-21T03:23:52.707 に答える
14

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

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

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

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

于 2015-11-23T22:47:40.713 に答える
9

ユーザーが Web サイトをサーフィンしていない場合でも配信できる実際のプッシュ通知について話していると思います (それ以外の場合は、WebSockets またはロングポーリングなどの従来の方法を確認してください)。

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

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

GCM 経由でない場合、独自のバックエンドで同じことを行うことはできますか?

Push API には2 つのバックエンドが必要です。1 つはブラウザーの製造元によって提供され、デバイスに通知を配信する役割を果たします。もう 1 つはあなたのもの (またはPushpadなどのサードパーティ サービスを使用できます) であり、通知をトリガーし、ブラウザー メーカーのサービス (つまり、GCM、APNs、Mozilla プッシュ サーバー) に接続します。

開示：私はPushpadの創設者です

于 2016-03-21T11:02:16.710 に答える
7

以下のように質問を再定義できますか

Chrome、Firefox、Opera、Safari にプッシュ通知を送信する独自​​のバックエンドを作成できますか?

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

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

于 2016-12-08T03:28:41.900 に答える
5

現在、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);

他のブラウザの場合は、Google で検索してください...

于 2016-10-17T07:29:14.553 に答える