web-dev-qa-db-ja.com

HTML5 Webアプリケーションでプッシュ通知を行うにはどうすればよいですか？

Webアプリケーションがあります。ユーザーが特定のページにいるときにサーバーからプッシュ通知を行うために、HTML 5に組み込まれた通知APIを使用したいと思います。出来ますか？

javascripthtmlpush-notificationweb-pushpush-api
14
Vickrant

Chromeを使用して、今日のWebアプリで実際のプッシュ通知を行うことができます Service Workers および PushManager から W3C Push API 。

使用できるステップバイステップのハウツーとコードスニペットについては、記事 Push Notifications on the Open Web を参照してください。この記事の図は、UIがどのように見えるかを説明しています。

enter image description here

Push APIの実装は既にFirefoxに上陸しています ; Firefox 42で2015年11月に出荷される予定です。また、Microsoftは Push APIもEdgeチームでの実装を検討中であることを示しています も提供しています。

以下は、MDNから借用した簡単なコード例です。

this.onpush = function(event) {
  console.log(event.data);
}

navigator.serviceWorker.register('serviceworker.js').then(
  function(serviceWorkerRegistration) {
    serviceWorkerRegistration.pushManager.subscribe().then(
      function(pushSubscription) {
        console.log(pushSubscription.subscriptionId);
        console.log(pushSubscription.endpoint);
      }, function(error) {
        console.log(error);
      }
    );
  });
15
sideshowbarker

何を達成したいかによって異なります。

  • webサイトを閲覧中にプッシュ通知をユーザーに表示する場合は、 Web Notifications API を使用して、通知を「ネイティブ」スタイルにできます。 SSEまたはWebSocketsのようなテクノロジーを使用して、サーバーからクライアントに通知をプッシュすることもできます
  • オフサイトのプッシュ通知が必要な場合（ユーザーがWebサイトにいない場合でも配信されます）、Service WorkerとPush APIオフラインイベントをトリガーし、通知APIを使用して通知を表示します（ my answer を参照）
4
collimarco