show update message on new vresion (app update)

wwwroot/css/app.css

@@ -182,12 +182,12 @@ div.outlined input.mat-text-field-input {
     border-radius: 4px;
 }
 
-div.outlined input.mat-text-field-input:focus {
-    border-width: 2px;
-    border-style: solid;
-    border-color: var(--primary);
-    border-radius: 4px;
-}
+    div.outlined input.mat-text-field-input:focus {
+        border-width: 2px;
+        border-style: solid;
+        border-color: var(--primary);
+        border-radius: 4px;
+    }
 
 div.outlined .mdc-text-field.mdc-text-field--fullwidth .mdc-floating-label.mdc-floating-label--float-above {
     transform: translateY(-172%) translateX(-8%) scale(0.75);
@@ -226,7 +226,7 @@ label.italic input.mat-text-field-input {
 }
 
 div.mdc-checkbox {
-    margin-left: -11px; 
+    margin-left: -11px;
 }
 
 div.mat-select.required span#outlined-select-label.mdc-floating-label::after {
@@ -253,4 +253,49 @@ div.mat-select.required span#outlined-select-label.mdc-floating-label::after {
 .mat-drawer {
     border-right-width: 0px;
     width: var(--mat-drawer-custom-width, 300px);
-}
+}
+
+#snackbar {
+    visibility: hidden;
+    min-width: 50%;
+    margin: 40px;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 10px;
+    padding: 16px;
+    position: sticky;
+    z-index: 1;
+    left: 50%;
+    bottom: 30px;
+}
+
+#snackbar.show {
+    visibility: visible;
+    -webkit-animation: fadein 1s;
+    animation: fadein 1s;
+}
+
+@-webkit-keyframes fadein {
+    from {
+        bottom: 0;
+        opacity: 0;
+    }
+
+    to {
+        bottom: 30px;
+        opacity: 1;
+    }
+}
+
+@keyframes fadein {
+    from {
+        bottom: 0;
+        opacity: 0;
+    }
+
+    to {
+        bottom: 30px;
+        opacity: 1;
+    }
+}

wwwroot/index.html

@@ -32,14 +32,65 @@
         <a href="" class="reload">Reload</a>
         <a class="dismiss">🗙</a>
     </div>
+    
+    <!-- The actual snackbar -->
+    <div id="snackbar">A new version of this app is available. Click <a id="reload" style="color:deepskyblue">here</a> to update.</div>
+
     <script src="_framework/blazor.webassembly.js"></script>
     <script src="_content/TG.Blazor.IndexedDB/indexedDb.Blazor.js"></script>
     <script>
+        let newWorker;
+
+        function showUpdateBar() {
+            let snackbar = document.getElementById('snackbar');
+            snackbar.className = 'show';
+        }
+
+        function hideUpdateBar() {
+            let snackbar = document.getElementById('snackbar');
+            snackbar.className = '';
+        }
+
+        // The click event on the pop up notification
+        document.getElementById('reload').addEventListener('click', function () {
+            newWorker.postMessage({ action: 'skipWaiting' });
+            hideUpdateBar();
+        });
+
         if ('serviceWorker' in navigator) {
-            navigator.serviceWorker.register('service-worker.js')
-                .then((reg) => console.log('Service worker registered.', reg))
-                .catch((err) => console.log('Failed to register Service worker.', err));
+            navigator.serviceWorker.register('service-worker.js').then(reg => {
+                reg.addEventListener('updatefound', () => {
+                    // A wild service worker has appeared in reg.installing!
+                    newWorker = reg.installing;
+
+                    newWorker.addEventListener('statechange', () => {
+                        // Has newWorker.state changed?
+                        switch (newWorker.state) {
+                            case 'installed':
+                                if (navigator.serviceWorker.controller) {
+                                    // new update available
+                                    showUpdateBar();
+                                }
+                                // No update available
+                                break;
+                        }
+                    });
+                });
+            }).catch((err) => console.log('Failed to register Service worker.', err));
+
+            let refreshing;
+            navigator.serviceWorker.addEventListener('controllerchange', function () {
+                if (refreshing) return;
+                window.location.reload();
+                refreshing = true;
+            });
         }
+
+        //if ('serviceWorker' in navigator) {
+        //    navigator.serviceWorker.register('service-worker.js')
+        //        .then((reg) => console.log('Service worker registered.', reg))
+        //        .catch((err) => console.log('Failed to register Service worker.', err));
+        //}
     </script>
     <script>
         function BlazorSetLocalStorage(key, value) {
@@ -105,7 +156,7 @@
 
         function getKeyboardFocusableElements(element = document) {
             return [...element.querySelectorAll('input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])')]
-                .filter(el => el.localName !='li' && !el.getAttribute("aria-hidden"))
+                .filter(el => el.localName != 'li' && !el.getAttribute("aria-hidden"))
         }
 
         function CanNavigateForward(element, key) {
@@ -116,7 +167,7 @@
                 return true;
             } else {
                 return key == "Enter" || element.selectionStart == element.value.length
-                       || (element.selectionStart == 0 && element.selectionEnd == element.value.length);
+                    || (element.selectionStart == 0 && element.selectionEnd == element.value.length);
             }
         }
 
@@ -124,7 +175,7 @@
             if (element.getAttribute('class').includes('select') || element.getAttribute('class').includes('button')) {
                 return true;
             } else {
-                return element.selectionStart == null ||element.selectionStart == 0;
+                return element.selectionStart == null || element.selectionStart == 0;
             }
         }
     </script>
@@ -133,7 +184,7 @@
             integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
             crossorigin="">
     </script>
-    
+
 </body>
 
 

wwwroot/service-worker.js

@@ -73,7 +73,6 @@ self.addEventListener('install', event => {
             cache.addAll(assets);
         })
     )
-    self.skipWaiting();
 });
 
 // activate event
@@ -123,4 +122,8 @@ function fromCache(request) {
     });
 }
 
-
+self.addEventListener('message', function (event) {
+    if (event.data.action === 'skipWaiting') {
+        self.skipWaiting();
+    }
+});