Comment envoyer une notification push au navigateur Web?

Je lis depuis quelques heures sur l' API Push Notification et l' API Web Notification . J'ai également découvert que Google et Apple offraient un service de notification push gratuitement via GCM et APNS respectivement.

J'essaie de comprendre si nous pouvons implémenter la notification push aux navigateurs à l'aide de la notification de bureau, ce qui, je crois, est ce que fait l'API Web Notification. J'ai vu une documentation Google sur la façon dont cela peut être fait pour Chrome ici et ici .

Maintenant, ce que je ne peux toujours pas comprendre, c'est:

1. Pouvons-nous utiliser GCM / APNS pour envoyer des notifications push à tous les navigateurs Web, y compris Firefox et Safari?
2. Si ce n'est pas via GCM, pouvons-nous avoir notre propre back-end pour faire de même?

Je crois que toutes ces réponses en une seule réponse peuvent aider beaucoup de gens qui ont des confusions similaires.

Alors, je réponds à ma propre question. J'ai obtenu des réponses à toutes mes questions de personnes qui ont créé des services de notification push dans le passé.

Mise à jour (mai 2018): Voici un document complet et très bien écrit sur la notification push Web de Google.

Réponse aux questions originales posées il y a 3 ans:

1. Pouvons-nous utiliser GCM / APNS pour envoyer des notifications push à tous les navigateurs Web, y compris Firefox et Safari?

Réponse: Google a désapprouvé GCM depuis avril 2018. Vous pouvez désormais utiliser Firebase Cloud Messaging (FCM). Cela prend en charge toutes les plates-formes, y compris les navigateurs Web.

2. Si ce n'est pas via GCM, pouvons-nous avoir notre propre back-end pour faire de même?

Répondre: Oui, la notification push peut être envoyée depuis notre propre back-end. Le support de la même chose est venu à tous les principaux navigateurs.

Consultez ce codelab de Google pour mieux comprendre la mise en œuvre.

Quelques tutoriels:

• Implémentation de la notification push dans Django ici .
• Utiliser flask pour envoyer une notification push ici et ici .
• Envoi de notifications push depuis Nodejs ici
• Envoi de notifications push en utilisant php ici et ici
• Envoi de notifications push depuis Wordpress. Ici & ici
• Envoi de notifications push depuis Drupal. Ici

Implémentation de son propre backend dans divers langages de programmation:

• NodeJs.
• PHP
• Rails
• Python
• Go Lang - ceci et cela

Lectures supplémentaires: - - La documentation du site Web de Firefox peut être lue ici . - Un très bon aperçu de Web Push by Google peut être trouvé ici. - Une FAQ répondant aux confusions et questions les plus courantes.

Existe-t-il des services gratuits pour faire de même? Certaines entreprises proposent une solution similaire dans des modèles gratuits, freemium et payants. J'en énumère quelques-uns ci-dessous:

1. https://onesignal.com/ (gratuit | Prend en charge toutes les plates-formes)
2. https://firebase.google.com/products/cloud-messaging/ (gratuit)
3. https://clevertap.com/ (a un plan gratuit)
4. https://goroost.com/

Remarque: lorsque vous choisissez un service gratuit, n'oubliez pas de lire les CGU. Les services gratuits fonctionnent souvent en collectant les données des utilisateurs à diverses fins, y compris l'analyse.

En dehors de cela, vous devez avoir HTTPS pour envoyer des notifications push. Cependant, vous pouvez obtenir https librement via letsencrypt.org

Javier a couvert les notifications et les limitations actuelles.

Ma suggestion: window.postMessageen attendant que le navigateur handicapé rattrape son retard, sinon Worker.postMessage()pour continuer à fonctionner avec les Web Workers.

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 qu'une autorisation est refusée.

Vérification des fonctionnalités de notification et des autorisations refusées:

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

Vous pouvez pousser les données du serveur vers le navigateur via les événements côté serveur . Il s'agit essentiellement d'un flux unidirectionnel auquel un client peut «s'abonner» à partir d'un navigateur. À partir de là, vous pouvez simplement créer de nouveaux Notificationobjets en tant que flux SSE 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 quelques exemples de code serveur.

GCM / APNS sont uniquement pour Chrome et Safari respectivement.

Je pense que vous cherchez peut-être Notification:

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

Il fonctionne dans Chrome, Firefox, Opera et Safari .

Je suppose que vous parlez de véritables notifications push qui peuvent être dé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 les longs sondages).

Pouvons-nous utiliser GCM / APNS pour envoyer des notifications push à tous les navigateurs Web, y compris Firefox et Safari?

GCM est uniquement pour Chrome et APN est uniquement pour Safari. Chaque fabricant de navigateur propose son propre service.

Si ce n'est pas via GCM, pouvons-nous avoir notre propre back-end pour faire de même?

L'API Push nécessite deux backends ! L'un est proposé par le fabricant du navigateur et est responsable de l'envoi de la notification à l'appareil. L'autre devrait être le vôtre (ou vous pouvez utiliser un service tiers comme Pushpad ) et est chargé de déclencher la notification et de contacter le service du fabricant du navigateur (c'est-à-dire GCM, APNs, serveurs push Mozilla ).

Divulgation: je suis le fondateur de Pushpad

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();
 }
});

Puis-je redéfinir votre question comme ci-dessous

Pouvons-nous avoir notre propre back-end pour envoyer des notifications push à Chrome, Firefox, Opera et Safari?

Oui. D'ici aujourd'hui (2017/05) , vous pouvez utiliser la même implémentation côté client et serveur pour gérer Chrome, Firefox et Opera (pas de Safari). Parce qu'ils ont mis en œuvre les notifications push Web de la même manière. C'est le protocole Push API du W3C. Mais Safari a sa propre architecture ancienne. Nous devons donc maintenir Safari séparément.

Référer - référentiel push du navigateur pour obtenir des lignes directrices 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 la prise en charge des notifications 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 les autres navigateurs ont leur propre API.

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

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

2. après avoir obtenu le point de terminaison à l'aide d'Ajax, enregistrez-le avec le nom du navigateur.

3.Vous devez créer un back-end qui a des champs pour le titre, le message, l'icône, l'URL de clic selon vos besoins. maintenant, après avoir cliqué sur envoyer une notification, appelez une fonction, par exemple 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 s'il vous plaît google ...

Je suggère d'utiliser pubnub. J'ai cependant essayé d'utiliser ServiceWorkers et PushNotification à partir du navigateur, mais lorsque je l'ai essayé, les vues Web ne le prenaient pas en charge.

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