feat: inform user about failed service worker

Partially address #19

client/src/app.scss

@@ -556,6 +556,10 @@ html {
   text-align: center;
 }
 
+.text-left {
+  text-align: left;
+}
+
 .text-bold {
   font-weight: bold;
 }

client/src/embedded-browser/browser-frame.html

@@ -12,6 +12,28 @@
 
       <span if.bind="missedCache.includes('aurelia')" class="text-error"><br>Note it can take up to a minute or two to trace <strong>a new dev release of Aurelia2</strong>, due to latency of downloading many small files from jsdelivr.</span>
     </p>
+
+    <div if.bind="serviceWorkerFailed">
+      <h3 class="text-error">Could not boot up service worker.</h3>
+      <div class="text-left">
+        <p if.bind="chrome">
+          If you are using Brave browser, first try turning off Shields on current page.<br>
+          If it's other Chromium based browsers (e.g. Chrome, Edge, Brave), try turning on <span class="badge bg-black">Allow sites to save and read cookie data (recommended)</span> if you manually turned it off in <span class="badge bg-black">Cookies and site data</span>.
+        </p>
+        <p if.bind="firefox">
+          If you customized Firefox <span class="badge bg-black">Enhanced Tracking Protection</span>, try <span class="text-warning">NOT to set the cookies restriction to <span class="badge bg-black">All third-party cookies</span> or <span class="badge bg-black">All cookies</span></span>.
+        </p>
+        <p if.bind="safari">
+          We are not sure about the possible Safari setting caused this.
+        </p>
+        <p if.bind="chrome || firefox">
+          Are you wondering why browser settings use term <span class="badge bg-black">Cookies</span> to mean <span class="badge bg-black">Cookies, localStorage, Service Worker and maybe few more</span>? We wonder that too, we guess they tried to make it easier to understand for the general users, but this is very confusing for the developers like us.
+        </p>
+        <p>
+          Please report an <a href="https://github.com/dumberjs/dumber-gist/issues" target="_blank" class="btn clean">GitHub issue</a> if you cannot resolve this.
+        </p>
+      </div>
+    </div>
   </div>
   <div if.bind="bundlerError" class="error">
     <span repeat.for="err of errors">${err}<br if.bind="!$last"></span>

client/src/embedded-browser/browser-frame.js

@@ -14,6 +14,10 @@ export class BrowserFrame {
   @bindable isBundling;
   @bindable bundlerError;
   missedCache = [];
+  safari = !!global.safari;
+  firefox = !!global.netscape;
+  chrome = !!global.chrome;
+  serviceWorkerFailed = false;
 
   constructor(ea, dndService, sessionId, historyTracker, consoleLog, oauth, user) {
     this.ea = ea;
@@ -28,14 +32,16 @@ export class BrowserFrame {
     this.goBack = this.goBack.bind(this);
     this.goForward = this.goForward.bind(this);
     this.missCache = this.missCache.bind(this);
+    this.panic = this.panic.bind(this);
   }
 
   attached() {
     this.subscribers = [
       this.ea.subscribe('history-back', this.goBack),
       this.ea.subscribe('history-forward', this.goForward),
       this.ea.subscribe('history-reload', this.rebuildFrame),
-      this.ea.subscribe('miss-cache', this.missCache)
+      this.ea.subscribe('miss-cache', this.missCache),
+      this.ea.subscribe('service-worker-panic', this.panic)
     ];
   }
 
@@ -82,6 +88,10 @@ export class BrowserFrame {
     }
   }
 
+  panic() {
+    this.serviceWorkerFailed = true;
+  }
+
   rebuildFrame() {
     this.historyTracker.reset();
 

client/src/worker-service.js

@@ -80,10 +80,15 @@ export class WorkerService {
     let resolveWorker = null;
     this._serviceWorkerUp = new Promise(resolve => resolveWorker = resolve);
 
+    const panic = setTimeout(() => {
+      this.ea.publish('service-worker-panic');
+    }, 5000);
+
     const handleMessage = e => {
       if (!e.data) return;
       const {type} = e.data;
       if (type === 'worker-up') {
+        clearTimeout(panic);
         console.info(`Service Worker is up on ${host}`);
         removeEventListener('message', handleMessage);
         addEventListener('message', this._workerSaid);
@@ -95,6 +100,7 @@ export class WorkerService {
     };
 
     addEventListener('message', handleMessage);
+
   }
 
   // Handle both bundler worker and service worker.