feat(client): add on begin update hooks

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,27 +29,42 @@ 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
       </span>
       <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;

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?.()

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?.()

src/client/build/register.ts

@@ -18,6 +18,7 @@ export function registerSW(options: RegisterSWOptions = {}) {
   const {
     immediate = false,
     onNeedRefresh,
+    onBeginUpdate,
     onOfflineReady,
     onRegistered,
     onRegisteredSW,
@@ -110,6 +111,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

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?.()

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?.()

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?.()

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.