service worker и push

Из приведенного не очень понятно как и что сделано, в раз что-то в service worker прилетает — значит оно работает. то что прилетает пустое сообщение — это нормально и правильно. Что бы получать от гугла что-то с данными (да и не только от гугла), надо устраивать хитрые пляски с бубнами и шифрованием. И то оно не всегда работать будет. А у мозиллы пляски надо другие устраивать. То есть, получив в браузере от гугла хотя бы пустое сообщение, надо уже самому делать запрос к своему сайту и выяснять чего ему надо.

self.addEventListener('push', console.log);

Так у тебя вообще колбэк не отработает.

self.addEventListener('push', console.log.bind(console));

Нашла в интернете пример

self.addEventListener('push', function (event) {
  event.waitUntil(
    fetch('/latest.json').then(function (response) {
      if (response.status !== 200) {
        console.log('Latest.json request error: ' + response.status);
        throw new Error();
      }
      return response.json().then(function (data) {
        if (data.error || !data.notification) {
          console.error('Latest.json Format Error.', data.error);
          throw new Error();
        }
        var title = data.notification.title;
        var body = data.notification.body;
        var icon = 'https://mysite.ru/my_beautiful_push_icon.png';
        return self.registration.showNotification(title, {
          body: body,
          icon: icon,
          data: {
            url: data.notification.url
          }
        });
      }).catch(function (err) {
        console.error('Retrieve data Error', err);
      });
    })
  );
});

Но а как быть если пуш не всем одинаковый придет? Если нужно чтоб на одно устройство пришло например «hello world», а на другое «world hello» тогда как быть?

например если сообщение слалось не на определенный токен, а на подписку /topics/movies ?

Ты можешь идентифицировать конкретного клиента в конкретном браузере по endpoint, который получается во время подписки на пуш.

То есть, сервер хочет чего-то отправить конкретному клиенту. Сообщение кладет куда-то в базу, связывая его с endpoint клиента. Клиенту уходит пуш. Клиент в ответ делает запрос серверу, указывая свой endpoint. Сервер отвечает ему заранее подготовленным сообщением. Клиент его получает и делает showNotification() или еще какую-нибудь грязь.

Обычно оно так делается. На передачу payload внутри push полагаться сейчас вообще нельзя. И вряд ли когда-нибудь будет можно.

Можно не завязываться на endpoint, завязаться на user_id какой-нибудь. Так даже проще получится. Но тогда надо будет разруливать ситуации, когда клиент ходит на сайт несколькими браузерами.

не подскажите для чего tag?

{
  "body": "Did you make a $1,000,000 purchase at Dr. Evil..."
  "tag": "request"
}

Они группируются в 1, типо 2 уведомления в 1, или просто заменяются друг другом?