chore(website): Completes manifest, config, uses deferred etc

config.toml

@@ -1,6 +1,6 @@
 base_url = "/"
 title = "M-Labs"
-description = ""
+description = "M-Labs is a company and community who develops, manufactures and sells advanced open hardware devices and solutions. e.g Milkymist system-on-chip (SoC)"
 
 compile_sass = true
 highlight_code = true

static/js/as.js

@@ -0,0 +1,40 @@
+(function () {
+
+  var swRegistration;
+  var newWorker;
+  var isRefreshing = false;
+  var pathname = window.location.pathname;
+  var deferredPrompt;
+
+  window.addEventListener('beforeinstallprompt', (e) => {
+    console.log('[AS] Before install prompt');
+    // Prevent Chrome 67 and earlier from automatically showing the prompt
+    e.preventDefault();
+    // Stash the event so it can be triggered later.
+    deferredPrompt = e;
+  });
+
+  if ('serviceWorker' in navigator) {
+    console.info('Service Worker is supported');
+
+    window.addEventListener('load', function () {
+      navigator.serviceWorker.register('/sw.js', {
+        updateViaCache: 'all',
+      }).then(function (registration) {
+        swRegistration = registration;
+        console.log('[SW] registration successful with scope: ', swRegistration.scope);
+        console.log('[SW] is waiting: ', swRegistration.waiting);
+
+        navigator.serviceWorker.addEventListener('controllerchange', function () {
+          if (isRefreshing) {
+            return;
+          }
+          window.location.reload();
+          isRefreshing = true;
+        });
+      }, function (err) {
+        console.log('[SW] registration failed: ', err);
+      });
+    });
+  }
+})();

static/manifest.json

@@ -1,5 +1,10 @@
 {
- "name": "App",
+  "name": "M-Labs",
+  "short_name": "M-Labs",
+  "start_url": "/",
+  "background_color": "#fff",
+  "display": "standalone",
+  "theme_color": "#715ec7",
   "icons": [
     {
       "src": "\/android-icon-36x36.png",
@@ -36,6 +41,11 @@
       "sizes": "192x192",
       "type": "image\/png",
       "density": "4.0"
+    },
+    {
+      "src": "\/android-icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image\/png"
     }
   ]
 }

static/sw.js

@@ -0,0 +1,48 @@
+var CACHE_NAME = 'ml-02';
+var urlsToCache = [
+  '/css/bootstrap-4.3.1.min.css',
+  '/css/styles.css',
+  '/js/jquery-3.3.1.slim.min.js',
+  '/js/bootstrap-4.3.1.min.js',
+  '/js/popper-1.14.7.min.js',
+  '/js/hammer-2.0.8.js',
+  '/js/three-r76.js',
+  '/js/SolveSpaceControls.js',
+  '/js/SolveSpaceControls.js',
+  '/js/models/kf25.js',
+  '/js/models/viewport.js',
+  '/js/models/multiport.js',
+  '/js/models/chamber.js',
+  '/js/models/k526s-body.js',
+  '/js/models/k526s-head.js',
+  '/js/models/k526s-fixture.js',
+  '/js/models/k526s-adapter.js',
+  '/js/models/k526s-adapter-assy.js',
+];
+
+self.addEventListener('install', function(event) {
+  console.log('[SW] Install');
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(function(cache) {
+        console.log('[SW] add to cache');
+        return cache.addAll(urlsToCache);
+      })
+  );
+});
+
+self.addEventListener('fetch', function (event) {
+  console.log('[SW] Fetch');
+  event.respondWith(
+    caches.match(event.request).then(function (response) {
+      return response || fetch(event.request);
+    })
+  );
+});
+
+self.addEventListener('message', function (event) {
+  if (event.data.action === 'skipWaiting') {
+    self.skipWaiting();
+    caches.delete(CACHE_NAME);
+  }
+});

templates/_base.html

@@ -21,6 +21,7 @@
     <meta property="og:image" content={{ get_url(path='images/logo@2x.png', cachebust=true) }}>
     {% block meta %}{% endblock meta %}
 
+    <meta name="theme-color" content="#715ec7">
     <link rel="manifest" href="/manifest.json" />
 
     <link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-114x114.png') }}" sizes="114x114">
@@ -41,8 +42,6 @@
     <link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="shortcut icon" type="image/x-icon">
     <link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="icon" type="image/x-icon">
 
-    <link rel="stylesheet" href="{{ get_url(path='css/bootstrap-4.3.1.min.css', cachebust=true) }}">
-    <link rel="stylesheet" href="{{ get_url(path='css/styles.css', cachebust=true) }}">
     {% block styles %}{% endblock %}
   </head>
 
@@ -120,6 +119,25 @@
     {% endblock %}
     <!-- ./MAIN CONTENT -->
 
+    <noscript id="deferred-main-styles">
+      <link rel="stylesheet" href="{{ get_url(path='css/bootstrap-4.3.1.min.css', cachebust=true) }}">
+      <link rel="stylesheet" href="{{ get_url(path='css/styles.css', cachebust=true) }}">
+      {% block deferred_styles %}{% endblock %}
+    </noscript>
+    <script>
+      var loadDeferredMainStyles = function() {
+        var addStylesNode = document.getElementById("deferred-main-styles");
+        var replacement = document.createElement("div");
+        replacement.innerHTML = addStylesNode.textContent;
+        document.body.appendChild(replacement)
+        addStylesNode.parentElement.removeChild(addStylesNode);
+      };
+      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+      if (raf) raf(function() { window.setTimeout(loadDeferredMainStyles, 0); });
+      else window.addEventListener('load', loadDeferredMainStyles);
+    </script>
+
     <!-- FOOTER -->
 
     <footer class="container text-center text-md-left">
@@ -153,6 +171,8 @@
     </div>
 
 
+    <script src="{{ get_url(path='js/as.js', cachebust=true) }}"></script>
+
     <script src="{{ get_url(path='js/jquery-3.3.1.slim.min.js', cachebust=true) }}"></script>
     <script src="{{ get_url(path='js/popper-1.14.7.min.js', cachebust=true) }}"></script>
     <script src="{{ get_url(path='js/bootstrap-4.3.1.min.js', cachebust=true) }}"></script>

templates/index.html

@@ -13,7 +13,7 @@
 
             <h1>Open tools for open physics.</h1>
 
-            <img src="{{ get_url(path='images/ion@2x.png', cachebust=true) }}" height="12" align="ion">
+            <img src="{{ get_url(path='images/ion@2x.png', cachebust=true) }}" height="12" alt="ion">
 
           </div>