// service-worker.js
globalThis.addEventListener('push', async evt => {
  // Read the push message that was sent
  const payload = evt.data.json()

  // Broadcast the message to all tabs
  globalThis.clients.matchAll().then(clients => {
    clients.forEach(client => client.postMessage(payload))
  })
})

// main.js
import Peer from 'https://jimmy.warting.se/packages/webrtc/perfect-negotiation.js'
import EncryptionHelperAES128GCM from 'https://jimmy.warting.se/packages/webpush/encryption-aes128gcm.js'

/*
  We are going to need some public/private keys to subscribe and encrypt messages
  you can generate your own with this:

  import('https://jimmy.warting.se/packages/webpush/encryption-aes128gcm.js')
    .then(m => m.default.generateB64ServerKeys())
    .then(JSON.stringify)
    .then(prompt.bind(null, 'Here is your keys'))
*/

const APPLICATION_KEYS = {
  publicKey: 'BLZJC...',
  privateKey: 'AhGCH...',
}

...

...

const encryptionHelper = new EncryptionHelperAES128GCM({
  vapidKeys: APPLICATION_KEYS,
  // contact information for push service to contact you
  // in case of problem. It's either a mailto: or https: link
  subject: 'https://jimmy.warting.se'
})

/**
 * @params {PushSubsription|object} subscription
 * @params {string} text
 */
async function sendPushMessage (subscription, text) {
  const uint8 = new TextEncoder().encode(text)

  console.info('Sending push message', JSON.parse(text))

  // Returns an array that can be passed to fetch as arguments
  // Or reconstructed to work with xhr, axios, or whatever
  // Can also be used for sending the request through a CORS proxy
  const request = await encryptionHelper.getRequestDetails(
    subscription,
    uint8
  )

  return fetch(...request)
}

// we can create a WebRTC peer early so it have some time
// to gather ice candidates
const peer = new Peer({
  // We want to send as few push messages as needed
  // since push messages is costly and have a quota
  // on how many push messages you can send
  // (specially when sending silent push)
  trickle: false,

  // Both are going to start out as polite but first person to
  // receive a push message isn't going to be polite
  polite: true
})

// Install the service worker
navigator.serviceWorker.register('/service-worker.js')

// Listen for when a service worker is broadcasting a push event
navigator.serviceWorker.addEventListener('message', async evt => {
  const payload = evt.data
  const { subscription: caller, ...sdp } = payload

  console.info('Received a push payload', payload)

  // The first signal (push) message is going to have push subscription
  // from the sender that we (the receiver) can use when sending back messages
  if (caller) {
    peer.polite = false
    // Start listening for offer/answer signals
    peer.signalingPort.onmessage = ({ data }) => {
      sendPushMessage(caller, data)
    }
  }

  // Send the remaining sdp signal to the peer
  peer.signalingPort.postMessage(sdp)
})

...

...

button.onclick = async () => {
  if (Notification.permission !== 'granted') {
    await Notification.requestPermission()
  }

  const friendsSubscription = prompt(
    'Who would you like to call?',
    sessionStorage.lastSubscription
  )

  sessionStorage.lastSubscription = friendsSubscription

  // We are going to need our own subscription also
  // So we can tell our friend who is calling him and reply back
  let registration = await navigator.serviceWorker.ready
  let subscription =
    await registration.pushManager.getSubscription() ||
    await registration.pushManager.subscribe({
      userVisibleOnly: true, // a chrome requirement...
      applicationServerKey: APPLICATION_KEYS.publicKey
    })

  // Now that we have two subscription we can begin talking to each other
  peer.signalingPort.onmessage = ({ data }) => {
    // Embed our own push subscription into the first signal message
    // so that he or she can respond back
    data = ({ subscription, ...JSON.parse(data) })

    // Now send it via web push
    sendPushMessage(
      JSON.parse(friendsSubscription),
      JSON.stringify(data)
    )

    // It could be useful to always send my own subscription.
    // or some other form of identification as long the receiver
    // have a id<->subscription mapping but for the sake of simplicity
    // we will only deal with one p2p connection at the time
    // + a subscription can be quite lengthy and a push payload is farley
    // limited i guess. but i don't think the size is an issue.
    subscription = undefined
  }
}