Как вы вызываете postMessage () из vue сервисного работника - PullRequest
Новая
       13

Как вы вызываете postMessage () из vue сервисного работника

0 голосов
/ 13 февраля 2020

У нас есть vue работник службы пожарной базы, которому необходимо перезвонить в основное vue приложение. Согласно моим исследованиям, вы можете сделать это с помощью функции 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 () должен вызываться для объекта client, и вы получаете объект client в событии fetch, но vue, похоже, ничего не извлекает, поскольку это одностраничное приложение. Так как я могу получить клиента? и как мне отправить сообщение в основное приложение?

1 Ответ

0 голосов
/ 16 февраля 2020

Клиенту не нужно делать запрос на выборку, чтобы дать возможность сервисному работнику связаться с ним. Вы можете использовать API клиентов внутри Service Worker. Вы также можете инициировать совершенно отдельное сообщение postMessage от клиента в начале после запуска приложения.

API клиентов: https://developer.mozilla.org/en-US/docs/Web/API/Clients

Я также предлагаю вам проверить из этого примера: https://serviceworke.rs/message-relay.html

...