index.html

<script>
	var channel = new MessageChannel(),
	    mySwPort = channel.port1,
	    // port 2 plays in at another time... I think not needed rn
	    promises = [new Promise(function (resolve, reject) {
	    	mySwPort.start();
	    	mySwPort.addEventListener('message', function (message) {
	    		console.log('resolving mySwPort %o', message);
	    		resolve({});
	    	})
	    })/* More here at a future time... */];

	window.addEventListener("message", function (m) {
		console.log("main window got a message %o", m);
	});

	if ('serviceWorker' in navigator) {
		navigator.serviceWorker.register('sw.js').then(function(registration) {
			// Registration was successful
				console.log('ServiceWorker registration successful with scope: ',    registration.scope);
				if (navigator.serviceWorker.controller) {
					navigator.serviceWorker.controller.postMessage({topic: 'connect'}, [mySwPort]);
				} else {
					console.log('no service worker in the main page');
				}

			}).catch(function(err) {
			console.log('ServiceWorker registration failed: ', err);
		});
	};
	
	Promise.all(promises).then(function () {
		console.log('now we are inited');
	}).catch(function (e) {
		console.error('oh geez', e);
	});
</script>

sw.js

self.addEventListener('message', function (message) {
   if (message.data.topic == 'connect') {
      console.log('main page service worker received! %o', message.data.topic);
      message.ports[0].postMessage({topic: 'Hello from the sw!'});
      console.log('main page posted back to the port');
   } else {
      console.log('what even happened?');
   }
});