Merge pull request #3 from episphere/issue#621-display-app-version

Display app version

assets/css/dashboard.css

@@ -339,4 +339,8 @@ table {
     font-size: 1rem;
     border-radius: .25rem;
     width: 100px;
-  }
+  }
+
+#appVersion {
+    font-size: 0.8rem;
+}

index.html

@@ -87,6 +87,7 @@
                     <li class="menu-item"><a class="footer-links" href="http://www.usa.gov/">USA.gov</a></li>
                 </ul>
                 <p class="menu footer-tagline">NIH…Turning Discovery Into Health<sup>®</sup></p>
+                <p id="appVersion"></p>
             </div>
         </div>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js" defer></script>

index.js

@@ -24,6 +24,25 @@ import { appState } from './src/stateManager.js';
 let saveFlag = false;
 let counter = 0;
 
+if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("./serviceWorker.js").catch((error) => {
+        console.error("Service worker registration failed.", error);
+        return;
+    });
+
+    navigator.serviceWorker.ready.then(() => {
+        if (navigator.serviceWorker.controller) {
+            navigator.serviceWorker.controller.postMessage({ action: "getAppVersion" });
+        }
+    });
+
+    navigator.serviceWorker.addEventListener("message", (event) => {
+        if (event.data.action === "sendAppVersion") {
+            document.getElementById("appVersion").textContent = event.data.payload;
+        }
+    });
+}
+
 const datadogConfig = {
     clientToken: 'pubcb2a7770dcbc09aaf1da459c45ecff65',
     applicationId: '571977b4-ca80-4a04-b8fe-5d5148508afd',

serviceWorker.js

@@ -0,0 +1,51 @@
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
+
+const appVersion = "v24.7.0";
+workbox.setConfig({ debug: false });
+const { registerRoute } = workbox.routing;
+const { CacheFirst, NetworkFirst } = workbox.strategies;
+const { ExpirationPlugin } = workbox.expiration;
+
+const cacheNameMapper = {
+    "static-cache": `static-cache-${appVersion}`,
+    "images-cache": `images-cache-${appVersion}`,
+};
+
+const currCacheNameArray = Object.values(cacheNameMapper);
+
+registerRoute(/\.(?:js|css|html|pdf)$/, new NetworkFirst({ cacheName: cacheNameMapper["static-cache"] }));
+registerRoute(/\.(?:png|jpg|jpeg|svg|gif|ico)$/,
+    new CacheFirst({
+        cacheName: cacheNameMapper["images-cache"],
+        plugins: [
+            new ExpirationPlugin({
+                maxEntries: 30,
+                maxAgeSeconds: 7 * 24 * 60 * 60,
+            })
+        ]
+    })
+);
+
+self.addEventListener("install", () => {
+    self.skipWaiting();
+  });
+
+  self.addEventListener("activate", (event) => {
+    event.waitUntil(
+        caches.keys().then((cacheNames) => {
+            return Promise.all(
+            cacheNames.map((cacheName) => {
+                if (!currCacheNameArray.includes(cacheName)) {
+                    return caches.delete(cacheName);
+            }
+            })
+        );
+        })
+    );
+});
+
+self.addEventListener("message", (event) => {
+    if (event.data.action === "getAppVersion") {
+        event.source.postMessage({ action: "sendAppVersion", payload: appVersion });
+    }
+});