✨ (new version) reload new…

src/App.vue

@@ -2,9 +2,22 @@
   <div id="app">
     <img class="logo" src="@/assets/logo.svg" alt="binôme" />
     <router-view />
+    <SWNewVersion />
   </div>
 </template>
 
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+import SWNewVersion from '@/components/SWNewVersion.vue'
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    SWNewVersion
+  }
+})
+</script>
+
 <style lang="scss">
 @import '@/styles/app';
 

src/assets/reload.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rotate-clockwise" width="76" height="76" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z"/>
+  <path d="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" />
+</svg>

src/components/SWNewVersion.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="sw-new-version" v-if="newVersion">
+    <button @click="reload">
+      <img src="@/assets/reload.svg" alt="reload" />
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted } from '@vue/composition-api'
+import { serviceWorkerVersionListener } from 'sw-new-version'
+
+export default defineComponent({
+  name: 'SWNewVersion',
+  setup() {
+    const newVersion = ref(serviceWorkerVersionListener.getNewVersion)
+
+    onMounted(() => {
+      serviceWorkerVersionListener.listenToNewVersion(
+        (version) => (newVersion.value = version)
+      )
+    })
+
+    return {
+      reload: () => location.reload(true)
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$size: 25px;
+
+.sw-new-version {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+
+  button {
+    padding: 0.5rem;
+    img {
+      width: $size;
+      height: $size;
+    }
+  }
+}
+</style>