Как вы общаетесь между службой Firebase и веб-приложением Vue / Vuex?

Question

Мы работаем с приложением Vue, в котором рядом с ним работает работник службы Firebase. Работник службы был инициирован следующим образом:

// main.js

import firebase from 'firebase/app'
import 'firebase/messaging'

...

const firebase_config = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_PROJECT_ID.firebaseapp.com',
  databaseURL: 'https://YOUR_PROJECT_ID.firebaseio.com',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_PROJECT_ID.appspot.com',
  messagingSenderId: 'YOUR_MESSAGING_SEND_ID'
}
console.log('firebase', firebase)

new Vue({ 
...

В файле firebase-messaging-sw. js (в каталоге publi c) мы обрабатываем сообщение данных следующим образом:

// 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')

// for some reason it requires this again
const firebase_config = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_PROJECT_ID.firebaseapp.com',
  databaseURL: 'https://YOUR_PROJECT_ID.firebaseio.com',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_PROJECT_ID.appspot.com',
  messagingSenderId: 'YOUR_MESSAGING_SEND_ID'
  appId: 'YOUR_APPID'
}
firebase.initializeApp(firebase_config)

const messaging = firebase.messaging()

messaging.setBackgroundMessageHandler(function(payload) {
//////////////////////////////////////////////////////
  // I want to access the vue or vuex component here
//////////////////////////////////////////////////////
  return true
}

Как сделать обратный вызов в хранилище vue / vuex или получить доступ к одному из элементов DOM, если он там есть?

РЕДАКТИРОВАТЬ

Вот еще несколько подробностей:

Кажется, что способ связи между работником службы и основным приложением с помощью функции postMessage (). Функция postMessange () нуждается в клиентском объекте, который может быть найден событием fetch, и событие fetch инициируется при доступе к URL-адресу. К сожалению, vue, похоже, не получает URL-адреса, поскольку это приложение на одной странице, поэтому вы не можете получить клиента, поэтому вы не можете использовать его для запуска postMessage () (если я не ошибаюсь, вся помощь приветствуется)

Вот код, который я получил для публикации сообщения о событии получения:

addEventListener('fetch', event => {
  event.waitUntil(
    (async function() {
      // Exit early if we don't have access to the client.
      // Eg, if it's cross-origin.
      if (!event.clientId) return

      // Get the client.
      const client = await clients.get(event.clientId)
      // Exit early if we don't get the client.
      // Eg, if it closed.
      if (!client) return

      // Send a message to the client.
      client.postMessage({
        msg: 'Hey I just got a fetch from you!',
        url: event.request.url
      })
    })()
  )
})

Answer 1

В React (да, я знаю, что это Vue, держите лошадей) обработка асинхронных событий обычно выполняется с помощью промежуточного программного обеспечения. Redux-saga является одним из этих промежуточных программ, и он поддерживает каналы событий, которые позволяют вам ie ваши внешние журналы событий c (например, ваше событие firebase) во внутреннее хранилище, используя put или вызовы ваших действий vuex.

Redux-saga не привязан к redux (как кажется), и есть несколько адаптеров, которые поддерживают это (vuex-redux-saga, vuex-nia или vuex-coolstory). Вот еще несколько перечисленных здесь: https://yarnpkg.com/?q=vuex%20saga&p=1

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