web-dev-qa-db-fra.com

Notification Push Chrome: Ce site a été mis à jour en arrière-plan

Lors de l’implémentation de la notification Push chrome, nous recherchions les dernières modifications de notre serveur. Ce faisant, le technicien affiche une notification supplémentaire avec le message 

Ce site a été mis à jour en arrière-plan

Déjà essayé avec la suggestion affichée ici https://disqus.com/home/discussion/html5rocks/Push_notifications_on_the_open_web/
Mais je n'ai rien trouvé d'utile jusqu'à présent. Y a-t-il une suggestion?

google-chromepush-notificationweb-pushpush-api
25
Md. Mashiur Rahman Chowdhury

Généralement, dès que vous recevez un message Push de GCM (Google Cloud Messaging), vous devez afficher une notification Push dans le navigateur. Ceci est mentionné sur le 3ème point ici:

https://developers.google.com/web/updates/2015/03/Push-notificatons-on-the-open-web# what-are-the-limitations-of-Push-messaging-in-chrome- 42

Il se peut donc que, d'une manière ou d'une autre, vous sautiez la notification Push bien que vous ayez reçu un message Push de GCM et que vous obteniez une notification Push avec un message par défaut du type "Ce site a été mis à jour en arrière-plan".

11
Satyajit Dey

J'examinais le même problème, mais après une longue recherche, je me suis rendu compte que c'était à cause d'un délai entre l'événement Push et self.registration.showNotification (). J'ai seulement manqué le mot-clé avant self.registration.showNotification ()

Vous devez donc implémenter la structure de code suivante pour obtenir une notification:

var APILINK = "https://xxxx.com";
 self.addEventListener('Push', function(event) {
      event.waitUntil(
          fetch(APILINK).then(function(response) {

        return response.json().then(function(data) {
                  console.log(data);
                  var title = data.title;
                  var body = data.message;
                  var icon = data.image;
                  var tag = 'temp-tag';
                  var urlOpen = data.URL;

                return  self.registration.showNotification(title, {
                      body: body,
                      icon: icon,
                      tag: tag
                  })
              });
          })
      );
  });
21
Yogendra

J'ai rencontré ce problème dans le passé. D'après mon expérience, la cause est généralement l'une des trois questions suivantes:

  1. Vous ne présentez pas de notification en réponse au message Push Chaque fois que vous recevez un message Push sur le périphérique, lorsque vous avez fini de gérer l'événement, une notification doit rester visible sur Le périphérique. Cela est dû au fait que vous avez souscrit avec l'option userVisibleOnly: true (bien que ceci ne soit pas facultatif, ne le définissez pas Entraînera l'échec de l'abonnement.
  2. Vous n'appelez pas event.waitUntil() en réponse à la gestion de l'événement. Une promesse doit être transmise à cette fonction pour indiquer au navigateur qu'il doit attendre d'être résolue avant de vérifier si une notification est laissée affichée.
  3. Pour une raison quelconque, vous résolvez la promesse transmise à event.waitUntil avant qu'une notification ne soit affichée. Notez que self.registration.showNotification est une promesse asynchrone, vous devez donc vous assurer qu'elle a été résolue avant que la promesse transmise à event.waitUntil ne soit résolue.
12
owencm

Cela fonctionne, il suffit de copier/coller/modifier. Remplacez "return self.registration.showNotification ()" par le code ci-dessous. La première partie consiste à gérer la notification, la seconde à gérer le clic de la notification. Mais ne me remerciez pas, à moins que vous ne remerciez mes heures de recherches sur Google pour obtenir des réponses.

Sérieusement, tous nos remerciements vont à Matt Gaunt sur developers.google.com

self.addEventListener('Push', function(event) {
  console.log('Received a Push message', event);

  var title = 'Yay a message.';
  var body = 'We have received a Push message.';
  var icon = 'YOUR_ICON';
  var tag = 'simple-Push-demo-notification-tag';
  var data = {
    doge: {
        wow: 'such amaze notification data'
    }
  };

  event.waitUntil(
    self.registration.showNotification(title, {
      body: body,
      icon: icon,
      tag: tag,
      data: data
    })
  );
});

self.addEventListener('notificationclick', function(event) {
  var doge = event.notification.data.doge;
  console.log(doge.wow);
});
1
FoxDonut

Si vous souhaitez que davantage d'événements se produisent au moment de la réception de l'événement de notification Push, la fonction showNotification() renvoie une variable Promise. Vous pouvez donc utiliser le chaînage classique.

const itsGonnaBeLegendary = new Promise((resolve, reject) => {
    self.registration.showNotification(title, options)
        .then(() => {
            console.log("other stuff to do");

            resolve();
        });
});

event.waitUntil(itsGonnaBeLegendary);
1
Vitezslav Lindovsky