Создание собственного обработчика сообщений данных Firebase vue, который отвечает исходному приложению при уведомлении pu sh

Question

У меня есть приложение Vue, которое связано со службой обмена сообщениями Firebase. Firebase использует работника сервиса для обработки уведомлений pu sh. Сервисный работник зарегистрирован в vue CLI 3. Когда сервисное работник получит уведомление о данных базы данных pu sh, я хочу, чтобы postMessage было запущено обратно в приложение. Обработчик сообщений выглядит следующим образом:

// firebase-messaging-sw.js

messaging.setBackgroundMessageHandler(function(payload) {
  client.postMessage({      // ERR: client unknown
        msg: "Data message recieved"
      })

  const notificationTitle = 'Background Message Title'
  const notificationOptions = {
     body: 'Background Message body.',
     icon: 'img/i_icon_96.png'
   }
   return self.registration.showNotification(
     notificationTitle,
     notificationOptions
   )
}

Я не знаю, как получить клиента. Кажется, проблема в том, как Vue CLI регистрирует работника службы и что клиенты не установлены.

Когда я регистрирую работника службы в основном. js Я получаю двух работников службы и клиента, но я также получаю бесконечный l oop, поэтому я знаю, что это должно быть возможно.

Как мне получить vue cli для регистрации клиента в сервисном работнике? или как мне заставить сервисного работника получить соответствующего клиента?

Answer 1

Моему коду требовался только пинг для обновления sh переменных после того, как уведомление было отправлено работнику службы Firebase.

Основная ошибка, которую я сделал, - это попытаться протестировать его в среде разработчика. Мне пришлось развернуть окончательный код на сервере https, чтобы он заработал.

Весь мой firebase-messaging-sw. js выглядит так:

// firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/7.6.2/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/7.6.2/firebase-messaging.js')

const firebase_config = {
  apiKey: '{your api key}',
  projectId: '{your product id}',
  messagingSenderId: '{your sender id}',
  appId: '{your appid}'
}
firebase.initializeApp(firebase_config)

// not needed
const messaging = firebase.messaging()
console.log('Token', messaging.getToken())
// not needed

в main. js Я запустил приложение следующим образом:

const firebase_config = {
  apiKey: {VUE_APP_FIREBASE_APIKEY},
  authDomain: {VUE_APP_FIREBASE_AUTHDOMAIN},
  databaseURL: {VUE_APP_FIREBASE_DATABASE_URL},
  projectId: {VUE_APP_FIREBASE_PROJECT_ID},
  storageBucket: {VUE_APP_FIREBASE_STORAGE_BUCKET},
  messagingSenderId: {VUE_APP_FIREBASE_MESSAGING_SENDER_ID},
  appId: {VUE_APP_FIREBASE_APP_ID}
}
firebase.initializeApp(firebase_config)

navigator.serviceWorker.addEventListener('message', event => {
  console.log('Push Notification Recieved') // refresh code goes here  
})

Достаточно было addEventListener, мне не нужны были разные пользовательские обработчики сообщений.