@breakside/jskit 2022.49.1 → 2022.52.0

package/Root/Templates/html/${PROJECT_NAME}/www/HTMLAppBootstrapper.js

@@ -7,13 +7,18 @@ window.HTMLAppBootstrapper = function(rootElement, jskitapp){
     if (this === undefined){
         return new HTMLAppBootstrapper(rootElement, jskitapp);
     }
-    this.app = jskitapp;
     this.rootElement = rootElement;
-    this.preflightID = jskitapp.preflightId;
-    this.preflightSrc = jskitapp.preflightSrc;
-    this.serviceWorkerSrc = jskitapp.serviceWorkerSrc;
-    this.appSrc = jskitapp.appSrc;
-    this.appCss = jskitapp.appCss;
+    if (jskitapp.TEMPLATE === "JSKIT_APP"){
+        window.bootstrapper = this;
+        this.app = null;
+    }else{
+        this.app = jskitapp;
+        this.preflightID = jskitapp.preflightId;
+        this.preflightSrc = jskitapp.preflightSrc;
+        this.serviceWorkerSrc = jskitapp.serviceWorkerSrc;
+        this.appSrc = jskitapp.appSrc;
+        this.appCss = jskitapp.appCss;
+    }
     this.status = HTMLAppBootstrapper.STATUS.notstarted;
     this.statusDispatchTimeoutID = null;
     this.preflightChecks = [];
@@ -45,7 +50,8 @@ HTMLAppBootstrapper.STATUS = {
     appRunning: 'appRunning',
     appLaunched: 'appLaunched',
     appLaunchFailure: 'appLaunchFailure',
-    appRequiresNoOtherInstances: 'appRequiresNoOtherInstances'
+    appRequiresNoOtherInstances: 'appRequiresNoOtherInstances',
+    appCrashed: 'appCrashed'
 };
 
 HTMLAppBootstrapper.prototype = {
@@ -62,6 +68,9 @@ HTMLAppBootstrapper.prototype = {
     },
 
     run: function(){
+        if (this.app === null){
+            return;
+        }
         this.log_info("boot", "Booting " + this.app.bundleId + ", build " + this.app.buildId);
         if (this.serviceWorkerSrc && window.navigator.serviceWorker){
             this._installUsingServiceWorker(window.navigator.serviceWorker);
@@ -209,6 +218,10 @@ HTMLAppBootstrapper.prototype = {
         this.setStatus(HTMLAppBootstrapper.STATUS.appLaunched);
     },
 
+    applicationDidCrash: function(application){
+        this.setStatus(HTMLAppBootstrapper.STATUS.appCrashed);
+    },
+
     include: function(src, async, callback, errorCallback){
         try{
             this.loadingScripts[src] = {
@@ -238,10 +251,12 @@ HTMLAppBootstrapper.prototype = {
     },
 
     setStatus: function(status){
-        this.log_info("status", this.status + " -> " + status);
+        if (status !== HTMLAppBootstrapper.STATUS.appCrashed){
+            this.log_info("status", this.status + " -> " + status);
+        }
         this.status = status;
         var bootstrapper = this;
-        if (status === HTMLAppBootstrapper.STATUS.appRunning || status === HTMLAppBootstrapper.STATUS.appLaunched){
+        if (status === HTMLAppBootstrapper.STATUS.appRunning || status === HTMLAppBootstrapper.STATUS.appLaunched || status === HTMLAppBootstrapper.STATUS.appCrashed){
             if (this.statusDispatchTimeoutID !== null){
                 clearTimeout(this.statusDispatchTimeoutID);
                 this.statusDispatchTimeoutID = null;

package/Root/Templates/html/${PROJECT_NAME}/www/index.html

@@ -7,13 +7,7 @@
   <meta name="theme-color" media="(prefers-color-scheme: dark)" content="rgb(38,38,38)">
   <title></title>
   <base href="/">
-  <style id="bootstrap-style" type="text/css">
-  @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,600&display=swap');
-  * {
-    cursor: default;
-    user-select: none;
-    -webkit-user-select: none;
-  }
+  <style type="text/css">
   #splash {
     position: fixed;
     top: 0;
@@ -21,8 +15,9 @@
     right: 0;
     bottom: 0;
     background-color: rgb(255,255,255);
+    z-index: 100;
   }
-  #status {
+  #splash-status {
     position: absolute;
     opacity: 0;
     top: 50%;
@@ -31,14 +26,17 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    font: 300 16px/24px "Source Sans Pro", "Helvetica", sans-serif;
+    font: 300 16px/24px "Helvetica", sans-serif;
     height: 24px;
     text-align: center;
     transition-property: opacity, color, margin-top;
     transition-duration: .25s;
     color: rgb(164,164,164);
+    cursor: default;
+    user-select: none;
+    -webkit-user-select: none;
   }
-  #details {
+  #splash-details {
     position: absolute;
     opacity: 0;
     top: 50%;
@@ -47,13 +45,16 @@
     left: 40px;
     overflow: hidden;
     text-overflow: ellipsis;
-    font: 300 16px/20px "Source Sans Pro", "Helvetica", sans-serif;
+    font: 300 16px/20px "Helvetica", sans-serif;
     text-align: center;
     transition: opacity linear .5s .5s;
     opacity: 0;
     color: rgb(192,192,192);
+    cursor: default;
+    user-select: none;
+    -webkit-user-select: none;
   }
-  #progress {
+  #splash-progress {
     opacity: 0;
     position: absolute;
     box-sizing: border-box;
@@ -69,33 +70,36 @@
     transition-duration: .25s;
     background-color: rgba(245,245,245);
     box-shadow: inset 0 0 2px rgba(0,0,0,0.15);
+    cursor: default;
+    user-select: none;
+    -webkit-user-select: none;
   }
-  #progress-bar {
+  #splash-progress-bar {
     height: 100%;
     width: 0%;
     background-color: rgb(224,224,224);
   }
-  #splash.error #status {
+  #splash.error #splash-status {
     font-weight: 600;
   }
-  #splash.error #details {
+  #splash.error #splash-details {
     opacity: 1;
   }
   @media (prefers-color-scheme: dark) {
     #splash {
       background-color: rgb(38,38,38);
     }
-    #status {
+    #splash-status {
       color: rgb(128,128,128);
     }
-    #details {
+    #splash-details {
       color: rgb(102,102,102);
     }
-    #progress {
+    #splash-progress {
       background-color: rgba(26,26,26);
       box-shadow: inset 0 0 2px rgba(0,0,0,0.15);
     }
-    #progress-bar {
+    #splash-progress-bar {
       background-color: rgb(80,80,80);
     }
   }
@@ -103,9 +107,9 @@
 </head>
 <body>
   <div id="splash" role="none presentation">
-    <div id="status"></div>
-    <div id="progress" role="progressbar" aria-label="Application loading progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-hidden="true"><div id="progress-bar"></div></div>
-    <div id="details"></div>
+    <div id="splash-status"></div>
+    <div id="splash-progress" role="progressbar" aria-label="Application loading progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-hidden="true"><div id="splash-progress-bar"></div></div>
+    <div id="splash-details"></div>
   </div>
   <script type="text/javascript" src="HTMLAppBootstrapper.js"></script>
   <script type="text/javascript" jskit>
@@ -115,11 +119,10 @@
   (function(){
     var app = {TEMPLATE: "JSKIT_APP"};
     var splash = document.getElementById('splash');
-    var statusLabel = document.getElementById('status');
-    var detailsLabel = document.getElementById('details');
-    var bootstrapStyle = document.getElementById('bootstrap-style');
-    var progress = document.getElementById('progress');
-    var progressBar = document.getElementById('progress-bar');
+    var statusLabel = document.getElementById('splash-status');
+    var detailsLabel = document.getElementById('splash-details');
+    var progress = document.getElementById('splash-progress');
+    var progressBar = document.getElementById('splash-progress-bar');
     var bootstrapper = HTMLAppBootstrapper(document.body, app);
     var downListener = null;
     bootstrapper.onstatus = function index_boostrapper_status(){
@@ -165,9 +168,9 @@
           progress.style.opacity = 0;
           progress.setAttribute("aria-hidden", "true");
           splash.className = 'error';
-          statusLabel.innerHTML = "Apologies, but we couldn't start the application";
+          statusLabel.innerHTML = "Unable to Start Application";
           detailsLabel.style.opacity = 1;
-          detailsLabel.innerHTML = "Don't worry, it wasn't anything you did, and it isn't something we expect to happen under normal usage.<br>We've notified our engineers of the problem, and the best thing you can do is try again soon.";
+          detailsLabel.innerHTML = "Apologies, but we couldn't start the application.  Don't worry, it wasn't anything you did, and it isn't something we expect to happen under normal usage.<br>We've notified our engineers of the problem, and the best thing you can do is try again soon.";
           reportError(bootstrapper.error, bootstrapper.getLogs());
           break;
         case S.appRequiresNoOtherInstances:
@@ -183,8 +186,20 @@
           break;
         case S.appLaunched:
           window.requestAnimationFrame(function(){
+            progress.style.opacity = 0;
+            progress.setAttribute("aria-hidden", "true");
+            statusLabel.style.opacity = 0;
             splash.parentNode.removeChild(splash);
-            bootstrapStyle.parentNode.removeChild(bootstrapStyle);
+          });
+          break;
+        case S.appCrashed:
+          document.body.appendChild(splash);
+          statusLabel.innerHTML = "Application Error";
+          detailsLabel.innerHTML = "Apologies, but the application needs to restart.  We've notified our engineers of the problem.<br><br><button onclick='location.reload()'>Restart</button>";
+          window.requestAnimationFrame(function(){
+            splash.className = 'error';
+            statusLabel.style.opacity = 1;
+            detailsLabel.style.opacity = 1;
           });
           break;
       }

package/Root/Templates/html/${PROJECT_NAME}/www/service-worker.js

@@ -12,18 +12,19 @@ function install(){
   for (var path in app.sources){
     source = app.sources[path];
     if (source.required){
-      required.push(path);
+      required.push({path: path, cache: source.cache});
     }
   }
   var loaded = 0;
   var total = required.length;
   return clients.matchAll({includeUncontrolled: true}).then(function(clients){
-    var client = clients[0];
     return caches.open(cacheKey).then(function(cache){
-      return Promise.all(required.map(function(path){
-        return cache.add(path).then(function(){
+      return Promise.all(required.map(function(resource){
+        return cache.add(new Request(resource.path, {cache: resource.cache || "default"})).then(function(){
           ++loaded;
-          client.postMessage({type: 'progress', loaded: loaded, total: total});
+          for (let client of clients){
+            client.postMessage({type: 'progress', loaded: loaded, total: total});
+          }
         });
       }));
     });

package/package.json

@@ -9,7 +9,7 @@
     "node": ">=10.10.0"
   },
   "name": "@breakside/jskit",
-  "version": "2022.49.1",
+  "version": "2022.52.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "files": [
     "*"