[Feat] pwa 적용

package.json

@@ -29,6 +29,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5.7.2",
     "vite": "^6.0.1",
+    "vite-plugin-pwa": "^1.3.0",
     "vite-plugin-svgr": "^5.2.0"
   }
 }

src/utils/fcm/fcm.ts

@@ -24,6 +24,11 @@ export async function requestFcmToken(): Promise<string> {
 
   const registration = await navigator.serviceWorker.register(
     `${import.meta.env.BASE_URL}firebase-messaging-sw.js`,
+    {
+      // PWA의 /sw.js(scope: /)와 같은 등록을 덮어쓰지 않도록
+      // FCM 푸시 전용 scope를 사용한다.
+      scope: `${import.meta.env.BASE_URL}firebase-cloud-messaging-push-scope`,
+    },
   );
 
   const messaging = getMessaging(firebaseApp);

vite.config.ts

@@ -3,9 +3,50 @@ import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 import { fileURLToPath, URL } from "node:url";
 import svgr from "vite-plugin-svgr";
+import { VitePWA } from "vite-plugin-pwa";
 
 export default defineConfig({
-  plugins: [react(), tailwindcss(), svgr()],
+  plugins: [
+    react(),
+    tailwindcss(),
+    svgr(),
+    VitePWA({
+      registerType: "autoUpdate",
+
+      manifest: {
+        name: "Quespot",
+        short_name: "Quespot",
+        description: "전국 방방곡곡, 미션으로 떠나는 관광 서비스",
+
+        start_url: "/",
+        display: "standalone",
+
+        background_color: "#F4F8FF",
+        theme_color: "#5BB5F8",
+
+        icons: [
+          {
+            src: "/pwa-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+            purpose: "any",
+          },
+          {
+            src: "/pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "any",
+          },
+          {
+            src: "/pwa-maskable-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "maskable",
+          },
+        ],
+      },
+    }),
+  ],
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),