Refactor new PWA service worker registration component

Author: webstackdev

src/components/Pwa/RegisterSW.astro

@@ -1,13 +1,24 @@
 import { registerSW } from 'virtual:pwa-register'
+import { isDev } from '@components/scripts/utils/environmentClient'
 
-const registerServiceWorker = () => {
+export const registerServiceWorker = () => {
   const hasServiceWorker = 'serviceWorker' in navigator
   console.info('[pwa] register-sw start', { hasServiceWorker })
 
   if (!hasServiceWorker) {
     return
   }
 
+  if (isDev()) {
+    void navigator.serviceWorker.getRegistrations().then((registrations) => {
+      registrations.forEach((registration) => {
+        console.info('[pwa] unregistering dev service worker', { scope: registration.scope })
+        void registration.unregister()
+      })
+    })
+    return
+  }
+
   const updateSW = registerSW({
     immediate: false,
     onNeedRefresh() {
@@ -32,7 +43,4 @@ const registerServiceWorker = () => {
   console.info('[pwa] register-sw hooked update handler')
 
   window.__pwaUpdateSW = updateSW
-
 }
-
-registerServiceWorker()

src/components/Pwa/register-sw.ts …onents/Pwa/ServiceWorker/client/index.tssrc/components/Pwa/register-sw.ts renamed to src/components/Pwa/ServiceWorker/client/index.ts src/components/Pwa/register-sw.ts renamed to src/components/Pwa/ServiceWorker/client/index.ts

@@ -0,0 +1,4 @@
+<script>
+  import { registerServiceWorker } from '/src/components/Pwa/ServiceWorker/client'
+  registerServiceWorker()
+</script>

src/components/Pwa/ServiceWorker/index.astro

@@ -6,8 +6,8 @@ import Footer from '@components/Footer/index.astro'
 import HeadContent from '@components/Head/index.astro'
 import Header from '@components/Header/index.astro'
 import Content from '@components/Layout/Content/index.astro'
-import PwaTitleBar from '@components/PwaTitleBar/index.astro'
-import RegisterSW from '@components/Pwa/RegisterSW.astro'
+import PwaTitleBar from '@components/Pwa/TitleBar/index.astro'
+import RegisterServiceWorker from '@components/Pwa/ServiceWorker/index.astro'
 import Skip from '@components/Layout/Skip/index.astro'
 import ThemePicker from '@components/ThemePicker/index.astro'
 import { ClientRouter } from 'astro:transitions'
@@ -97,7 +97,7 @@ const {
         <Footer />
       </Container>
       {/* Register the service worker via @vite-pwa/astro virtual module */}
-      <RegisterSW />
+      <RegisterServiceWorker />
     </body>
   </>
 </html>