chore: sw 새로고침 안해도 10초마다 확인

go-cham · Aug 9, 2023 · 4efdae0 · 4efdae0
1 parent ef2a5e1
commit 4efdae0
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 45 deletions.
diff --git a/src/hooks/useUpdate.tsx b/src/hooks/useUpdate.tsx
@@ -1,34 +1,31 @@
 import { useEffect, useState } from 'react';
+import * as serviceWorkerRegistration from '../serviceWorkerRegistration';
 
 export default function useUpdate() {
+  const [waitingWorker, setWaitingWorker] = useState<ServiceWorker | null>(
+    null,
+  );
   const [showUpdate, setShowUpdate] = useState(false);
 
+  const handleSWUpdate = (registration: ServiceWorkerRegistration) => {
+    setShowUpdate(true);
+    setWaitingWorker(registration.waiting);
+  };
+
   const applyUpdate = () => {
-    navigator.serviceWorker.getRegistrations().then((regs) =>
-      regs.forEach((reg) => {
-        reg.waiting?.postMessage({ type: 'SKIP_WAITING' });
-      })
-    );
+    waitingWorker?.postMessage({ type: 'SKIP_WAITING' });
+    setShowUpdate(false);
+    window.location.reload();
   };
 
   useEffect(() => {
     if (!navigator.serviceWorker) {
       return;
     }
-    navigator.serviceWorker.getRegistrations().then((regs) =>
-      regs.forEach((reg) => {
-        reg
-          .update()
-          .then(() => {
-            if (reg.waiting) {
-              setShowUpdate(true);
-            }
-          })
-          .catch((e) => {
-            console.error(e);
-          });
-      })
-    );
+
+    serviceWorkerRegistration.register({
+      onUpdate: handleSWUpdate,
+    });
   }, []);
 
   return {

diff --git a/src/index.tsx b/src/index.tsx
@@ -7,7 +7,6 @@ import { BrowserRouter } from 'react-router-dom';
 
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import './styles/global.css';
 
 const queryClient = new QueryClient({
@@ -21,7 +20,7 @@ const queryClient = new QueryClient({
 });
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById('root') as HTMLElement,
 );
 root.render(
   // <React.StrictMode>
@@ -32,25 +31,11 @@ root.render(
       </BrowserRouter>
     </Provider>
     {/*<ReactQueryDevtools initialIsOpen={false} />*/}
-  </QueryClientProvider>
+  </QueryClientProvider>,
   // </React.StrictMode>
 );
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://cra.link/PWA
-// serviceWorkerRegistration.register();
-
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
-
-serviceWorkerRegistration.register({
-  onUpdate: () => {
-    console.log('onUpdate');
-  },
-  onSuccess: () => {
-    console.log('onSuccess');
-  },
-});
diff --git a/src/serviceWorkerRegistration.ts b/src/serviceWorkerRegistration.ts
@@ -16,8 +16,8 @@ const isLocalhost = Boolean(
     window.location.hostname === '[::1]' ||
     // 127.0.0.0/8 are considered localhost for IPv4.
     window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
+    ),
 );
 
 type Config = {
@@ -48,7 +48,7 @@ export function register(config?: Config) {
         navigator.serviceWorker.ready.then(() => {
           console.log(
             'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://cra.link/PWA'
+              'worker. To learn more, visit https://cra.link/PWA',
           );
         });
       } else {
@@ -63,10 +63,11 @@ function registerValidSW(swUrl: string, config?: Config) {
   navigator.serviceWorker
     .register(swUrl)
     .then((registration) => {
-      navigator.serviceWorker.addEventListener('controllerchange', () => {
-        window.location.reload();
-      });
-
+      navigator.serviceWorker.register(swUrl).then((registration) =>
+        setInterval(() => {
+          registration.update();
+        }, 1000 * 10),
+      );
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         if (installingWorker == null) {
@@ -80,7 +81,7 @@ function registerValidSW(swUrl: string, config?: Config) {
               // content until all client tabs are closed.
               console.log(
                 'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://cra.link/PWA.'
+                  'tabs for this page are closed. See https://cra.link/PWA.',
               );
 
               // Execute callback
@@ -132,7 +133,7 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
     })
     .catch(() => {
       console.log(
-        'No internet connection found. App is running in offline mode.'
+        'No internet connection found. App is running in offline mode.',
       );
     });
 }