chore: vite-plugin-pwa 이용

.gitignore

@@ -29,3 +29,5 @@ yarn-error.log*
 
 # env
 .env.*.local
+
+dev-dist

index.html

@@ -9,7 +9,6 @@
     />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="description" content="고민의 참견, 고참" />
-    <link rel="manifest" href="/manifest.json" />
 
     <link rel="apple-touch-icon" sizes="16x16" href="/icon/ios/icon-16.png" />
     <link rel="apple-touch-icon" sizes="24x24" href="/icon/ios/icon-24.png" />

package.json

@@ -46,19 +46,7 @@
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.1.6",
-    "web-vitals": "^3.4.0",
-    "workbox-background-sync": "^7.0.0",
-    "workbox-broadcast-update": "^7.0.0",
-    "workbox-cacheable-response": "^7.0.0",
-    "workbox-core": "^7.0.0",
-    "workbox-expiration": "^7.0.0",
-    "workbox-google-analytics": "^7.0.0",
-    "workbox-navigation-preload": "^7.0.0",
-    "workbox-precaching": "^7.0.0",
-    "workbox-range-requests": "^7.0.0",
-    "workbox-routing": "^7.0.0",
-    "workbox-strategies": "^7.0.0",
-    "workbox-streams": "^7.0.0"
+    "web-vitals": "^3.4.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.2.2",
@@ -92,8 +80,10 @@
     "storybook": "^7.2.2",
     "vite": "^4.4.9",
     "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-pwa": "^0.16.4",
     "vite-plugin-svgr": "^3.2.0",
-    "vitest": "^0.34.1"
+    "vitest": "^0.34.1",
+    "workbox-window": "^7.0.0"
   },
   "eslintConfig": {
     "extends": [

readme.md

@@ -202,7 +202,7 @@ auth_check: "/auth-check", // HOC적용이 힘든 케이스에 사용할 검증
 ┃ ┣ 📜logo.svg # 미사용
 ┃ ┣ 📜react-app-env.d.ts # 미사용
 ┃ ┣ 📜reportWebVitals.ts # 미사용
-┃ ┣ 📜service-worker.ts # PWA를 위한 서비스 워커
+┃ ┣ 📜sw.js # PWA를 위한 서비스 워커
 ┃ ┣ 📜serviceWorkerRegistration.ts # PWA를 위한 서비스 워커
 ┃ ┣ 📜setupTests.ts # 미사용
 ┃ ┗ 📜version.js # 버전 커밋

src/hooks/useUpdate.tsx

@@ -1,34 +1,19 @@
-import { useEffect, useState } from 'react';
-
-import * as serviceWorkerRegistration from '../serviceWorkerRegistration';
+import { useState } from 'react';
+import { useRegisterSW } from 'virtual:pwa-register/react';
 
 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 { updateServiceWorker } = useRegisterSW({
+    onNeedRefresh: () => {
+      setShowUpdate(true);
+    },
+  });
 
   const applyUpdate = () => {
-    waitingWorker?.postMessage({ type: 'SKIP_WAITING' });
     setShowUpdate(false);
-    window.location.reload();
+    updateServiceWorker(true);
   };
 
-  useEffect(() => {
-    if (!navigator.serviceWorker) {
-      return;
-    }
-
-    serviceWorkerRegistration.register({
-      onUpdate: handleSWUpdate,
-    });
-  }, []);
-
   return {
     showUpdate,
     applyUpdate,

src/index.tsx

@@ -6,7 +6,6 @@ import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 import './styles/global.css';
 
 const queryClient = new QueryClient({
@@ -34,8 +33,3 @@ root.render(
   </QueryClientProvider>,
   // </React.StrictMode>
 );
-
-// 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();