创建一个自定义的 firebase 数据消息处理程序 vue，它在推送通知时回复原始应用程序

Question

我有一个链接到 Firebase 消息服务的 Vue 应用程序。 Firebase 使用服务工作者来处理推送通知。 service worker 由 vue CLI 3 注册。当 service worker 收到 firebase 数据消息推送通知时，我希望将 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 如何注册服务工作者并且未设置客户端的问题。

当我在 main.js 中注册服务工作者时，我得到了两个服务工作者和一个客户端，但我也得到了一个无限循环，所以我知道这一定是可能的。

如何让 vue cli 在 service worker 中注册客户端？或者如何让服务人员获得相关客户？

Answer 1

一旦通知发送到 firebase service worker，我的代码只需要一个 ping 来刷新变量。

我犯的主要错误是尝试在开发环境中测试它。我必须将最终代码部署到 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 就足够了，我不需要不同的自定义消息处理程序。

创建一个自定义的 firebase 数据消息处理程序 vue，它在推送通知时回复原始应用程序

Creating a custom firebase data message handler vue that replies to originating app on push notification

firebase

vue.js

service-worker

vue-cli-3