您如何从 vue 服务人员调用 postMessage()答案

【问题标题】：How do you call postMessage() from a vue service worker您如何从 vue 服务人员调用 postMessage()
【发布时间】：2020-02-16 05:46:04
【问题描述】：

我们有一个需要回调主 vue 应用的 vue firebase service worker。根据我的研究，您可以使用 postMessage() 函数执行此操作，如下所示：

// firebase-messaging-sw.js

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
      })
    })()
  )
})

您在主应用程序中处理消息：

// main.js

navigator.serviceWorker.addEventListener('message', event => {
  console.log('Url', event.data.url)
  console.log('msg', event.data.msg)
})

问题是 postMessage() 需要在客户端对象上调用，并且您在 fetch 事件上获取客户端对象，但 vue 似乎没有获取任何内容，因为它是一个单页应用程序。那么如何获取客户呢？以及如何向主应用发送消息？

【问题讨论】：

标签： vue.js vuejs2 service-worker

【解决方案1】：

客户端不需要为了让 Service Worker 与之通信而发出 fetch 请求。您可以在 Service Worker 中使用 Clients API。您也可以在应用启动后从客户端发起完全独立的 postMessage 消息。

客户端 API：https://developer.mozilla.org/en-US/docs/Web/API/Clients

我也建议你看看这个例子：https://serviceworke.rs/message-relay.html

【讨论】：