Chrome Push-уведомление: этот сайт был обновлен в фоновом режиме

при реализации уведомления Chrome push мы получали последние изменения с нашего сервера. При этом сервисный работник показывает дополнительное уведомление с сообщением

этот сайт был обновлен в фоновом режиме

уже пробовал с предложением, размещенным здесь https://disqus.com/home/discussion/html5rocks/push_notifications_on_the_open_web/
Но до сих пор не нашел ничего полезного. Есть какие-нибудь предложения ?

22
google-chrome push-api push-notification web-push

5 ответов

Как правило, как только вы получаете push-сообщение от GCM (Google Cloud Messaging), вы должны показать push-уведомление в браузере. Это упоминается в 3-м пункте здесь:

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

Так может случиться, что каким-то образом вы пропускаете push-уведомление, хотя вы получили push-сообщение от GCM, и вы получают push-уведомление с некоторым сообщением по умолчанию, таким как"этот сайт был обновлен в фоновом режиме".

11

я испытывал ту же проблему, но после долгого исследования я узнал, что это потому, что задержка происходит между событием PUSH и self.регистрация.showNotification(). Я пропустил только ключевое слово return перед self.регистрация.showNotification()

поэтому вам нужно реализовать следующую структуру кода, чтобы получить уведомление:

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

я столкнулся с этой проблемой в прошлом. По моему опыту, причина, как правило, одна из трех проблем:

  1. вы не показываете уведомление в ответ на толчок сообщение. Каждый раз, когда вы получаете push-сообщение на устройстве, когда вы заканчиваете обработку события уведомление должно быть оставлено видимым на устройство. Это связано с подпиской на userVisibleOnly: true option (хотя обратите внимание, что это не является необязательным и не устанавливает его подписка на неудача.
  2. ты не звонишь event.waitUntil() в ответ на обработку события. Обещание должно быть передано в эту функцию, чтобы указать браузеру, что он должен ждать разрешения обещания, прежде чем проверять, осталось ли уведомление.
  3. по какой-то причине вы разрешаете обещание, переданное event.waitUntil перед отображением уведомления. Обратите внимание, что self.registration.showNotification является обещанием и асинхронным, поэтому вы должны быть уверены, что он разрешен до того, как обещание передано event.waitUntil решает.
11

Если вам нужно больше вещей, чтобы произойти во время получения события push-уведомления,showNotification() возвращает Promise. Таким образом, вы можете использовать классическую цепочку.

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

            resolve();
        });
});

event.waitUntil(itsGonnaBeLegendary);
1

это работает, просто скопируйте / вставьте / измените. Заменить "возвратить себя".регистрация.showNotification () " с приведенным ниже кодом. Первая часть предназначена для обработки уведомления, вторая часть-для обработки щелчка уведомления. Но не благодарите меня, если вы не благодарите меня за часы поиска ответов в гугле.

серьезно, хотя, все спасибо Мэтту Гонту в 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