[feat] PWA 지원 기능 추가#113
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR adds Progressive Web App (PWA) support to the Next.js frontend by introducing next-pwa configuration, a web app manifest, and wiring the manifest/metadata into the App Router layout. It also adjusts the Firebase Cloud Messaging (FCM) service worker registration to avoid scope conflicts with the PWA service worker.
Changes:
- Add
next-pwaand wrapnext.config.mjsto generate/register a PWA service worker in production builds. - Add
public/manifest.jsonand connect it viasrc/app/layout.tsxmetadata/viewport exports. - Register the FCM service worker with a dedicated (non-root) scope to prevent collision with the PWA service worker.
Reviewed changes
Copilot reviewed 5 out of 7 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
src/services/notifications/firebase.ts |
Changes FCM service worker registration to use a custom scope. |
src/app/layout.tsx |
Adds Next metadata/viewport exports and links the web manifest. |
public/manifest.json |
Introduces the PWA manifest (name, colors, icons, etc.). |
package.json |
Adds the next-pwa dependency. |
next.config.mjs |
Wraps Next config with next-pwa and sets PWA build behavior. |
.gitignore |
Ignores generated PWA artifacts in public/ (e.g., sw.js, Workbox files). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const registration = await navigator.serviceWorker.register("/firebase-messaging-sw.js", { | ||
| scope: "/firebase-cloud-messaging-push-scope", | ||
| }); |
| manifest: '/manifest.json', | ||
| icons: { | ||
| icon: '/dealit-logo.svg', | ||
| apple: '/dealit-logo.svg', |
| "src": "/dealit-logo.svg", | ||
| "sizes": "any", | ||
| "type": "image/svg+xml", | ||
| "purpose": "any maskable" |
| dest: "public", | ||
| register: true, | ||
| skipWaiting: true, | ||
| disable: process.env.NODE_ENV === "development", |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
이 풀 리퀘스트는 next-pwa 라이브러리를 도입하여 PWA 기능을 구현하고, 매니페스트 설정 및 메타데이터를 업데이트합니다. 리뷰 과정에서 FCM 서비스 워커의 스코프 설정이 루트 경로의 앱 제어를 방해하여 알림 기능에 문제를 일으킬 수 있음이 지적되었습니다. 또한, 더 이상 유지보수되지 않는 next-pwa 대신 최신 라이브러리 사용을 권장하며, PWA 호환성을 위해 매니페스트에 id 필드와 PNG 아이콘을 추가할 것을 제안했습니다.
| const registration = await navigator.serviceWorker.register("/firebase-messaging-sw.js", { | ||
| scope: "/firebase-cloud-messaging-push-scope", | ||
| }); |
There was a problem hiding this comment.
FCM 서비스 워커의 스코프를 /firebase-cloud-messaging-push-scope로 제한하면, 루트(/) 경로에서 실행되는 앱 페이지를 서비스 워커가 제어(control)할 수 없게 됩니다. FCM은 백그라운드 상태에서 알림을 수신하기 위해 서비스 워커가 현재 페이지를 제어하고 있어야 하므로, 이 설정은 알림 기능을 정상적으로 작동하지 않게 만들 위험이 큽니다. PWA 서비스 워커와의 충돌을 피하려면 별도의 스코프를 지정하기보다, 하나의 서비스 워커 파일에서 두 로직을 통합하거나 next-pwa의 swSrc 옵션을 활용하여 FCM 로직을 포함시키는 방식을 권장합니다.
| @@ -1,6 +1,15 @@ | |||
| /** @type {import('next').NextConfig} */ | |||
| import withPWAInit from "next-pwa"; | |||
There was a problem hiding this comment.
next-pwa (v5.6.0) 패키지는 현재 유지보수가 활발하지 않으며, Next.js 13 이상의 App Router 및 Next.js 15 환경에서 예기치 않은 빌드 오류나 캐싱 문제를 일으킬 수 있습니다. 최신 Next.js 버전을 안정적으로 지원하는 @ducanh2912/next-pwa 또는 serwist 라이브러리로 전환하는 것을 검토해 보시기 바랍니다.
| "name": "Dealit", | ||
| "short_name": "Dealit", | ||
| "description": "Dealit", | ||
| "start_url": "/", |
There was a problem hiding this comment.
PWA의 고유 식별자인 id 필드를 추가하는 것이 좋습니다. 이는 브라우저가 앱을 식별하고 업데이트하는 데 도움을 줍니다.
"id": "/",
"start_url": "/"| "icons": [ | ||
| { | ||
| "src": "/dealit-logo.svg", | ||
| "sizes": "any", | ||
| "type": "image/svg+xml", | ||
| "purpose": "any maskable" | ||
| } | ||
| ] |
There was a problem hiding this comment.
PWA 호환성을 높이기 위해 SVG 아이콘 외에도 192x192 및 512x512 크기의 PNG 아이콘을 추가하는 것을 권장합니다. 일부 모바일 환경(특히 안드로이드 구형 버전이나 특정 브라우저)에서는 SVG만 제공될 경우 홈 화면 아이콘이나 스플래시 화면이 정상적으로 표시되지 않을 수 있습니다.
🚀 Summary
Next.js 프론트에 PWA 지원 설정을 추가했습니다.
✨ Description
next-pwa 패키지를 추가
next.config.mjs에 PWA 설정을 적용
public/manifest.json을 추가
src/app/layout.tsx에 PWA manifest 메타데이터를 연결
기존 FCM 푸시 알림용 service worker와 PWA service worker가 충돌하지 않도록 FCM service
worker scope를 분리
확인
npm run build
빌드 성공 및 PWA service worker 생성 확인 완료
🎲 Issue Number
close #112