v2.2

DEV-INSTRUCTIONS.md

@@ -5,19 +5,28 @@
 Install using Node Version Manager for Windows
 https://github.com/coreybutler/nvm-windows/releases
 
-````
+```
 nvm list avilable
 nvm install v14.16.0
 nvm use v14.16.0
 node -v
 npm -v
-````
+```
 
 ## Build and Deploy
 
+#### Force Service Worker Cache Update
+
+Update change names to date published
+
+```javascript
+var contentAssetCache = 'witnsl-content-assets-20210303';
+var contentImgsCache = 'witnsl-content-imgs-20210303';
+```
+
 #### Git Hub Pages
 
-````
+```
 npm install
 npm run deploy
-````
+```

README.md

@@ -41,9 +41,15 @@
 
 ## Releases
 
+#### Version 2.2
+
+- Fixes
+  - Implement method to force PWA Cache update
+
 #### Version 2.1
 
 - Features
+
   - Added Microsoft Clarity Snippet
 
 - Fixes

dist/css/style.css

@@ -399,6 +399,76 @@ header {
   color: #f39c12;
 }
 
+/* The snackbar - position it at the bottom and in the middle of the screen */
+#notification {
+  visibility: hidden; /* Hidden by default. Visible on click */
+  min-width: 250px; /* Set a default minimum width */
+  margin-left: -125px; /* Divide value of min-width by 2 */
+  background-color: rgb(221, 221, 221); /* Black background color */
+  color: rgb(31, 31, 31); /* White text color */
+  text-align: center; /* Centered text */
+  border-radius: 2px; /* Rounded borders */
+  padding: 16px; /* Padding */
+  position: fixed; /* Sit on top of the screen */
+  z-index: 1; /* Add a z-index if needed */
+  left: 50%; /* Center the snackbar */
+  bottom: 30px; /* 30px from the bottom */
+}
+
+/* Show the snackbar when clicking on a button (class added with JavaScript) */
+#notification.show {
+  visibility: visible; /* Show the snackbar */
+  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
+  However, delay the fade out process for 2.5 seconds */
+  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+/* Animations to fade the snackbar in and out */
+@-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;
+  }
+}
+
+@-webkit-keyframes fadeout {
+  from {
+    bottom: 30px;
+    opacity: 1;
+  }
+  to {
+    bottom: 0;
+    opacity: 0;
+  }
+}
+
+@keyframes fadeout {
+  from {
+    bottom: 30px;
+    opacity: 1;
+  }
+  to {
+    bottom: 0;
+    opacity: 0;
+  }
+}
+
 @media only screen and (max-width: 800px) {
   .launch-top {
     display: inline-block;

dist/index.html

@@ -17,12 +17,18 @@
       gtag('config', 'UA-123153435-3');
 
       //Microsoft Clarify
-      (function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-      })(window, document, "clarity", "script", "5klkfh4iyr");
-
+      (function (c, l, a, r, i, t, y) {
+        c[a] =
+          c[a] ||
+          function () {
+            (c[a].q = c[a].q || []).push(arguments);
+          };
+        t = l.createElement(r);
+        t.async = 1;
+        t.src = 'https://www.clarity.ms/tag/' + i;
+        y = l.getElementsByTagName(r)[0];
+        y.parentNode.insertBefore(t, y);
+      })(window, document, 'clarity', 'script', '5klkfh4iyr');
     </script>
     <title>When is the next SpaceX launch</title>
     <meta name="description" content="View the latest details and launch time for the upcoming SpaceX rocket launch to space!" />
@@ -125,6 +131,8 @@ <h1>When is the next SpaceX launch</h1>
       </label>
     </section>
 
+    <div id="notification">App update lauching in, 3-2-1...</div>
+
     <script src="js/lib/moment.min.js"></script>
     <script src="js/lib/fa-all.js"></script>
     <script src="js/lib/indexeddb.shim.min.js"></script>
@@ -137,14 +145,52 @@ <h1>When is the next SpaceX launch</h1>
 
     <!-- PWA Setup with service worker -->
     <script>
+      let newWorker;
+      let refreshing;
+
+      navigator.serviceWorker.addEventListener('controllerchange', function () {
+        if (refreshing) return;
+        window.location.reload();
+        refreshing = true;
+      });
+
+      // The click event on the notification
+      // document.getElementById('reload').addEventListener('click', function () {
+      //   console.log('hi');
+      //   newWorker.postMessage({ action: 'skipWaiting' });
+      // });
+
       if ('serviceWorker' in navigator) {
         window.addEventListener('load', function () {
+          //register the service worker
           navigator.serviceWorker
             .register('service-worker.js')
             .then(
               function (registration) {
+                registration.addEventListener('updatefound', () => {
+                  console.log('updatefound');
+                  newWorker = registration.installing;
+                  newWorker.addEventListener('statechange', () => {
+                    console.log('statechange');
+                    // has service worker state changes?
+                    switch (newWorker.state) {
+                      case 'installed':
+                        //ther is a new service worker avialble, show the notification
+                        if (navigator.serviceWorker.controller) {
+                          let notification = document.getElementById('notification');
+                          notification.className = 'show';
+                          // call refresh process after 2 seconds
+                          setTimeout(() => {
+                            newWorker.postMessage({ action: 'skipWaiting' });
+                          }, 4000);
+                        }
+                        break;
+                    }
+                  });
+                });
+
                 // Registration was successful
-                console.log('ServiceWorker registration successful with scope: ', registration.scope);
+                //console.log('ServiceWorker registration successful with scope: ', registration.scope);
               },
               function (err) {
                 // registration failed :(

dist/service-worker.js

@@ -2,8 +2,8 @@
 var doCache = true;
 
 // Name our cache
-var contentAssetCache = 'witnsl-content-assets';
-var contentImgsCache = 'witnsl-content-imgs';
+var contentAssetCache = 'witnsl-content-assets-20210303';
+var contentImgsCache = 'witnsl-content-imgs-20210303';
 var allCaches = [contentImgsCache, contentAssetCache];
 
 // self.addEventListener('activate', (event) => {
@@ -67,6 +67,12 @@ self.addEventListener('install', function (event) {
   }
 });
 
+self.addEventListener('message', function (event) {
+  if (event.data.action === 'skipWaiting') {
+    self.skipWaiting();
+  }
+});
+
 // When the webpage goes to fetch files, we intercept that request and serve up the matching files
 // if we have them
 self.addEventListener('fetch', function (event) {