Comment envoyer une notification push au navigateur web?

Javier a couvert les Notifications et les limitations actuelles.

MA suggestion: window.postMessage pendant que nous attendons que le navigateur handicapé rattrape, else Worker.postMessage() fonctionne toujours avec les travailleurs Web.

Il peut s'agir de l'option de secours avec le gestionnaire d'affichage des messages de la boîte de dialogue, lorsqu'un test de fonctionnalité de Notification échoue ou que l'autorisation est refusée.

Notification a-fonctionnalité et refusé-vérification de l'autorisation:

if (!("Notification" in window) || (Notification.permission === "denied") ) {
    // use (window||Worker).postMessage() fallback ...
}

GCM / APNS sont seulement pour Chrome et Safari respectivement.

Je pense que vous cherchez peut-être pour Notification:

Https://developer.mozilla.org/en-US/docs/Web/API/notification

Il fonctionne dans Chrome, Firefox, Opera et Safari.

Je suppose que vous parlez denotifications push réelles qui peuvent être livrées même lorsque l'utilisateur ne surfe pas sur votre site web (sinon consultez les WebSockets ou les méthodes héritées comme Long polling).

Pouvons-nous utiliser GCM / APNS pour envoyer une notification push à tous les navigateurs web, y compris Firefox et Safari?

GCM est uniquement pour Chrome et APNs est uniquement pour Safari. Chaque fabricant de navigateur offre son propre service.

Si pas via GCM pouvons-nous avoir notre propre back-end pour faire la même chose?

L'API Push nécessite deux backends! Un est offert par le fabricant du navigateur et est responsable de la livraison de la notification à l'appareil. L'autre devrait être le vôtre (ou vous pouvez utiliser un service tiers comme Pushpad) et est responsable du déclenchement de la notification et de contacter le service du fabricant du navigateur (par exemple, GCM, APNs, Mozilla push servers ).

Divulgation: je suis le Pushpad fondateur

Vous pouvez transférer les données du serveur vers le navigateur via événements latéraux du serveur . Il s'agit essentiellement d'un flux unidirectionnel qu'un client peut "s'abonner" à partir d'un navigateur. De là, vous pouvez simplement créer de nouveaux objets Notification en tant que flux SSEs dans le navigateur:

var source = new EventSource('/events');

source.on('message', message => {
  var notification = new Notification(message.title, {
    body: message.body
  });
}); 

Un peu vieux, mais Cet article D'Eric Bidelman explique les bases de SSE et fournit également des exemples de code serveur.

Je redéfinir votre question, comme ci-dessous

Pouvons-nous avoir notre propre back-end pour envoyer une notification push à Chrome, Firefox, Opera & Safari?

Oui. D'ici aujourd'hui (2017/05), vous pouvez utiliser la même implémentation côté client et côté serveur pour gérer Chrome, Firefox et Opera (pas de Safari). Parce qu'ils ont implémenté des notifications push web de la même manière. C'est push API protocole par W3C. mais Safari ont leur propre ancienne architecture. Nous avons donc à maintenir Safari séparément.

Référez-vous browser-push repo pour les lignes de guidage pour implémenter la notification push web pour votre application web avec votre propre back-end. Il explique avec des exemples comment vous pouvez ajouter le support de notification push web pour votre application web sans aucun service tiers.

À partir de Maintenant, GCM ne fonctionne que pour chrome et android. de même firefox et d'autres navigateurs ont leur propre api.

Vient maintenant à la question de savoir comment implémenter la notification push afin qu'elle fonctionne pour tous les navigateurs courants avec leur propre back-end.

1. vous avez besoin d'un code de script côté client,c'est-à-dire d'un service worker, reportez-vous( Google push notification). Bien que cela reste le même pour les autres navigateurs.

2.après avoir obtenu endpoint en utilisant Ajax enregistrez le avec le navigateur nom.

3.Vous devez créer back end qui a des champs pour le titre, le message, l'icône, cliquez sur L'URL selon vos besoins. maintenant, après avoir cliqué sur Envoyer une notification, appelez une fonction say send_push (). Dans ce code d'écriture pour différents navigateurs par exemple

3.1. pour chrome

 $headers = array(
          'Authorization: key='.$api_key(your gcm key),
          'Content-Type: application/json',
     );
   $msg = array('to'=>'register id saved to your server');
   $url = 'https://android.googleapis.com/gcm/send';
   $ch = curl_init();

      // Set the url, number of POST vars, POST data
      curl_setopt($ch, CURLOPT_URL, $url);
      curl_setopt($ch, CURLOPT_POST, true);
      curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

      curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
      curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($msg));

      $result = curl_exec($ch);

3.2. pour mozilla

$headers = array(            
              'Content-Type: application/json',
              'TTL':6000
            );

       $url = 'https://updates.push.services.mozilla.com/wpush/v1/REGISTER_ID_TO SEND NOTIFICATION_ON';

      $ch = curl_init();

      // Set the url, number of POST vars, POST data
      curl_setopt($ch, CURLOPT_URL, $url);
      curl_setopt($ch, CURLOPT_POST, true);
      curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
      curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

      curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);


      $result = curl_exec($ch);

Pour les autres navigateurs, veuillez google...

Je suggère d'utiliser pubnub. J'ai essayé d'utiliser ServiceWorkers et PushNotification à partir du navigateur, mais quand je l'ai essayé, webviews ne supportait pas cela.

Https://www.pubnub.com/docs/web-javascript/pubnub-javascript-sdk

C'est un moyen simple de faire une notification push pour tous les navigateurs https://pushjs.org

Push.create("Hello world!", {
body: "How's it hangin'?",
icon: '/icon.png',
timeout: 4000,
onClick: function () {
    window.focus();
    this.close();
}

});