From 59ccbb3cff9f7a1f2f38aba0a9f30da63fd8c022 Mon Sep 17 00:00:00 2001
From: Doctorwu <doctorwu@moego.pet>
Date: Thu, 14 Dec 2023 18:07:48 +0800
Subject: [PATCH 1/5] feat(register): add on begin update hooks

---
 src/client/build/preact.ts   | 2 ++
 src/client/build/react.ts    | 2 ++
 src/client/build/register.ts | 6 ++++++
 src/client/build/solid.ts    | 2 ++
 src/client/build/svelte.ts   | 2 ++
 src/client/build/vue.ts      | 2 ++
 src/client/type.d.ts         | 1 +
 7 files changed, 17 insertions(+)

diff --git a/src/client/build/preact.ts b/src/client/build/preact.ts
index 847817e8..2d9a19a7 100644
--- a/src/client/build/preact.ts
+++ b/src/client/build/preact.ts
@@ -8,6 +8,7 @@ export function useRegisterSW(options: RegisterSWOptions = {}) {
   const {
     immediate = true,
     onNeedRefresh,
+    onBeginUpdate,
     onOfflineReady,
     onRegistered,
     onRegisteredSW,
@@ -24,6 +25,7 @@ export function useRegisterSW(options: RegisterSWOptions = {}) {
         setOfflineReady(true)
         onOfflineReady?.()
       },
+      onBeginUpdate,
       onNeedRefresh() {
         setNeedRefresh(true)
         onNeedRefresh?.()
diff --git a/src/client/build/react.ts b/src/client/build/react.ts
index b0105819..6f982b18 100644
--- a/src/client/build/react.ts
+++ b/src/client/build/react.ts
@@ -8,6 +8,7 @@ export function useRegisterSW(options: RegisterSWOptions = {}) {
   const {
     immediate = true,
     onNeedRefresh,
+    onBeginUpdate,
     onOfflineReady,
     onRegistered,
     onRegisteredSW,
@@ -24,6 +25,7 @@ export function useRegisterSW(options: RegisterSWOptions = {}) {
         setOfflineReady(true)
         onOfflineReady?.()
       },
+      onBeginUpdate,
       onNeedRefresh() {
         setNeedRefresh(true)
         onNeedRefresh?.()
diff --git a/src/client/build/register.ts b/src/client/build/register.ts
index c404513c..965948dc 100644
--- a/src/client/build/register.ts
+++ b/src/client/build/register.ts
@@ -18,6 +18,7 @@ export function registerSW(options: RegisterSWOptions = {}) {
   const {
     immediate = false,
     onNeedRefresh,
+    onBeginUpdate,
     onOfflineReady,
     onRegistered,
     onRegisteredSW,
@@ -81,6 +82,11 @@ export function registerSW(options: RegisterSWOptions = {}) {
 
             onNeedRefresh?.()
           }
+          // Add an event listener to detect when the new service worker
+          // start to be installed but not yet installed.
+          wb.addEventListener('installing', (event) => {
+            event.isUpdate && onBeginUpdate?.()
+          })
           wb.addEventListener('installed', (event) => {
             if (typeof event.isUpdate === 'undefined') {
               if (typeof event.isExternal !== 'undefined') {
diff --git a/src/client/build/solid.ts b/src/client/build/solid.ts
index 76e378ea..c64bdfbb 100644
--- a/src/client/build/solid.ts
+++ b/src/client/build/solid.ts
@@ -8,6 +8,7 @@ export function useRegisterSW(options: RegisterSWOptions = {}) {
   const {
     immediate = true,
     onNeedRefresh,
+    onBeginUpdate,
     onOfflineReady,
     onRegistered,
     onRegisteredSW,
@@ -19,6 +20,7 @@ export function useRegisterSW(options: RegisterSWOptions = {}) {
 
   const updateServiceWorker = registerSW({
     immediate,
+    onBeginUpdate,
     onOfflineReady() {
       setOfflineReady(true)
       onOfflineReady?.()
diff --git a/src/client/build/svelte.ts b/src/client/build/svelte.ts
index f1e71cc1..132ec3cd 100644
--- a/src/client/build/svelte.ts
+++ b/src/client/build/svelte.ts
@@ -8,6 +8,7 @@ export function useRegisterSW(options: RegisterSWOptions = {}) {
   const {
     immediate = true,
     onNeedRefresh,
+    onBeginUpdate,
     onOfflineReady,
     onRegistered,
     onRegisteredSW,
@@ -19,6 +20,7 @@ export function useRegisterSW(options: RegisterSWOptions = {}) {
 
   const updateServiceWorker = registerSW({
     immediate,
+    onBeginUpdate,
     onOfflineReady() {
       offlineReady.set(true)
       onOfflineReady?.()
diff --git a/src/client/build/vue.ts b/src/client/build/vue.ts
index 4fd6801a..b9a0ee8a 100644
--- a/src/client/build/vue.ts
+++ b/src/client/build/vue.ts
@@ -8,6 +8,7 @@ export function useRegisterSW(options: RegisterSWOptions = {}) {
   const {
     immediate = true,
     onNeedRefresh,
+    onBeginUpdate,
     onOfflineReady,
     onRegistered,
     onRegisteredSW,
@@ -19,6 +20,7 @@ export function useRegisterSW(options: RegisterSWOptions = {}) {
 
   const updateServiceWorker = registerSW({
     immediate,
+    onBeginUpdate,
     onNeedRefresh() {
       needRefresh.value = true
       onNeedRefresh?.()
diff --git a/src/client/type.d.ts b/src/client/type.d.ts
index fcb2a563..d6b1c71d 100644
--- a/src/client/type.d.ts
+++ b/src/client/type.d.ts
@@ -1,6 +1,7 @@
 export interface RegisterSWOptions {
   immediate?: boolean
   onNeedRefresh?: () => void
+  onBeginUpdate?: () => void
   onOfflineReady?: () => void
   /**
    * Called only if `onRegisteredSW` is not provided.

From 7ba5603669ab5859ccb985c33ae0dc62b1812715 Mon Sep 17 00:00:00 2001
From: Doctorwu <doctorwu@moego.pet>
Date: Thu, 14 Dec 2023 18:26:56 +0800
Subject: [PATCH 2/5] feat(example): add on begin update hooks example

---
 examples/vue-basic-cdn/src/ReloadPrompt.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/examples/vue-basic-cdn/src/ReloadPrompt.vue b/examples/vue-basic-cdn/src/ReloadPrompt.vue
index 835383c5..ae5deba4 100644
--- a/examples/vue-basic-cdn/src/ReloadPrompt.vue
+++ b/examples/vue-basic-cdn/src/ReloadPrompt.vue
@@ -9,6 +9,9 @@ const {
   onRegisteredSW(swUrl) {
     console.log(`Service Worker at: ${swUrl}`)
   },
+  onBeginUpdate() {
+    console.log('Begin to update')
+  },
 })
 
 async function close() {

From e05594854b0def502b627a6e28e5b01a7b3980c8 Mon Sep 17 00:00:00 2001
From: Doctorwu <doctorwu@moego.pet>
Date: Fri, 15 Dec 2023 00:14:29 +0800
Subject: [PATCH 3/5] feat(examples & register): use update found to detect new
 version

---
 examples/vue-basic-cdn/src/ReloadPrompt.vue |  3 --
 examples/vue-router/src/ReloadPrompt.vue    | 31 +++++++++++++++++----
 src/client/build/register.ts                |  6 ++--
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/examples/vue-basic-cdn/src/ReloadPrompt.vue b/examples/vue-basic-cdn/src/ReloadPrompt.vue
index ae5deba4..835383c5 100644
--- a/examples/vue-basic-cdn/src/ReloadPrompt.vue
+++ b/examples/vue-basic-cdn/src/ReloadPrompt.vue
@@ -9,9 +9,6 @@ const {
   onRegisteredSW(swUrl) {
     console.log(`Service Worker at: ${swUrl}`)
   },
-  onBeginUpdate() {
-    console.log('Begin to update')
-  },
 })
 
 async function close() {
diff --git a/examples/vue-router/src/ReloadPrompt.vue b/examples/vue-router/src/ReloadPrompt.vue
index 4b60d2b6..df1769df 100644
--- a/examples/vue-router/src/ReloadPrompt.vue
+++ b/examples/vue-router/src/ReloadPrompt.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
+import { computed, ref, watch } from 'vue'
 import { useRegisterSW } from 'virtual:pwa-register/vue'
 import { pwaInfo } from 'virtual:pwa-info'
 
+const beginUpdateServiceWorker = ref(false)
+const lastBeginUpdateServiceWorkerTime = ref(0)
+
 console.log(pwaInfo)
 
 // replaced dyanmicaly
@@ -25,20 +29,27 @@ const {
       console.log(`SW Registered: ${r}`)
     }
   },
+  onBeginUpdate() {
+    console.log('Begin sw update message')
+    beginUpdateServiceWorker.value = true
+    lastBeginUpdateServiceWorkerTime.value = Date.now()
+  },
+})
+
+watch(computed(() => [offlineReady.value, needRefresh.value]), ([offlineReadyVal, needRefreshVal]) => {
+  if (offlineReadyVal || needRefreshVal)
+    beginUpdateServiceWorker.value = false
 })
 
 async function close() {
   offlineReady.value = false
   needRefresh.value = false
+  beginUpdateServiceWorker.value = false
 }
 </script>
 
 <template>
-  <div
-    v-if="offlineReady || needRefresh"
-    class="pwa-toast"
-    role="alert"
-  >
+  <div v-if="offlineReady || needRefresh || beginUpdateServiceWorker" class="pwa-toast" role="alert">
     <div class="message">
       <span v-if="offlineReady">
         App ready to work offline
@@ -46,6 +57,14 @@ async function close() {
       <span v-else>
         New content available, click on reload button to update.
       </span>
+      <div>
+        <span v-if="beginUpdateServiceWorker">
+          Updating...
+        </span>
+        <span v-else-if="lastBeginUpdateServiceWorkerTime">
+          Last detect new version: {{ new Date(lastBeginUpdateServiceWorkerTime).toLocaleString() }}
+        </span>
+      </div>
     </div>
     <button v-if="needRefresh" @click="updateServiceWorker()">
       Reload
@@ -69,9 +88,11 @@ async function close() {
   text-align: left;
   box-shadow: 3px 4px 5px 0px #8885;
 }
+
 .pwa-toast .message {
   margin-bottom: 8px;
 }
+
 .pwa-toast button {
   border: 1px solid #8885;
   outline: none;
diff --git a/src/client/build/register.ts b/src/client/build/register.ts
index 965948dc..e185d081 100644
--- a/src/client/build/register.ts
+++ b/src/client/build/register.ts
@@ -84,9 +84,6 @@ export function registerSW(options: RegisterSWOptions = {}) {
           }
           // Add an event listener to detect when the new service worker
           // start to be installed but not yet installed.
-          wb.addEventListener('installing', (event) => {
-            event.isUpdate && onBeginUpdate?.()
-          })
           wb.addEventListener('installed', (event) => {
             if (typeof event.isUpdate === 'undefined') {
               if (typeof event.isExternal !== 'undefined') {
@@ -116,6 +113,9 @@ export function registerSW(options: RegisterSWOptions = {}) {
 
       // register the service worker
       wb.register({ immediate }).then((r) => {
+        r?.addEventListener("updatefound", () => {
+          onBeginUpdate?.()
+        })
         if (onRegisteredSW)
           onRegisteredSW('__SW__', r)
         else

From 495f5ea6259b22f9a1592d3b688917e425c55ced Mon Sep 17 00:00:00 2001
From: Doctorwu <doctorwu@moego.pet>
Date: Fri, 15 Dec 2023 09:49:12 +0800
Subject: [PATCH 4/5] chore(register): delete useless comment

---
 src/client/build/register.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/client/build/register.ts b/src/client/build/register.ts
index e185d081..8232c302 100644
--- a/src/client/build/register.ts
+++ b/src/client/build/register.ts
@@ -82,8 +82,6 @@ export function registerSW(options: RegisterSWOptions = {}) {
 
             onNeedRefresh?.()
           }
-          // Add an event listener to detect when the new service worker
-          // start to be installed but not yet installed.
           wb.addEventListener('installed', (event) => {
             if (typeof event.isUpdate === 'undefined') {
               if (typeof event.isExternal !== 'undefined') {

From 0c777f8bf377f009f50b3d2a231343075e916373 Mon Sep 17 00:00:00 2001
From: Doctorwu <doctorwu@moego.pet>
Date: Sun, 17 Dec 2023 23:53:34 +0800
Subject: [PATCH 5/5] feat(examples): delete unnecessary computed

---
 examples/vue-router/src/ReloadPrompt.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/vue-router/src/ReloadPrompt.vue b/examples/vue-router/src/ReloadPrompt.vue
index df1769df..c6d11f14 100644
--- a/examples/vue-router/src/ReloadPrompt.vue
+++ b/examples/vue-router/src/ReloadPrompt.vue
@@ -36,7 +36,7 @@ const {
   },
 })
 
-watch(computed(() => [offlineReady.value, needRefresh.value]), ([offlineReadyVal, needRefreshVal]) => {
+watch(() => [offlineReady.value, needRefresh.value], ([offlineReadyVal, needRefreshVal]) => {
   if (offlineReadyVal || needRefreshVal)
     beginUpdateServiceWorker.value = false
 })