Как я могу делать push-уведомления в веб-приложении HTML5?

Ответ 1

Вы можете делать настоящие push-уведомления с помощью веб-приложений сегодня в Chrome с помощью Рабочих служб и PushManager из W3C Push API.

См. статью Push Notifications в Open Web для пошаговых инструкций и фрагментов кода, которые вы можете использовать. Вот диаграмма из этой статьи, в которой объясняется, как выглядит пользовательский интерфейс вокруг.

реализация Push API уже приземлилась в Firefox; он нацелен на отправку в ноябре 2015 года в Firefox 42. И Microsoft указал, что Push API также рассматривается и для реализации в Edge team.

Ниже приведен простой пример кода, заимствованный из 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);
      }
    );
  });

Ответ 2

Это зависит от того, чего вы хотите достичь:

• если вы хотите отображать push-уведомления для пользователя во время просмотра вашего веб-сайта, вы можете использовать API веб-уведомлений, чтобы придать уведомлению "родной" стиль; Вы также можете использовать такие технологии, как SSE или WebSockets, чтобы отправить уведомление с вашего сервера клиенту.
• если вы хотите получать push-уведомления за пределами сайта (которые доставляются, даже если пользователь не находится на вашем веб-сайте), вам следует использовать комбинацию Service Workers и Push API, чтобы вызвать автономное событие, и использовать Notification API для отображения уведомления (см. мой ответь)

Ответ 3

Это зависит от того, чего вы хотите достичь:

• если вы хотите отправить push-уведомления пользователю во время просмотра вашего веб-сайта, вы можете использовать WebSockets и (необязательно) API уведомлений, чтобы дать уведомлению "родной" стиль
• Если вы хотите, чтобы уведомления о размещении на сайте (которые были доставлены, даже если пользователь не находится на вашем веб-сайте), вы должны использовать комбинацию Push API (для запуска автономного события) и API уведомлений для отображения уведомления (вы можете читать дальше здесь или использовать службу, например Pushpad)