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

Question

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

Answer 1

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

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

implementation of the Push API has already landed in Firefox тоже; он предназначен для доставки в ноябре 2015 года в Firefox 42. Также у Microsoft есть indicated that the Push API is also under consideration for implementation in 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); 
     } 
    ); 
    }); 

Answer 2

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

• если вы хотите послать уведомление толчка к пользователю во время серфинга вашего сайта, вы можете использовать WebSockets и (по желанию) в API Уведомления для дайте уведомлению «родной» стиль
• , если вы хотите получать уведомления о выходе за пределы сайта (которые предоставляются, даже если пользователь не находится на вашем веб-сайте), вы должны использовать комбинацию Push API (для запуска события офлайн) и API уведомлений для отображения уведомления (вы может read more here или использовать такую ​​услугу, как Pushpad)