vforge · April 16, 2021 19:24
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <body>
 <script>
 var ORIGIN = "http://localhost2.example.com";

 function onMessage(event){
  // console.log('1', event);

  const data = event.data;

  if (data.status === 'registered') {
    console.log('actions', data.actions);
    return;
  }

  if (data.status === 'ack') {
    console.log('ack', data.what);
    return;
  }
 }


 var stamp = Date.now();

 // initialize/register
 var channel = new MessageChannel();
 var iframe = document.createElement('iframe');
 iframe.style.display = "none";
 iframe.src = ORIGIN + "/store.html";
 iframe.sandbox = "allow-same-origin allow-scripts";
 iframe.addEventListener("load", onLoad);
 document.body.appendChild(iframe);

 function onLoad() {
  // Listen for messages on port1
  channel.port1.onmessage = onMessage;
  // Transfer port2 to the iframe
  iframe.contentWindow.postMessage({type: 'register'}, ORIGIN, [channel.port2]);

  function addAction(timeout) {
    setTimeout(function(){
      sendMessage({
        timeout,
        stamp,
        randomData: Math.random(),
      });
    }, 100 * timeout);
  }

  addAction(1);
  addAction(2);
  addAction(5);
  addAction(10);
  addAction(20);
  addAction(50);
  addAction(100);
  addAction(200);
  addAction(500);
  addAction(1000);
  addAction(2000);
  addAction(5000);
 }

 function sendMessage(payload) {
  iframe.contentWindow.postMessage({type: 'payload', payload: payload}, ORIGIN);
 }
 </script>
 </body>
diff --git a/store.html b/store.html
 <script>
 var port;

 var DB_NAME = 'actions_db';
 var DB_STORE_NAME = 'actions';
 var db;

 function openDb() {
  console.log("openDb ...");
  var req = indexedDB.open(DB_NAME, 1);
  req.onsuccess = function (e) {
    db = this.result;
    console.log("openDb DONE");
  };
  req.onerror = function (e) {
    console.error("openDb:", e.target.errorCode);
  };

  req.onupgradeneeded = function (e) {
    console.log("openDb.onupgradeneeded");
    var store = e.currentTarget.result.createObjectStore( DB_STORE_NAME, { autoIncrement: true });
  };
 }
 function getObjectStore(mode) {
  var tx = db.transaction(DB_STORE_NAME, mode);
  return tx.objectStore(DB_STORE_NAME);
 }

 function lsTest(){
    var test = 'test';
    try {
        localStorage.setItem(test, test);
        var test2 = localStorage.getItem(test);
        localStorage.removeItem(test);
        return test2 === test;
    } catch(e) {
        return false;
    }
 }

 function getFromLs() {
  if (!lsTest()) {
    return [];
  }

  return JSON.parse(localStorage.getItem('actions')) || [];
 }

 function addToDB(data) {
  var store = getObjectStore('readwrite');

  var req;
  try {
    req = store.add(data);
  } catch (e) {
    throw e;
  }
  req.onsuccess = function (e) {
    port.postMessage({
      status: 'ack',
      what: 'indexedDB',
    });
  };
  req.onerror = function() {
    console.error("addToDB error", this.error);
  };
 }

 function addToLs(data) {
  if (!lsTest()) {
    return;
  }

  var val = getFromLs();
  val.push(data);
  localStorage.setItem('actions', JSON.stringify(val));
  port.postMessage({
    status: 'ack',
    what: 'localStorage',
  });
 }

 function listener(event){
  // console.debug('2', event);
  var data = event.data;

  if (data.type === 'register' && event.ports.length === 1) {
    port = event.ports[0];
    port.postMessage({
      status: 'registered',
      localStorage: lsTest(),
      indexedDB: !!window.indexedDB,
      actions: getFromLs(),
    });
    return;
  }

  if (data.type === 'payload') {
    console.log('P', data);
    addToLs(data.payload);
    addToDB(data.payload);
    // port.postMessage({
    //   status: 'ack',
    // });
  }
 }

 openDb();
 //attach a listener for when postMessage calls come in...
 if (window.addEventListener){
  addEventListener("message", listener, false);
 }else{
  attachEvent("onmessage", listener);
 }
 </script>
	<body>
	<script>
	var ORIGIN = "http://localhost2.example.com";

	function onMessage(event){
	// console.log('1', event);

	const data = event.data;

	if (data.status === 'registered') {
	console.log('actions', data.actions);
	return;
	}

	if (data.status === 'ack') {
	console.log('ack', data.what);
	return;
	}
	}


	var stamp = Date.now();

	// initialize/register
	var channel = new MessageChannel();
	var iframe = document.createElement('iframe');
	iframe.style.display = "none";
	iframe.src = ORIGIN + "/store.html";
	iframe.sandbox = "allow-same-origin allow-scripts";
	iframe.addEventListener("load", onLoad);
	document.body.appendChild(iframe);

	function onLoad() {
	// Listen for messages on port1
	channel.port1.onmessage = onMessage;
	// Transfer port2 to the iframe
	iframe.contentWindow.postMessage({type: 'register'}, ORIGIN, [channel.port2]);

	function addAction(timeout) {
	setTimeout(function(){
	sendMessage({
	timeout,
	stamp,
	randomData: Math.random(),
	});
	}, 100 * timeout);
	}

	addAction(1);
	addAction(2);
	addAction(5);
	addAction(10);
	addAction(20);
	addAction(50);
	addAction(100);
	addAction(200);
	addAction(500);
	addAction(1000);
	addAction(2000);
	addAction(5000);
	}

	function sendMessage(payload) {
	iframe.contentWindow.postMessage({type: 'payload', payload: payload}, ORIGIN);
	}
	</script>
	</body>
	<script>
	var port;

	var DB_NAME = 'actions_db';
	var DB_STORE_NAME = 'actions';
	var db;

	function openDb() {
	console.log("openDb ...");
	var req = indexedDB.open(DB_NAME, 1);
	req.onsuccess = function (e) {
	db = this.result;
	console.log("openDb DONE");
	};
	req.onerror = function (e) {
	console.error("openDb:", e.target.errorCode);
	};

	req.onupgradeneeded = function (e) {
	console.log("openDb.onupgradeneeded");
	var store = e.currentTarget.result.createObjectStore( DB_STORE_NAME, { autoIncrement: true });
	};
	}
	function getObjectStore(mode) {
	var tx = db.transaction(DB_STORE_NAME, mode);
	return tx.objectStore(DB_STORE_NAME);
	}

	function lsTest(){
	var test = 'test';
	try {
	localStorage.setItem(test, test);
	var test2 = localStorage.getItem(test);
	localStorage.removeItem(test);
	return test2 === test;
	} catch(e) {
	return false;
	}
	}

	function getFromLs() {
	if (!lsTest()) {
	return [];
	}

	return JSON.parse(localStorage.getItem('actions')) \|\| [];
	}

	function addToDB(data) {
	var store = getObjectStore('readwrite');

	var req;
	try {
	req = store.add(data);
	} catch (e) {
	throw e;
	}
	req.onsuccess = function (e) {
	port.postMessage({
	status: 'ack',
	what: 'indexedDB',
	});
	};
	req.onerror = function() {
	console.error("addToDB error", this.error);
	};
	}

	function addToLs(data) {
	if (!lsTest()) {
	return;
	}

	var val = getFromLs();
	val.push(data);
	localStorage.setItem('actions', JSON.stringify(val));
	port.postMessage({
	status: 'ack',
	what: 'localStorage',
	});
	}

	function listener(event){
	// console.debug('2', event);
	var data = event.data;

	if (data.type === 'register' && event.ports.length === 1) {
	port = event.ports[0];
	port.postMessage({
	status: 'registered',
	localStorage: lsTest(),
	indexedDB: !!window.indexedDB,
	actions: getFromLs(),
	});
	return;
	}

	if (data.type === 'payload') {
	console.log('P', data);
	addToLs(data.payload);
	addToDB(data.payload);
	// port.postMessage({
	// status: 'ack',
	// });
	}
	}

	openDb();
	//attach a listener for when postMessage calls come in...
	if (window.addEventListener){
	addEventListener("message", listener, false);
	}else{
	attachEvent("onmessage", listener);
	}
	</script>