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

Как правило, как только вы получаете 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-уведомление с некоторым сообщением по умолчанию, например «Этот сайт был обновлен в фоновом режиме».

Я столкнулся с той же проблемой, но после долгих исследований я узнал, что это связано с задержкой между событием PUSH и self.registration.showNotification(). Я пропустил только ключевое слово return перед self.registration.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
                  })
              });
          })
      );
  });

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

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

Это работает, просто скопируйте/вставьте/измените. Замените «return self.registration.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);
});

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

Каковы ограничения push-уведомлений? сообщения в Chrome?

...

• Вы должны показать уведомление, когда вы получаете push-сообщение.

...

и

Почему бы не использовать Интернет Сокеты или события, отправленные сервером (EventSource)?

Преимущество использования push-сообщений в том, что даже если ваша страница закрыта, ваш сервис-воркер проснется и сможет показать уведомление. Соединение Web Sockets и EventSource закрывается при закрытии страницы или браузера.

Если вам нужно, чтобы во время получения события 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);