Update splash screen and auto version updates

2024-08-26 11:53:16 +02:00
parent 61dc88b871
commit 7a2593468e
85 changed files with 744 additions and 246 deletions
--- a/Frontend/patient_manager/web/favicon.png
+++ b/Frontend/patient_manager/web/favicon.png
--- a/Frontend/patient_manager/web/index.html
+++ b/Frontend/patient_manager/web/index.html
@@ -1,6 +1,4 @@
-<!DOCTYPE html>
-<html>
-<head>
+<!DOCTYPE html><html><head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.
@@ -27,14 +25,11 @@
  <link rel="apple-touch-icon" href="icons/apple-touch-icon.png">

  <!-- Favicon -->
-  <!-- <link rel="icon" type="image/png" href="logo.png"/> -->
-  <link rel="icon" href="favicon.png">
-  <!-- <link href="Logo-01.png" rel="icon" media="(prefers-color-scheme: light)">
-  <link href="Logo-02.png"  rel="icon" media="(prefers-color-scheme: dark)"> -->
+  <link rel="icon" href="Logo-001.png">

  <title>Mzansi Innovation Hub</title>
  <link rel="manifest" href="manifest.json">
-  <style>
+  <!-- <style>
    .main {
      width: 100%;
      height: 100vh;
@@ -61,46 +56,189 @@
      overflow: hidden
      
    }
-</style>
+</style> -->
+  
+  
+  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
+  
+ 
+  <style id="splash-screen-style">
+    html {
+      height: 100%
+    }
+
+    body {
+      margin: 0;
+      min-height: 100%;
+      background-color: #3A4454;
+          background-size: 100% 100%;
+    }
+
+    .center {
+      margin: 0;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      -ms-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
+    }
+
+    .contain {
+      display:block;
+      width:100%; height:100%;
+      object-fit: contain;
+    }
+
+    .stretch {
+      display:block;
+      width:100%; height:100%;
+    }
+
+    .cover {
+      display:block;
+      width:100%; height:100%;
+      object-fit: cover;
+    }
+
+    .bottom {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      -ms-transform: translate(-50%, 0);
+      transform: translate(-50%, 0);
+    }
+
+    .bottomLeft {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
+
+    .bottomRight {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+    }
+  </style>
+  <script id="splash-screen-script" defer>
+    function removeSplashFromWeb() {
+      document.getElementById("splash")?.remove();
+      document.getElementById("splash-branding")?.remove();
+      document.body.style.background = "transparent";
+    }
+  </script>
 </head>
 <body class="bg">
-  <script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
-  <script type="text/javascript">
+  <picture id="splash-branding">
+    <source srcset="splash/img/branding-1x.png 1x, splash/img/branding-2x.png 2x, splash/img/branding-3x.png 3x, splash/img/branding-4x.png 4x" media="(prefers-color-scheme: light)">
+    <source srcset="splash/img/branding-dark-1x.png 1x, splash/img/branding-dark-2x.png 2x, splash/img/branding-dark-3x.png 3x, splash/img/branding-dark-4x.png 4x" media="(prefers-color-scheme: dark)">
+    <img class="bottom" aria-hidden="true" src="splash/img/branding-1x.png" alt="">
+  </picture>
+  <picture id="splash">
+      <source srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x, splash/img/light-4x.png 4x" media="(prefers-color-scheme: light)">
+      <source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x, splash/img/dark-4x.png 4x" media="(prefers-color-scheme: dark)">
+      <img class="center" aria-hidden="true" src="splash/img/light-1x.png" alt="">
+  </picture>
+
+  
+  <script src="flutter_bootstrap.js" defer></script>
+
+  <!-- File Picker & PDF viewer -->
+  <script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js" defer></script>
+  <script type="text/javascript" defer>
    pdfjsLib.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js";
  </script>
-  <script src="flutter_bootstrap.js?v=0.0.0.36" async></script>
-  <div id="loading_indicator" class="main">
-    <div><img class="indicator" src="Logo-loading.gif" /></div>  
-    

-      <div class="writting">
-        Prowered by Mzanzi Innovation Hub
-      </div>
-  </div>
-  <script>
-    // window
-    // .matchMedia('(prefers-color-scheme: dark)')
-    // .addEventListener('change', setFavicon);
-
-    const setFavicon = () => {
-    const favicon = document.querySelector('link[rel="icon"]');
-    favicon.href = (window.matchMedia('(prefers-color-scheme: dark)').matches)
+  <!-- Favicon Switcher based on system theme -->
+  <script defer>
+    const setFavicon = () => 
+    {
+      const favicon = document.querySelector('link[rel="icon"]');
+      favicon.href = (window.matchMedia('(prefers-color-scheme: dark)').matches)
                    ? 'Logo-002.png'
                    : 'Logo-001.png';
-      };
-
+    };
    setFavicon();
  </script>
-  <script>
-    window.onload = function () {
-        setTimeout(function () {
-          var loadingIndicator =                 document.getElementById("loading_indicator");
-          if (loadingIndicator) {
-            loadingIndicator.remove();
+
+<!-- Versioning -->
+<script defer>
+  var serviceWorkerVersion = null;
+  var scriptLoaded = false;
+  function loadMainDartJs() {
+    if (scriptLoaded) {
+      return;
+    }
+    scriptLoaded = true;
+    var scriptTag = document.createElement('script');
+    scriptTag.src = 'flutter_bootstrap.js';
+    scriptTag.type = 'application/javascript';
+    document.body.append(scriptTag);
+  }
+
+  if ('serviceWorker' in navigator) {
+    // Service workers are supported. Use them.
+    window.addEventListener('load', function () {
+      // Wait for registration to finish before dropping the <script> tag.
+      // Otherwise, the browser will load the script multiple times,
+      // potentially different versions.
+      var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
+      navigator.serviceWorker.register(serviceWorkerUrl)
+        .then((reg) => {
+          function waitForActivation(serviceWorker) {
+            serviceWorker.addEventListener('statechange', () => {
+              if (serviceWorker.state == 'activated') {
+                console.log('Installed new service worker.');
+                loadMainDartJs();
+              }
+            });
          }
-        }, 10000);
-    };
-  </script>
- 
-</body>
-</html>
+          if (!reg.active && (reg.installing || reg.waiting)) {
+            // No active web worker and we have installed or are installing
+            // one for the first time. Simply wait for it to activate.
+            waitForActivation(reg.installing || reg.waiting);
+          } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
+            // When the app updates the serviceWorkerVersion changes, so we
+            // need to ask the service worker to update.
+            console.log('New service worker available.');
+            reg.update();
+            waitForActivation(reg.installing);
+          } else {
+            // Existing service worker is still good.
+            console.log('Loading app from service worker.');
+            loadMainDartJs();
+          }
+        });
+
+      // If service worker doesn't succeed in a reasonable amount of time,
+      // fallback to plaint <script> tag.
+      setTimeout(() => {
+        if (!scriptLoaded) {
+          console.warn(
+            'Failed to load app from a service worker. Falling back to plain <script> tag.',
+          );
+          loadMainDartJs();
+        }
+      }, 4000);
+    });
+
+    if (serviceWorker.state == 'activated') {
+      console.log('Installed new service worker.');
+      loadMainDartJs();
+      // if there's an existing controller (previous Service Worker), show the prompt 
+      // you can tweak this and delay the notification once the page is load you can show a notification and ask for a new refresh
+      if (navigator.serviceWorker.controller) {
+        // you have a better UI here, reloading is not a great user experince here.
+        const confirmed = alert('New version of the app is available. Refresh now');
+        if (confirmed == true) {
+          window.location.reload();
+        }
+      }
+    }
+  } else {
+    // Service workers not supported. Just drop the <script> tag.
+    loadMainDartJs();
+  }
+</script>
+
+</body></html>
--- a/Frontend/patient_manager/web/splash/img/branding-1x.png
+++ b/Frontend/patient_manager/web/splash/img/branding-1x.png
--- a/Frontend/patient_manager/web/splash/img/branding-2x.png
+++ b/Frontend/patient_manager/web/splash/img/branding-2x.png
--- a/Frontend/patient_manager/web/splash/img/branding-3x.png
+++ b/Frontend/patient_manager/web/splash/img/branding-3x.png
--- a/Frontend/patient_manager/web/splash/img/branding-4x.png
+++ b/Frontend/patient_manager/web/splash/img/branding-4x.png
--- a/Frontend/patient_manager/web/splash/img/branding-dark-1x.png
+++ b/Frontend/patient_manager/web/splash/img/branding-dark-1x.png
--- a/Frontend/patient_manager/web/splash/img/branding-dark-2x.png
+++ b/Frontend/patient_manager/web/splash/img/branding-dark-2x.png
--- a/Frontend/patient_manager/web/splash/img/branding-dark-3x.png
+++ b/Frontend/patient_manager/web/splash/img/branding-dark-3x.png
--- a/Frontend/patient_manager/web/splash/img/branding-dark-4x.png
+++ b/Frontend/patient_manager/web/splash/img/branding-dark-4x.png
--- a/Frontend/patient_manager/web/splash/img/dark-1x.png
+++ b/Frontend/patient_manager/web/splash/img/dark-1x.png
--- a/Frontend/patient_manager/web/splash/img/dark-2x.png
+++ b/Frontend/patient_manager/web/splash/img/dark-2x.png
--- a/Frontend/patient_manager/web/splash/img/dark-3x.png
+++ b/Frontend/patient_manager/web/splash/img/dark-3x.png
--- a/Frontend/patient_manager/web/splash/img/dark-4x.png
+++ b/Frontend/patient_manager/web/splash/img/dark-4x.png
--- a/Frontend/patient_manager/web/splash/img/light-1x.png
+++ b/Frontend/patient_manager/web/splash/img/light-1x.png
--- a/Frontend/patient_manager/web/splash/img/light-2x.png
+++ b/Frontend/patient_manager/web/splash/img/light-2x.png
--- a/Frontend/patient_manager/web/splash/img/light-3x.png
+++ b/Frontend/patient_manager/web/splash/img/light-3x.png
--- a/Frontend/patient_manager/web/splash/img/light-4x.png
+++ b/Frontend/patient_manager/web/splash/img/light-4x.png