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

4 years ago · 54cb76eece
parent 2aec9fb4a0
commit 54cb76eece
7 changed files with 161 additions and 43 deletions
--- a/config.toml
+++ b/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
--- a/static/android-icon-512x512.png
+++ b/static/android-icon-512x512.png
--- a/static/js/as.js
+++ b/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);
+      });
+    });
+  }
+})();
--- a/static/manifest.json
+++ b/static/manifest.json
@ -1,41 +1,51 @@
 {
- "name": "App",
- "icons": [
-  {
-   "src": "\/android-icon-36x36.png",
-   "sizes": "36x36",
-   "type": "image\/png",
-   "density": "0.75"
-  },
-  {
-   "src": "\/android-icon-48x48.png",
-   "sizes": "48x48",
-   "type": "image\/png",
-   "density": "1.0"
-  },
-  {
-   "src": "\/android-icon-72x72.png",
-   "sizes": "72x72",
-   "type": "image\/png",
-   "density": "1.5"
-  },
-  {
-   "src": "\/android-icon-96x96.png",
-   "sizes": "96x96",
-   "type": "image\/png",
-   "density": "2.0"
-  },
-  {
-   "src": "\/android-icon-144x144.png",
-   "sizes": "144x144",
-   "type": "image\/png",
-   "density": "3.0"
-  },
-  {
-   "src": "\/android-icon-192x192.png",
-   "sizes": "192x192",
-   "type": "image\/png",
-   "density": "4.0"
-  }
- ]
+  "name": "M-Labs",
+  "short_name": "M-Labs",
+  "start_url": "/",
+  "background_color": "#fff",
+  "display": "standalone",
+  "theme_color": "#715ec7",
+  "icons": [
+    {
+      "src": "\/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image\/png",
+      "density": "0.75"
+    },
+    {
+      "src": "\/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image\/png",
+      "density": "1.0"
+    },
+    {
+      "src": "\/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image\/png",
+      "density": "1.5"
+    },
+    {
+      "src": "\/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image\/png",
+      "density": "2.0"
+    },
+    {
+      "src": "\/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image\/png",
+      "density": "3.0"
+    },
+    {
+      "src": "\/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image\/png",
+      "density": "4.0"
+    },
+    {
+      "src": "\/android-icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image\/png"
+    }
+  ]
 }
--- a/static/sw.js
+++ b/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);
+  }
+});
--- a/templates/_base.html
+++ b/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>
--- a/templates/index.html
+++ b/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>