Firebase 서비스 작업자와 Vue/Vuex 웹 애플리케이션 간의 통신 방법

Firebase 서비스 작업자와 Vue/Vuex 웹 애플리케이션 간의 통신 방법

우리는 파이어베이스 서비스 직원이 "옆"에서 실행하는 Vue 애플리케이션을 실행하고 있습니다.서비스 작업자는 다음과 같이 시작되었습니다.

// 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 파일(공용 디렉토리)에서 다음과 같이 데이터 메시지를 처리합니다.

// 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 이벤트에서 찾을 수 있는 클라이언트 개체가 필요하며 URL에 액세스하면 fetch 이벤트가 트리거됩니다.안타깝게도 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
      })
    })()
  )
})

React(예, 여기가 Vue라는 것을 알고 있습니다. 잠시만요)에서 비동기 이벤트 처리는 일반적으로 미들웨어를 사용하여 수행됩니다.Redux-saga는 이러한 미들웨어 중 하나이며 Vuex 작업에 대한 입력 또는 호출을 사용하여 외부 이벤트 논리(예: 방화벽 이벤트)를 내부 저장소에 연결하는 방법을 제공하는 이벤트 채널을 지원합니다.

Redux-saga는 redux에 연결되어 있지 않으며 이를 지원하는 여러 어댑터(vuex-redux-saga, vuex-nia 또는 vuex-coolstory)가 있습니다.여기에 몇 가지 더 나열되어 있습니다. https://yarnpkg.com/ ?q=vuex%20px&p=1

Saga 미들웨어 접근 방식을 좋아하게 되었지만 개인적으로 이러한 라이브러리를 사용하지 않았다는 점에 주의하십시오.

언급URL : https://stackoverflow.com/questions/60169684/how-do-you-communicate-between-firebase-service-worker-and-vue-vuex-web-app