From c8f9ae3441fa32fc65e6ed8b4f3a858c6fc356e6 Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Mon, 19 Jun 2023 03:28:54 +0100
Subject: [PATCH] Add reload prompt for when a new update.

---
 src/App.vue                     |  3 +++
 src/components/ReloadPrompt.vue | 33 +++++++++++++++++++++++++++++++++
 src/main.js                     |  2 --
 src/registerServiceWorker.js    |  7 -------
 vite.config.js                  |  2 +-
 5 files changed, 37 insertions(+), 10 deletions(-)
 create mode 100644 src/components/ReloadPrompt.vue
 delete mode 100644 src/registerServiceWorker.js

diff --git a/src/App.vue b/src/App.vue
index 331a2065..a74c896e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,6 +9,7 @@
             </router-view>
         </div>
 
+        <ReloadPrompt />
         <FooterComponent />
     </div>
 </template>
@@ -16,6 +17,7 @@
 <script>
 import NavBar from "./components/NavBar.vue";
 import FooterComponent from "./components/FooterComponent.vue";
+import ReloadPrompt from "./components/ReloadPrompt.vue";
 
 const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
 
@@ -23,6 +25,7 @@ export default {
     components: {
         NavBar,
         FooterComponent,
+        ReloadPrompt,
     },
     data() {
         return {
diff --git a/src/components/ReloadPrompt.vue b/src/components/ReloadPrompt.vue
new file mode 100644
index 00000000..18d256e0
--- /dev/null
+++ b/src/components/ReloadPrompt.vue
@@ -0,0 +1,33 @@
+<script setup>
+import { useRegisterSW } from "virtual:pwa-register/vue";
+
+const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW();
+
+const close = async () => {
+    offlineReady.value = false;
+    needRefresh.value = false;
+};
+</script>
+
+<template>
+    <div v-if="offlineReady || needRefresh" class="pwa-toast" role="alert">
+        <div class="message">
+            <span v-if="offlineReady"> App ready to work offline </span>
+            <span v-else> New content available, click on reload button to update. </span>
+        </div>
+        <button v-if="needRefresh" @click="updateServiceWorker()">Reload</button>
+        <button @click="close">Close</button>
+    </div>
+</template>
+
+<style>
+.pwa-toast {
+    @apply fixed right-0 bottom-0 m-4 p-3 border border-gray-500 rounded shadow bg-white text-gray-700;
+}
+.pwa-toast .message {
+    @apply margin-bottom-2;
+}
+.pwa-toast button {
+    @apply border border-solid border-gray-500 rounded px-2 py-1;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index bc3d80b8..50480077 100644
--- a/src/main.js
+++ b/src/main.js
@@ -71,8 +71,6 @@ import "uno.css";
 
 const timeAgo = new TimeAgo("en-US");
 
-import("./registerServiceWorker");
-
 const mixin = {
     methods: {
         timeFormat: function (duration) {
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
deleted file mode 100644
index a5369ff0..00000000
--- a/src/registerServiceWorker.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/* eslint-disable no-console */
-
-import { registerSW } from "virtual:pwa-register";
-
-if (process.env.NODE_ENV === "production") {
-    registerSW();
-}
diff --git a/vite.config.js b/vite.config.js
index 86086d08..21598ab6 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -19,7 +19,7 @@ export default defineConfig({
             targets: ["defaults", "not IE 11"],
         }),
         VitePWA({
-            registerType: "autoUpdate",
+            registerType: "prompt",
             workbox: {
                 globPatterns: ["**/*.{js,css,html,ico,svg,png}", "manifest.webmanifest"],
                 globIgnores: ["**/*-legacy-*.js"],