Merge pull request #26 from YAPP-Github/feat/#17

wkdtnqls0506 · web-flow · commit 32106bea5889 · 2025-06-17T14:23:28.000+09:00
feat: PWA 환경 구축 (#17)
diff --git a/public/images/icons/pwa-192.png b/public/images/icons/pwa-192.png
diff --git a/public/images/icons/pwa-512.png b/public/images/icons/pwa-512.png
diff --git a/public/pwaServiceWorker.js b/public/pwaServiceWorker.js
@@ -0,0 +1,44 @@
+const CACHE_NAME = "timeat-cache-v1";
+const PRECACHE_ASSETS = [
+  "/",
+  "/manifest.webmanifest",
+  "/images/icons/pwa-192.png",
+  "/images/icons/pwa-512.png"
+];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(cache => cache.addAll(PRECACHE_ASSETS))
+      .then(() => self.skipWaiting())
+  );
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then(keys => 
+      Promise.all(
+        keys.filter(key => key !== CACHE_NAME)
+           .map(key => caches.delete(key))
+      )
+    )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  const { request } = event;
+  
+  if (request.mode === "navigate") {
+    event.respondWith(
+      fetch(request)
+        .catch(() => caches.match("/"))
+    );
+    return;
+  }
+
+  event.respondWith(
+    caches.match(request)
+      .then(cached => cached || fetch(request))
+  );
+});
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,10 +1,10 @@
 import type { Metadata } from "next";
 
-import { MSWProvider } from "@/providers/MSWProvider";
-import QueryProvider from "@/providers/QueryProvider";
+import { RegisterServiceWorkerClient } from "@/lib/pwa";
+import { MSWProvider, QueryProvider } from "@/providers";
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "Timeat",
   description: "Generated by create next app",
 };
 
@@ -22,6 +22,7 @@ export default function RootLayout({
   return (
     <html lang='en'>
       <body>
+        <RegisterServiceWorkerClient />
         <QueryProvider>
           <MSWProvider>{children}</MSWProvider>
         </QueryProvider>
diff --git a/src/app/manifest.ts b/src/app/manifest.ts
@@ -0,0 +1,18 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "Timeat",
+    short_name: "Timeat",
+    description:
+      "내 주변, 싸고 맛있는 할인하는 가게 없나? 타임잇에서 더 싸고, 더 맛있게!",
+    start_url: "/",
+    display: "standalone",
+    background_color: "#ffffff",
+    theme_color: "#000000",
+    icons: [
+      { src: "/images/icons/pwa-192.png", sizes: "192x192", type: "image/png" },
+      { src: "/images/icons/pwa-512.png", sizes: "512x512", type: "image/png" },
+    ],
+  };
+}
diff --git a/src/lib/pwa/RegisterServiceWorkerClient.tsx b/src/lib/pwa/RegisterServiceWorkerClient.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { useEffect } from "react";
+
+import { registerServiceWorker } from "./utils";
+
+export const RegisterServiceWorkerClient = () => {
+  useEffect(() => {
+    registerServiceWorker();
+  }, []);
+
+  return null;
+};
diff --git a/src/lib/pwa/index.ts b/src/lib/pwa/index.ts
@@ -0,0 +1 @@
+export { RegisterServiceWorkerClient } from "./RegisterServiceWorkerClient";
diff --git a/src/lib/pwa/utils/index.ts b/src/lib/pwa/utils/index.ts
@@ -0,0 +1 @@
+export { registerServiceWorker } from "./registerServiceWorker";
diff --git a/src/lib/pwa/utils/registerServiceWorker.ts b/src/lib/pwa/utils/registerServiceWorker.ts
@@ -0,0 +1,16 @@
+export const registerServiceWorker = () => {
+  if (typeof window === "undefined") return;
+
+  if ("serviceWorker" in navigator) {
+    window.addEventListener("load", () => {
+      navigator.serviceWorker
+        .register("/pwaServiceWorker.js")
+        .then(registration => {
+          console.info("Service Worker registered:", registration);
+        })
+        .catch(error => {
+          console.error("Service Worker registration failed:", error);
+        });
+    });
+  }
+};
diff --git a/src/providers/QueryProvider.tsx b/src/providers/QueryProvider.tsx
@@ -5,11 +5,7 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import getQueryClient from "@/lib/tanstack/getQueryClient";
 
-export default function QueryProvider({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export function QueryProvider({ children }: { children: React.ReactNode }) {
   const queryClient = getQueryClient();
 
   return (
diff --git a/src/providers/index.ts b/src/providers/index.ts
@@ -0,0 +1,2 @@
+export { MSWProvider } from "./MSWProvider";
+export { QueryProvider } from "./QueryProvider";

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { RegisterServiceWorkerClient } from "./RegisterServiceWorkerClient";`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { registerServiceWorker } from "./registerServiceWorker";`