Merge pull request #324 from Alexander-Bliznyuk/pick-up-new-version

fix: installed pwa does not pick up new version, closes #298

src/components/AppFrame.vue

@@ -167,8 +167,11 @@
       </v-container>
     </v-content>
 
-    <v-footer app>
-      <!-- -->
+    <v-footer
+      app
+      inset
+    >
+      <update-notification class="mx-auto" />
     </v-footer>
   </v-app>
 </template>
@@ -178,10 +181,12 @@ import { mapState } from 'vuex'
 import {
   PEER_CONNECTED
 } from '@/store/mutation-types'
+import UpdateNotification from './UpdateNotification'
 
 export default {
   name: 'AppFrame',
   components: {
+    UpdateNotification
   },
   props: {
   },

src/components/UpdateNotification.vue

@@ -0,0 +1,43 @@
+<template>
+  <v-alert
+    v-if="updateToBeInstalled"
+    dense
+    type="info"
+  >
+    <v-row align="center">
+      <v-col class="grow">
+        A new version is available
+      </v-col>
+      <v-col class="shrink">
+        <v-btn @click="refresh">
+          refresh
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-alert>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'UpdateNotification',
+  computed: {
+    ...mapState({
+      updateToBeInstalled: state => state.updateToBeInstalled
+    })
+  },
+  methods: {
+    refresh () {
+      this.updateToBeInstalled.postMessage(
+        { type: 'SKIP_WAITING' }
+      )
+      window.location.reload()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/registerServiceWorker.js

@@ -2,6 +2,9 @@
 
 import { register } from 'register-service-worker'
 
+import store from './store/index'
+import { UPDATE_AVAILABLE } from './store/mutation-types'
+
 if (process.env.NODE_ENV === 'production') {
   register(`${process.env.BASE_URL}service-worker.js`, {
     ready () {
@@ -13,7 +16,8 @@ if (process.env.NODE_ENV === 'production') {
     cached () {
       console.log('Content has been cached for offline use.')
     },
-    updated () {
+    updated (reg) {
+      store.commit(UPDATE_AVAILABLE, reg.waiting)
       console.log('New content is available; please refresh.')
     },
     offline () {

src/store/index.js

@@ -2,14 +2,19 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import PNPStore from './pnp.js'
 import { INITIALIZE_PNP } from './action-types.js'
+import { UPDATE_AVAILABLE } from './mutation-types'
 
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
   state: {
+    updateToBeInstalled: undefined,
     version: require('@/../package.json').version
   },
   mutations: {
+    [UPDATE_AVAILABLE] (state, updateToBeInstalled) {
+      state.updateToBeInstalled = updateToBeInstalled
+    }
   },
   actions: {
   },

src/store/mutation-types.js

@@ -17,3 +17,5 @@ export const NEW_PEER_ID = 'NEW_PEER_ID'
 export const NEW_REMOTE_PEER_ID = 'NEW_REMOTE_PEER_ID'
 export const REMOTE_PEER_ID_REMOVED = 'REMOTE_PEER_ID_REMOVED'
 export const PEER_FETCH = 'PEER_FETCH'
+
+export const UPDATE_AVAILABLE = 'UPDATE_AVAILABLE'

src/views/Home.vue

@@ -75,7 +75,21 @@
             </v-card-actions>
           </v-card>
         </v-row>
+        <v-row class="mt-4">
+          <update-notification class="mx-auto" />
+        </v-row>
       </v-container>
     </v-content>
   </v-app>
 </template>
+
+<script>
+import UpdateNotification from '../components/UpdateNotification'
+
+export default {
+  name: 'Home',
+  components: {
+    UpdateNotification
+  }
+}
+</script>