Message API

message-api.js

// Instantiate the Channel
const channel = new MessageChannel()

// Sending Messages Through the Channel
const data = {
  color: 'blue',
  title: 'Lorem ipsum dolor',
  number: '000998909874564781',
  content: 'Lorem ipsum dolor sit amet. Consectetur adicisping alet.',
}

window.postMessage(data, [channel.port2])

// Listen for Incoming Messages on the Receiving End
self.addEventListener('message', event => {
  console.log('Incoming Message')
  console.log(event.data)
})

// Send a Message Back
self.addEventListener('message', event => {
  console.log('Incoming Message')
  console.log(event.data)

  const data = {
    color: 'red',
    title: 'Consectetur Adicisping',
    number: '0009182676476867324',
    content: 'Lorem ipsum dolor sit amet. Consectetur adicisping alet.',
  }
  event.ports[0].postMessage(data)
})

// Receiving a Message as the Sender
channel.port1.onmessage = event => {
  console.log(event.data)
}