web-dev-qa-db-fra.com

Comment envoyer une notification Push au navigateur Web?

Je lisais depuis quelques heures à propos de API de notification push et API de notification Web . J'ai également découvert que Google & Apple fournit un service de notification Push gratuitement via GCM et APNS, respectivement.

J'essaie de comprendre si nous pouvons implémenter la notification Push pour les navigateurs à l'aide de Desktop Notification, ce que je pense, c'est ce que fait l'API de notification Web. J'ai vu une documentation de Google sur la façon dont cela peut être fait pour Chrome ici & ici .

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

  1. Pouvons-nous utiliser GCM/APNS pour envoyer une notification 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 dans une réponse peuvent aider beaucoup de gens qui ont des confusions similaires.

javascriptgoogle-cloud-messagingweb-notificationsweb-pushpush-api
160
esafwan

Donc ici je réponds à ma propre question. J'ai obtenu des réponses à toutes mes questions de personnes ayant déjà construit des services de notification Push.

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

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

  1. Pouvons-nous utiliser GCM/APNS pour envoyer une notification Push à tous les navigateurs Web, y compris Firefox et Safari?

Réponse: Google a déconseillé d'utiliser GCM en avril 2018. Vous pouvez désormais utiliser Messagerie Firebase Cloud (FCM). Cela prend en charge toutes les plateformes, y compris les navigateurs Web.

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

Réponse: Oui, la notification push peut être envoyée à partir de notre propre back-end. La prise en charge de la même chose est arrivée à tous les principaux navigateurs.

Vérifiez ce code de Google pour mieux comprendre la mise en œuvre.

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

Lectures supplémentaires:

  • La documentation du site Web de Firefox peut être lire ici .
  • Un très bon aperçu de Web Push par Google peut être trouvé ici.
  • ne FAQ réponse confusions et questions les plus courantes.

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

  1. https://onesignal.com/ (Gratuit | Support sur toutes les plateformes)
  2. https://firebase.google.com/products/cloud-messaging/ (Gratuit)
  3. https://clevertap.com/ (a un forfait gratuit)
  4. https://goroost.com/

Remarque: Lorsque vous choisissez un service gratuit, n'oubliez pas de lire le TOS. Les services gratuits fonctionnent souvent en collectant des données utilisateur à des fins diverses, notamment d'analyse.

En dehors de cela, vous devez disposer du protocole HTTPS pour envoyer des notifications Push. Cependant, vous pouvez obtenir gratuitement https via letsencrypt.org

143
esafwan

Javier a couvert les notifications et les limitations actuelles.

Ma suggestion: window.postMessage pendant que nous attendons que le navigateur handicapé rattrape son retard, sinon Worker.postMessage() fonctionne toujours avec des travailleurs Web.

Il peut s'agir de l'option de secours avec le gestionnaire d'affichage des messages de la boîte de dialogue, en cas d'échec du test de la fonctionnalité de notification ou du refus de l'autorisation.

Notification de has-feature et de refus d'autorisation:

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

Vous pouvez envoyer des données du serveur au navigateur via é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 objets Notification sous forme de 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.

11
djfdev

GCM/APNS ne concernent que Chrome et Safari, respectivement.

Je pense que vous cherchez peut-être Notification:

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

Cela fonctionne dans Chrome, Firefox, Opera et Safari .

10
Javier Conde

Je suppose que vous parlez de réels notifications qui peuvent être envoyées même lorsque l'utilisateur ne surfe pas sur votre site Web (sinon, consultez WebSockets ou des méthodes héritées telles que la longue interrogation).

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 uniquement pour Safari. Chaque fabricant de navigateurs 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 moteurs ! L'un est proposé par le fabricant du navigateur et est responsable de l'envoi de la notification à l'appareil. L’autre doit être à vous (ou vous pouvez utiliser un service tiers tel que Pushpad ) et est chargé de déclencher la notification et de contacter le service du fabricant du navigateur (par exemple, GCM, APNs, Mozilla Push serveurs ).

Divulgation: Je suis le fondateur de Pushpad

9
collimarco

Puis-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. Pour 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é les notifications Web de la même manière. C’est le protocole Push API du W3C. Mais Safari a sa propre vieille architecture. Nous devons donc maintenir Safari séparément.

Reportez-vous à navigateur-Push repo pour que les lignes directrices implémentent la notification Web Push pour votre application Web avec votre propre back-end. Il explique avec des exemples comment vous pouvez ajouter une prise en charge des notifications Web Push pour votre application Web sans services tiers.

7
TRiNE

À partir de maintenant, GCM ne fonctionne que pour chrome et Android. De même, Firefox et d'autres navigateurs ont leur propre api.

Nous en venons maintenant à la question de savoir comment mettre en œuvre la notification Push afin qu’elle fonctionne pour tous les navigateurs courants dotés de leur propre serveur.

  1. Vous avez besoin du code de script côté client i.e service worker, reportez-vous à ( notification Google Push ). Bien que cela reste la même pour les autres navigateurs.

2.après avoir obtenu un terminal utilisant Ajax, enregistrez-le avec le nom du navigateur.

3.Vous devez créer un back-end comportant des champs pour le titre, le message, l'icône, puis sur l'URL selon vos besoins. Maintenant, après avoir cliqué sur envoyer une notification, appelez une fonction comme 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 ...

4
Arjun singh

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

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

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

1
ColacX