feat: 'New version found. Refresh to update' toast

lang/en-US.json

@@ -302,5 +302,6 @@
   "import_from_gist": "Import from Gist",
   "enter_gist_url": "Enter Gist URL",
   "account_exists": "Account exists with different credential - Login to link both accounts",
-  "confirm": "Confirm"
+  "confirm": "Confirm",
+  "new_version_found": "New version found. Refresh to update."
 }

layouts/default.vue

@@ -19,7 +19,7 @@ export default {
     let color = localStorage.getItem("THEME_COLOR") || "green"
     document.documentElement.setAttribute("data-accent", color)
   },
-  mounted() {
+  async mounted() {
     if (process.client) {
       document.body.classList.add("afterLoad")
     }
@@ -31,6 +31,27 @@ export default {
       "%cContribute: https://github.com/hoppscotch/hoppscotch",
       "background-color:black;padding:4px 8px;border-radius:8px;font-size:16px;color:white;"
     )
+    const workbox = await window.$workbox
+    if (workbox) {
+      workbox.addEventListener("installed", (event) => {
+        if (event.isUpdate) {
+          this.$toast.show(this.$t("new_version_found"), {
+            icon: "info",
+            duration: 0,
+            theme: "toasted-primary",
+            action: [
+              {
+                text: this.$t("reload"),
+                onClick: (e, toastObject) => {
+                  toastObject.goAway(0)
+                  this.$router.push("/", () => window.location.reload())
+                },
+              },
+            ],
+          })
+        }
+      })
+    }
   },
   beforeDestroy() {
     document.removeEventListener("keydown", this._keyListener)