web-dev-qa-db-fra.com

Comment puis-je faire des notifications Push dans une application Web HTML5?

J'ai une application web. Je souhaite utiliser l'API de notifications intégrées HTML 5 pour effectuer des notifications Push à partir du serveur lorsque l'utilisateur se trouve sur une page particulière. C'est possible?

javascripthtmlpush-notificationweb-pushpush-api
14
Vickrant

Vous pouvez faire de vraies notifications Push avec des applications Web aujourd'hui dans Chrome en utilisant Service Workers et PushManager à partir de API Push W3C .

Voir l'article Notifications push sur le Web ouvert pour un guide étape par étape et des extraits de code que vous pouvez utiliser. Voici un diagramme de cet article qui explique à quoi ressemble l'interface utilisateur qui l'entoure.

enter image description here

Un l'implémentation de l'API Push a déjà atterri dans Firefox aussi; il est prévu pour la livraison en novembre 2015 dans Firefox 42. Et Microsoft a a indiqué que l'API Push est également à l'étude pour l'implémentation dans l'équipe Edge également.

Voici un exemple de code simple, emprunté à 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

Cela dépend de ce que vous voulez réaliser:

  • si vous souhaitez afficher des notifications Push à l'utilisateur pendant que vous surfez sur votre site Web, vous pouvez utiliser API de notifications Web , pour donner à la notification un style "natif"; vous pouvez également utiliser une technologie comme SSE ou WebSockets pour pousser la notification de votre serveur vers le client
  • si vous voulez des notifications Push hors site (qui sont délivrées même lorsque l'utilisateur n'est pas sur votre site Web), vous devez utiliser une combinaison de Service Workers et API Push pour déclencher l'événement hors ligne et utiliser l'API Notifications pour afficher la notification (voir ma réponse )
4
collimarco