How to use iframe-coordinator - 6 common examples

// This worker is designed to showcase worker error rate handling.
import BackgroundClient from "iframe-coordinator/BackgroundClient";

const client = new BackgroundClient();

let currTimeout = setTimeout(triggerError, getTimeout());

function triggerError() {
  // Setup the next error call, since the error will stop this function execution
  currTimeout = setTimeout(triggerError, getTimeout());

  console.error('Triggering an intentional error from a background worker.  Will not pop rate limit');
  foo.bar.baz();
}

// TODO - better listener from client api - with auto cleanup
addEventListener('message', evt => {
  if (evt.data.msgType === 'before_unload') {
    // Shutdown requested from host.  Clean-up and acknowledge
    if (currTimeout) {

// This worker is designed to showcase worker error rate handling.
import WorkerClient from "iframe-coordinator/WorkerClient";

const client = new WorkerClient(() => {
  // Shutdown requested from host.  Clean-up; WorkerClient will ack
  if (currTimeout) {
    clearTimeout(currTimeout);
    currTimeout = null;
  }
});

let currTimeout = setTimeout(triggerError, getTimeout());

function triggerError() {
  // Setup the next error call, since the error will stop this function execution
  currTimeout = setTimeout(triggerError, getTimeout());

  console.error('Triggering an intentional error from a worker.  Will not pop rate limit');
  foo.bar.baz();
}

// Load polyfills required for IE11
import "@babel/polyfill";
import "custom-event-polyfill/polyfill.js";
import "url-polyfill";

import { Client } from "iframe-coordinator/client";

document.getElementById("path").innerHTML = window.location.hash;

window.onhashchange = function() {
  document.getElementById("path").innerHTML = window.location.hash;
};

// Start intercepting link click events for routing
let iframeClient = new Client();
iframeClient.addListener("environmentalData", envData => {
  document.getElementById("client-data").value = JSON.stringify(envData);
});

iframeClient.messaging.addListener("host.topic", publication => {
  console.log("Got Publish event:", publication);
});

iframeClient.start();

document.getElementById("do-publish").addEventListener("click", () => {
  //Get the topic and the data to publish from the form
  let topic = document.getElementById("pub-topic").value;
  let data = JSON.parse(document.getElementById("pub-data").value);

  //Publish the data

import 'url-polyfill';

import { Client } from 'iframe-coordinator/dist/client';

document.getElementById('path').innerHTML = window.location.hash;

window.onhashchange = function() {
  document.getElementById('path').innerHTML = window.location.hash;
  document.getElementById('hostPath').innerHTML = iframeClient.asHostUrl(
    window.location.hash
  );
};

/****  SET UP THE IFRAME CLIENT LIBRARY ****/

let iframeClient = new Client({
  // This lets the example client work with the cli host by setting it's domain
  // as a valid host origin to post messages to. A production app will probably
  // need to conditionally set this.
  hostOrigin: `http://${window.location.hostname}:3000`
});

// Add a listener that will handled config data passed from the host to the
// client at startup.
iframeClient.addListener('environmentalData', envData => {
  // Transform link URLs to match top-level app.
  transformLinks();

  const appLocale = envData.locale;
  const now = new Date();
  const localizedDate = new Intl.DateTimeFormat(appLocale).format(now);
  console.log(

import BackgroundClient from "iframe-coordinator/BackgroundClient";
// TODO Need a better demo that makes more sense?

const client = new BackgroundClient();

// Routing example
// client.requestNavigation('/wikipedia');

let currTimeout = setTimeout(sendToastMessage, getTimeout(5000, 10000));

function sendToastMessage() {
  client.requestToast('from a Headless Worker', {
    custom: {
      level: 'info'
    },
    title: 'Hello worker World'
  });

  currTimeout = setTimeout(sendToastMessage, getTimeout());
}

import WorkerClient from "iframe-coordinator/WorkerClient";

const client = new WorkerClient(() => {
  // Shutdown requested from host.  Clean-up; WorkerClient will ack
  if (currTimeout) {
    clearTimeout(currTimeout);
    currTimeout = null;
  }

  // Not strictly necessary, but a good practice
  client.unsubscribe('host.topic');
});

// Routing example
// client.requestNavigation('/wikipedia');

// Pub-Sub Example
client.subscribe('host.topic');
client.onPubsub(publication => {