fix: remove toast, auto reload

Author: luiskcs89

src/assets/i18n/en.ts

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

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

@@ -137,66 +137,3 @@ 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.tsx

@@ -153,12 +153,6 @@ 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/pages/open-forge-app/open-forge-app.tsx

@@ -11,26 +11,13 @@ 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');
+    const registration = await navigator.serviceWorker.getRegistration();
+    console.log(registration);
+    if (registration && registration.waiting) {
+      registration.waiting.postMessage('skipWaiting');
     }
     window.location.reload();
   }