✨ (app) add update app version button in header!

src/App.vue

@@ -20,6 +20,7 @@
             />
           </div>
         </online-view>
+        <queue-notif class="nav-button navbar-item" />
         <span class="vaquant-title" :class="{ visible: shadow }">{{
           title
         }}</span>
@@ -43,15 +44,19 @@
       >
         <div class="navbar-end">
           <router-link
-            class="navbar-item"
+            class="nav-button navbar-item"
             :to="{ name: 'about' }"
             v-t="'title.about'"
           ></router-link>
           <!-- <router-link class="navbar-item" :to="{ name: 'pricing' }" v-t="'title.pricing'"></router-link> -->
-          <a class="navbar-item" target="_blank" rel="noreferrer" :href="coffee"
+          <a
+            class="nav-button navbar-item"
+            target="_blank"
+            rel="noreferrer"
+            :href="coffee"
             >Supportez Vaquant avec un ☕ !</a
           >
-          <router-link class="navbar-item" :to="{ name: 'user' }">{{
+          <router-link class="nav-button navbar-item" :to="{ name: 'user' }">{{
             username ? username : $t('user.loginsignup')
           }}</router-link>
         </div>
@@ -62,7 +67,6 @@
         <router-view />
       </transition>
     </main>
-    <queue-notif />
   </div>
 </template>
 

src/components/QueueNotif.vue

@@ -1,5 +1,7 @@
 <template>
-  <span class="queue-notif"></span>
+  <a href="#" class="queue-notif" v-if="newVersion" @click.prevent="reloadApp">
+    nouvelle version dispoible
+  </a>
 </template>
 
 <script lang="ts">
@@ -9,7 +11,9 @@ import notif from '@/utils/notif'
 
 @Component
 export default class QueueNotif extends Vue {
-  public mounted() {
+  private newVersion = queueNotifService.getNewVersion
+
+  private mounted() {
     queueNotifService.subscribe((notification) => {
       switch (notification.type) {
         case 'success':
@@ -20,10 +24,17 @@ export default class QueueNotif extends Vue {
           break
       }
     })
+    queueNotifService.subscribeToNewVersion((newVersion: boolean) => {
+      this.newVersion = newVersion
+    })
   }
 
-  public beforeDestroy() {
+  private beforeDestroy() {
     queueNotifService.unsubscribe()
   }
+
+  private reloadApp() {
+    location.reload(true)
+  }
 }
 </script>

src/registerServiceWorker.ts

@@ -1,20 +1,9 @@
 /* tslint:disable:no-console */
 
 import { register } from 'register-service-worker'
-import QueueNotifService from '@/services/QueueNotifService'
+import queueNotifService from '@/services/QueueNotifService'
 
 if (process.env.NODE_ENV === 'production') {
-  const enableNotif: boolean = false
-  let newWorker: any | undefined
-
-  const reloadLink = document.getElementById('reload-notify-worker')
-  if (reloadLink) {
-    reloadLink.addEventListener('click', () => {
-      if (newWorker) {
-        newWorker.postMessage({ action: 'skipWaiting' })
-      }
-    })
-  }
   register(`${process.env.BASE_URL}service-worker.js`, {
     registrationOptions: {},
     ready() {
@@ -22,30 +11,11 @@ if (process.env.NODE_ENV === 'production') {
     },
     cached() {
       console.log('Content has been cached for offline use.')
-      QueueNotifService.success('Application mise à jour !')
+      queueNotifService.success('Application mise à jour !')
-    },
-    updatefound(reg) {
-      if (enableNotif) {
-        console.log('New content found;')
-        newWorker = reg.installing
-
-        newWorker.addEventListener('statechange', () => {
-          // Has network.state changed?
-          switch (newWorker.state) {
-            case 'installed':
-              if (navigator.serviceWorker.controller) {
-                // new update available
-                // showUpdateBar()
-              }
-              // No update available
-              break
-          }
-        })
-      }
     },
     updated() {
       console.log('New content is available; please refresh.')
-      location.reload(true)
+      queueNotifService.hasNewVersion()
     },
     offline() {
       console.log(

src/services/QueueNotifService.ts

@@ -6,6 +6,12 @@ interface QueueNotif {
 class QueueNotifService {
   private queue: QueueNotif[] = []
   private callback: ((notif: QueueNotif) => void) | null = null
+  private newVersion = false
+  private newVersionCallback: ((newVersion: boolean) => void) | null = null
+
+  public get getNewVersion() {
+    return this.newVersion
+  }
 
   public success(message: string) {
     this.add({
@@ -32,6 +38,18 @@ class QueueNotifService {
     this.callback = null
   }
 
+  public hasNewVersion() {
+    this.newVersion = true
+    if (this.newVersionCallback) {
+      this.newVersionCallback(this.newVersion)
+    }
+  }
+
+  public subscribeToNewVersion(callback: (newVersion: boolean) => void) {
+    this.newVersionCallback = callback
+    this.newVersionCallback(this.newVersion)
+  }
+
   private add(notif: QueueNotif) {
     this.queue.push(notif)
     if (this.callback) {

src/styles/index.scss

@@ -57,12 +57,10 @@ button {
 
 $navbar-color: #eaeaea4d;
 
-.navbar-menu {
+.navbar-item.nav-button {
-  .navbar-item {
   border: 2px solid $navbar-color;
   border-radius: 10px;
   margin: 5px;
-  }
 }
 
 .title,