render file preview iframe in subdomain

preview/index.html

@@ -0,0 +1 @@
+Loading...

preview/service-worker.js

@@ -0,0 +1,59 @@
+const CACHE_NAME = 'webmaker-vfiles';
+self.addEventListener('fetch', function(event) {
+	// console.log('fetch event', event.request.url, event.request);
+	event.respondWith(
+		caches.open(CACHE_NAME).then(function(cache) {
+			return cache
+				.match(event.request)
+				.then(response => {
+					// console.log('responding with ', response);
+					if (response !== undefined) {
+						return response;
+					}
+					return fetch(event.request);
+				})
+				.catch(function(e) {
+					// Fall back to just fetch()ing the request if some unexpected error
+					// prevented the cached response from being valid.
+					console.warn(
+						'Couldn\'t serve response for "%s" from cache: %O',
+						event.request.url,
+						e
+					);
+					return fetch(event.request);
+				});
+		})
+	);
+	// }
+});
+
+function getContentType(url) {
+	if (url.match(/\.html$/)) {
+		return 'text/html; charset=UTF-8';
+	} else if (url.match(/\.css$/)) {
+		return 'text/css; charset=UTF-8';
+	}
+	if (url.match(/\.js$/)) {
+		return 'application/javascript; charset=UTF-8';
+	}
+	return 'text/html; charset=UTF-8';
+}
+
+self.addEventListener('message', function(e) {
+	// console.log('message aya sw main', e.data);
+	caches.open(CACHE_NAME).then(function(cache) {
+		for (const url in e.data) {
+			if (Object.prototype.hasOwnProperty.call(e.data, url)) {
+				// console.log('Received data', url, e.data[url])
+				cache.put(
+					url,
+					new Response(e.data[url], {
+						headers: {
+							'Content-Type': getContentType(url)
+						}
+					})
+				);
+			}
+		}
+	});
+});

preview/talk.html

@@ -0,0 +1,72 @@
+Hello
+
+<script>
+	if (
+		'serviceWorker' in navigator
+	) {
+		// Delay registration until after the page has loaded, to ensure that our
+		// precaching requests don't degrade the first visit experience.
+		// See https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/registration
+		window.addEventListener('load', function () {
+			// Your service-worker.js *must* be located at the top-level directory relative to your site.
+			// It won't be able to control pages unless it's located at the same level or higher than them.
+			// *Don't* register service worker file in, e.g., a scripts/ sub-directory!
+			// See https://github.com/slightlyoff/ServiceWorker/issues/468
+			navigator.serviceWorker
+				.register('service-worker.js')
+				.then(function (reg) {
+					// updatefound is fired if service-worker.js changes.
+					reg.onupdatefound = function () {
+						// The updatefound event implies that reg.installing is set; see
+						// https://w3c.github.io/ServiceWorker/#service-worker-registration-updatefound-event
+						var installingWorker = reg.installing;
+
+						installingWorker.onstatechange = function () {
+							/* eslint-disable default-case */
+							switch (installingWorker.state) {
+								case 'installed':
+									if (navigator.serviceWorker.controller) {
+										// At this point, the old content will have been purged and the fresh content will
+										// have been added to the cache.
+										// It's the perfect time to display a "New content is available; please refresh."
+										// message in the page's interface.
+										console.log('New or updated content is available.');
+
+									} else {
+										// At this point, everything has been precached.
+										// It's the perfect time to display a "Content is cached for offline use." message.
+										console.log('Content is now available offline!');
+										if (window.alertsService) {
+											window.alertsService.add(
+												'Web Maker is now ready to be used offline.'
+											);
+										}
+									}
+									break;
+
+								case 'redundant':
+									console.error(
+										'The installing service worker became redundant.'
+									);
+									break;
+							}
+						};
+					};
+				})
+				.catch(function (e) {
+					console.error('Error during service worker registration:', e);
+				});
+		});
+	}
+
+</script>
+
+
+<script>
+	console.log('controller', navigator.serviceWorker.controller)
+	window.addEventListener('message', (e) => {
+		console.log(88, e.data);
+		navigator.serviceWorker.controller.postMessage(e.data);
+	});
+
+</script>

src/components/CodeEditor.jsx

@@ -244,8 +244,6 @@ export default class CodeEditor extends Component {
 	}
 
 	async initEditor() {
-		console.log('init editor');
-
 		this.editorReadyDeferred = deferred();
 		await this.loadDeps();
 

src/components/ContentWrapFiles.jsx

@@ -226,7 +226,7 @@ export default class ContentWrapFiles extends Component {
 		);
 		// Namespace all file paths to '/user' because thats what the service worker
 		// recognizes.
-		const files = linearizeFiles(assignFilePaths(duplicateFiles, '/user'));
+		const files = linearizeFiles(assignFilePaths(duplicateFiles, ''));
 
 		files.forEach(file => {
 			obj[file.path] = file.content || '';
@@ -245,13 +245,16 @@ export default class ContentWrapFiles extends Component {
 			}
 		});
 
-		navigator.serviceWorker.controller.postMessage(obj);
+		// navigator.serviceWorker.controller.postMessage(obj);
+		window.talkFrame.contentWindow.postMessage(obj, '*');
 
 		if (this.detachedWindow) {
 			log('✉️ Sending message to detached window');
 			this.detachedWindow.postMessage({ contents: '/user/index.html' }, '*');
 		} else {
-			this.frame.src = '/user/index.html';
+			setTimeout(() => {
+				this.frame.src = 'https://preview.webmaker.com:8083/index.html';
+			}, 10);
 		}
 	}
 	cleanupErrors() {
@@ -650,11 +653,15 @@ export default class ContentWrapFiles extends Component {
 				<div class="demo-side" id="js-demo-side" style="">
 					<iframe
 						ref={el => (this.frame = el)}
-						src="/user/index.html"
+						src="https://preview.webmaker.com:8083/index.html"
 						frameborder="0"
 						id="demo-frame"
 						allowfullscreen
 					/>
+					<iframe
+						src="https://preview.webmaker.com:8083/talk.html"
+						id="talkFrame"
+					/>
 					<PreviewDimension ref={comp => (this.previewDimension = comp)} />
 					<Console
 						logs={this.state.logs}