feat: add sw reload

Author: luiskcs89

functions/package.json

@@ -18,5 +18,8 @@
     "tslint": "^5.12.0",
     "typescript": "^3.2.2"
   },
-  "private": true
+  "private": true,
+  "engines": {
+    "node": "8"
+  }
 }

package-lock.json

@@ -1,6 +1,8 @@
 export const translations = {
   translation: {
     home: {
+      newversion: 'New version available...',
+      reload: 'Reload',
       hero: {
         title: 'Mobile Solutions',
         subTitle: 'For A Digital World',

src/assets/i18n/en.ts

@@ -131,3 +131,66 @@ ul.navbar-nav {
     margin: 0;
   }
 }
+
+#toast {
+  visibility: hidden;
+  min-width: 250px;
+  margin-left: -125px;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+  padding: 16px;
+  position: fixed;
+  z-index: 1;
+  left: 50%;
+  bottom: 30px;
+  border-radius: 16px;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s;
+  animation: fadein 0.5s;
+}
+
+@-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;
+  }
+}
+
+#toast-button {
+  text-transform: uppercase;
+  background: transparent;
+  text-align: center;
+  max-width: 200px;
+  text-decoration: none;
+  border: 0.75px solid #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5);
+  margin-left: 10px;
+  color: #ffffff;
+
+  &:hover {
+    text-decoration: none;
+    background: white;
+    color: black;
+  }
+}

src/components/app-nav-header/app-nav-header.scss

@@ -135,6 +135,12 @@ export class AppNavHeader {
           </div>
         </nav>
         <app-search-results onClose={ev => this.toogleSearch('hidden', ev.detail.pageChanged)} />
+        <div id="toast">
+          <app-translate keyword="home.newversion" />
+          <button id="toast-button">
+            <app-translate keyword="home.reload" />
+          </button>
+        </div>
       </div>
     );
   }

src/components/app-nav-header/app-nav-header.tsx

@@ -1,5 +1,5 @@
 import '@stencil/router';
-import { Component, h } from '@stencil/core';
+import { Component, h, Listen } from '@stencil/core';
 import { polyfill } from 'smoothscroll-polyfill';
 
 polyfill();
@@ -11,6 +11,29 @@ polyfill();
 export class OpenForgeApp {
   mainEl: HTMLElement;
   newServiceWorker: boolean = false;
+  registration: ServiceWorkerRegistration;
+
+  @Listen('swUpdate', { target: 'window' })
+  async onSWUpdate() {
+    this.registration = await navigator.serviceWorker.getRegistration();
+    if (this.registration && this.registration.waiting) {
+      this.showToast();
+    }
+  }
+
+  showToast() {
+    const toastDiv = document.getElementById('toast');
+    toastDiv.className = 'show';
+    const toastButton = document.getElementById('toast-button');
+    toastButton.addEventListener('click', () => this.closeAndReload());
+  }
+
+  closeAndReload() {
+    if (this.registration && this.registration.waiting) {
+      this.registration.waiting.postMessage('skipWaiting');
+    }
+    window.location.reload();
+  }
 
   componentDidLoad() {
     try {

src/pages/open-forge-app/open-forge-app.tsx

@@ -26,7 +26,8 @@ export const config: Config = {
       serviceWorker: {
         globPatterns: [
           '**/*.{js,css,json,html,ico,png,svg}'
-        ]
+        ],
+        swSrc: 'src/sw.js'
       },
       copy: [
         { src: 'robots.txt' }