d3x0r/index.html

## index.html
<HTML>
    <HEAD>
    </HEAD>
    <BODY>
	<DIV class="fullpage">
		<IFrame  class="fullpage"ID="Login"></IFRAME>
	</DIV>
	<DIV class="fullpage" style="display:none;">
		<IFrame  class="fullpage"ID="App"></IFRAME>
	</DIV>
    </BODY>

	<SCRIPT>

		var appContainer = document.getElementById( "App" ).parentNode;
		var appTarget = document.getElementById( "App" ).contentWindow.document;

    // dynamic page content, this is recieved from a WebSocket.
		var newPage = `<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="styles.css">
</HEAD>
<BODY>
		<IMG src="images/Logo.png"></IMG>

</BODY>
</HTML>
`

		var redirectHandler = appTarget.createElement( "script" );
		redirectHandler.src = "redirectLoader.js";
		appTarget.body.parentNode.appendChild( redirectHandler );
		//appTarget.body.parentNode.insertBefore( redirectHandler, appTarget.head );
		redirectHandler.addEventListener( "load", ()=>{
			appTarget.body.parentNode.innerHTML = newPage;
      // setting the inner HTML squashes the above script node.... put it back?  Does it matter?
			appTarget.body.parentNode.appendChild( redirectHandler );
		});

	</SCRIPT>

<script>
   // This part of the script shouldn't be nessecary , but maybe it owuld have been enough for the above
  // to get registered?
	if ('serviceWorker' in navigator) {
	  window.addEventListener('load', function() {
	    navigator.serviceWorker.register('redirectWorker.js').then(function(registration) {
	      // Registration was successful
	      console.log('ServiceWorker registration successful with scope: ', registration.scope);
	    }, function(err) {
	      // registration failed :(
	      console.log('ServiceWorker registration failed: ', err);
	    });
	  });
	}


</SCRIPT>


</HTML>

## redirectLoader.js


	if ('serviceWorker' in navigator) {
		window.addEventListener('load', function() {
			var messageChannel = new MessageChannel();
			messageChannel.port1.onmessage = function(event) {
				console.log("Response from the SW : ", event.data.message);
			}

			navigator.serviceWorker.register('redirectWorker.js').then(function(registration) {
				// Registration was successful
				console.log('(rloader)ServiceWorker registration successful with scope: ', registration.scope);
				navigator.serviceWorker.controller.postMessage("Client 1 says '"+"Test1"+"'");
			}, function(err) {
				// registration failed :(
				console.log('(rloader)ServiceWorker registration failed: ', err);
			});
		});
	}

console.log( "Service loader ran once?" );


## redirectWorker.js

self.addEventListener('install', function(e) {
	console.log( "Installation event");
} );

self.addEventListener( "message", function (event) {
	console.log( "worker message: ", event );
} );


self.addEventListener('fetch', function(event) {
	console.log("FETCH EVENT", event.request.url);
	console.log("FETCH EVENT", event );
	self.clients.matchAll()
    .then((clients) => {
	console.log( "clients:", clients );
      clients.forEach(function(client) {
        client.postMessage({msg: 'Hello from SW'})
     })
  })

 event.respondWith(

   caches.match(event.request).then(function(response) {
     return response || fetch(event.request);
   })
 );
});

console.log( "Service ran once?" );
	<HTML>
	<HEAD>
	</HEAD>
	<BODY>
	<DIV class="fullpage">
	<IFrame class="fullpage"ID="Login"></IFRAME>
	</DIV>
	<DIV class="fullpage" style="display:none;">
	<IFrame class="fullpage"ID="App"></IFRAME>
	</DIV>
	</BODY>

	<SCRIPT>

	var appContainer = document.getElementById( "App" ).parentNode;
	var appTarget = document.getElementById( "App" ).contentWindow.document;

	// dynamic page content, this is recieved from a WebSocket.
	var newPage = `<HTML>
	<HEAD>
	<link rel="stylesheet" type="text/css" href="styles.css">
	</HEAD>
	<BODY>
	<IMG src="images/Logo.png"></IMG>

	</BODY>
	</HTML>
	`

	var redirectHandler = appTarget.createElement( "script" );
	redirectHandler.src = "redirectLoader.js";
	appTarget.body.parentNode.appendChild( redirectHandler );
	//appTarget.body.parentNode.insertBefore( redirectHandler, appTarget.head );
	redirectHandler.addEventListener( "load", ()=>{
	appTarget.body.parentNode.innerHTML = newPage;
	// setting the inner HTML squashes the above script node.... put it back? Does it matter?
	appTarget.body.parentNode.appendChild( redirectHandler );
	});

	</SCRIPT>

	<script>
	// This part of the script shouldn't be nessecary , but maybe it owuld have been enough for the above
	// to get registered?
	if ('serviceWorker' in navigator) {
	window.addEventListener('load', function() {
	navigator.serviceWorker.register('redirectWorker.js').then(function(registration) {
	// Registration was successful
	console.log('ServiceWorker registration successful with scope: ', registration.scope);
	}, function(err) {
	// registration failed :(
	console.log('ServiceWorker registration failed: ', err);
	});
	});
	}


	</SCRIPT>


	</HTML>



	if ('serviceWorker' in navigator) {
	window.addEventListener('load', function() {
	var messageChannel = new MessageChannel();
	messageChannel.port1.onmessage = function(event) {
	console.log("Response from the SW : ", event.data.message);
	}

	navigator.serviceWorker.register('redirectWorker.js').then(function(registration) {
	// Registration was successful
	console.log('(rloader)ServiceWorker registration successful with scope: ', registration.scope);
	navigator.serviceWorker.controller.postMessage("Client 1 says '"+"Test1"+"'");
	}, function(err) {
	// registration failed :(
	console.log('(rloader)ServiceWorker registration failed: ', err);
	});
	});
	}

	console.log( "Service loader ran once?" );

	self.addEventListener('install', function(e) {
	console.log( "Installation event");
	} );

	self.addEventListener( "message", function (event) {
	console.log( "worker message: ", event );
	} );


	self.addEventListener('fetch', function(event) {
	console.log("FETCH EVENT", event.request.url);
	console.log("FETCH EVENT", event );
	self.clients.matchAll()
	.then((clients) => {
	console.log( "clients:", clients );
	clients.forEach(function(client) {
	client.postMessage({msg: 'Hello from SW'})
	})
	})

	event.respondWith(

	caches.match(event.request).then(function(response) {
	return response \|\| fetch(event.request);
	})
	);
	});

	console.log( "Service ran once?" );