Vue.js 您如何在firebase service worker和Vue/Vuex web应用程序之间进行通信

我们正在运行一个Vue应用程序，该应用程序旁边有一个运行“next”的firebase service worker。 服务人员已被视为：

// 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（）（除非我弄错了，否则我们将感谢所有帮助）

以下是我在fetch事件中发布消息的代码：

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操作的put或调用将外部事件逻辑（例如firebase事件）与内部存储绑定

Redux saga与Redux无关（看起来是这样），有几个适配器支持这一点（vuex Redux saga、vuex nia或vuex coolstory）。这里还列出了一些：

---

请注意，我个人没有使用这些库中的任何一个，尽管我开始喜欢Saga中间件方法。

我建议将您的Firebase凭据（以及任何api密钥）存储在.env文件中，而不是直接存储在Javascript中。否则，您将向公众公开api密钥。@Tanner将它们存储在.env中不会在代码为web“打包”后对公众隐藏它们。它们也将驻留在代码中。最好先进行身份验证，然后将凭据存储在本地存储器（大约）中，然后在请求中使用这些套接字，这样您的代码唯一要做的就是接收令牌并将用户输入发送到api以验证其凭据。@hugo van schalkwyk您有什么解决方案吗？我也面临同样的问题。我正在使用vuex@Mallikarjun我们决定不使用Firebase选项，而是在用户使用时在站点上设置一个极化机制。firebase选项要求用户同意推送通知，我们不确定用户是否会同意。从我在文档中看到的内容来看，这些库使得与页面内的异步函数进行通信更加容易。我的问题是，我想在服务工作者和页面上运行的函数之间进行通信。我对这一切都是新手，所以我可能遗漏了一些东西。您可以将backgroundMessageHandler包装在通道中，然后将其“发送”到vuex操作。