feat: Add a banner to refresh the app when there's a new version

src/App.vue

@@ -1,12 +1,18 @@
 <template lang="html">
   <div class="layout">
     <router-view></router-view>
+    <refresh-banner></refresh-banner>
   </div>
 </template>
 
 <script>
+import RefreshBanner from '/views/components/refresh'
+
 export default {
   name: 'souvenir',
+  components: {
+    RefreshBanner
+  },
   methods: {
     handleVisibilityChange (event) {
       if (document.hidden) {

src/assets/css/4-modules/refresh-banner.css

@@ -0,0 +1,45 @@
+/* ----------------------------------------------------------- */
+/* == Refresh banner */
+/* ----------------------------------------------------------- */
+
+.refreshBanner {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 2rem 4rem;
+  background-color: #42b983;
+  color: #fff;
+  text-align: center;
+  font-size: 1.6rem;
+  transition: .15s all;
+  transform: translateY(103%);
+}
+
+.refreshBanner.active {
+  transform: translateY(0);
+}
+
+.refreshBanner__btn,
+.refreshBanner__btn:visited {
+  display: inline-block;
+  padding: .5rem 2.5rem;
+  border: .1rem solid #fff;
+  border-radius: 4.2rem;
+  background: transparent;
+  color: #fff;
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+
+.refreshBanner__close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 1rem;
+  border: none;
+  background: none;
+  color: #fff;
+  line-height: 1;
+  cursor: pointer;
+}

src/assets/css/style.css

@@ -34,6 +34,7 @@
 @import "/assets/css/4-modules/preview.css";
 @import "/assets/css/4-modules/progress-bar.css";
 @import "/assets/css/4-modules/encoding.css";
+@import "/assets/css/4-modules/refresh-banner.css";
 
 /* ----------------------------------------------------------- */
 /* == screens */

src/register-service-worker.js

@@ -1,3 +1,4 @@
+import store from '/store'
 
 const isLocalhost = Boolean(
   window.location.hostname === 'localhost' ||
@@ -57,6 +58,7 @@ function registerValidSW (swUrl) {
               // It's the perfect time to display a "New content is
               // available; please refresh." message in your web app.
               console.log('New content is available; please refresh.')
+              store.commit('updateRefreshBanner', true)
             } else {
               // At this point, everything has been precached.
               // It's the perfect time to display a

src/store.js

@@ -15,7 +15,8 @@ export default new Vuex.Store({
     },
     camera: null,
     capture: null,
-    gif: null
+    gif: null,
+    needRefresh: false
   },
   mutations: {
     updateCameraShouldFaceUser (state, cameraShouldFaceUser) {
@@ -36,6 +37,9 @@ export default new Vuex.Store({
     },
     updateGif (state, gif) {
       state.gif = gif
+    },
+    updateRefreshBanner (state, value) {
+      state.needRefresh = value
     }
   },
   actions: {

src/views/components/refresh.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="refreshBanner" :class="{ 'active': needRefresh}">
+    <div class="container">
+      <div class="mb1">A new version of Souvenir is available</div>
+      <button class="refreshBanner__btn" @click.prevent="reload">Refresh</button>
+      <button class="refreshBanner__close" title="Fermer" @click.prevent="close"><icon-close></icon-close></button>
+    </div>
+  </div>
+</template>
+
+<script>
+import IconClose from '/views/icons/ico-close'
+
+import { mapState } from 'vuex'
+
+export default {
+  name: 'refreshBanner',
+  components: {
+    IconClose
+  },
+  computed: {
+    ...mapState([
+      'needRefresh'
+    ])
+  },
+  methods: {
+    reload () {
+      location.reload(true)
+    },
+    close () {
+      this.$store.commit('updateRefreshBanner', false)
+    }
+  }
+}
+</script>

src/views/icons/ico-close.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+</template>