Prompt przy aktualizacji aplikacji

src/App.vue

@@ -2,6 +2,10 @@
   <div id="app_wrapper">
     <router-view />
 
+    <transition name="slide-anim">
+      <div v-if="needRefresh" class="update-prompt" @click="updateServiceWorker(true)">Nowa wersja GeneraTORa dostępna! <u>Kliknij, aby odświeżyć aplikację!</u></div>
+    </transition>
+
     <footer>
       &copy; <a href="https://td2.info.pl/profile/?u=20777">Spythere</a> {{ new Date().getUTCFullYear() }} | v.{{
         appVersion
@@ -11,24 +15,43 @@
 </template>
 
 <script lang="ts">
+import { useRegisterSW } from 'virtual:pwa-register/vue';
 import { defineComponent } from 'vue';
 import packageInfo from '../package.json';
 
 export default defineComponent({
+  setup() {
+    const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW({
+      immediate: true,
+    });
+
+    return {
+      offlineReady,
+      needRefresh,
+      updateServiceWorker,
+    };
+  },
   data() {
     return {
       appVersion: packageInfo.version,
+      needRefreshTest: false,
     };
   },
 
   created() {
-    document.title = `GeneraTOR ${this.appVersion}`
+    document.title = `GeneraTOR ${this.appVersion}`;
-  }
+
+    setTimeout(() => {
+        this.needRefreshTest = true;
+    }, 500);
+  },
 });
 </script>
 
 <style lang="scss">
 @import './styles/global.scss';
+@import './styles/anims.scss';
+
 
 #app {
   color: white;
@@ -36,6 +59,22 @@ export default defineComponent({
   min-height: 100vh;
 }
 
+.update-prompt {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  padding: 0.5em;
+
+  font-weight: bold;
+
+  text-align: center;
+
+  width: 100%;
+  background-color: $accentCol;
+
+  cursor: pointer;
+}
+
 footer {
   text-align: center;
   padding: 0.5em 0;

src/main.ts

@@ -3,19 +3,5 @@ import App from './App.vue';
 import router from './router';
 import { createPinia } from 'pinia';
 
-import { registerSW } from 'virtual:pwa-register';
-
-const intervalMS = 1 * 60 * 1000;
-
-const updateSW = registerSW({
-  onNeedRefresh() {
-    console.log('Refreshing page...');
-  },
-  
-  onOfflineReady() {
-    console.log('Offline ready');
-  },
-});
-
 createApp(App).use(router).use(createPinia()).mount('#app');
 

src/styles/anims.scss

@@ -0,0 +1,13 @@
+.slide-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 125ms ease;
+    transform: translateY(0);
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translateY(100%);
+  }
+}
+