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

Question

У меня есть веб-приложение. Я хочу использовать встроенный в HTML 5 API уведомлений для отправки push-уведомлений с сервера, когда пользователь находится на определенной странице. Является ли это возможным?

Answer 1

Сегодня вы можете создавать настоящие push-уведомления с веб-приложениями в Chrome, используя Service Workers и PushManager из W3C Push API.

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

Реализация Push API уже появилась в Firefox; он планируется выпустить в ноябре 2015 года в Firefox 42. И 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);
      }
    );
  });

Answer 2

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

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