1. next-pwa 설치
npm install next-pwa2. next.config.ts 설정
import type { NextConfig } from "next";
import withPWA from "next-pwa";
const nextConfig: NextConfig = {
...
};
// next-pwa 설정 추가
const pwaConfig = withPWA({
dest: "public", // Service Worker와 관련된 파일이 생성될 위치 지정
register: true, // 브라우저에 Service Worker를 자동으로 등록
skipWaiting: true, // 업데이트 시 바로 활성화
disable: false, // 개발 환경에서도 PWA 활성화
buildExcludes: [/middleware-manifest\.json$/], // 특정 파일 제외 (Next.js 관련 파일 캐싱 제외)
});
// next-pwa와 기존 nextConfig 병합
export default pwaConfig(nextConfig);
// export default nextConfig;
disable: false위 경우는 현재의 개발 환경에서도 PWA 활성화를 해주기 위함이며,
disable: process.env.NODE_ENV === "production"추후 개발이 완료된 이후에는 이와 같은 형태로 변경이 필요
3. manifest.ts 파일 생성
app 폴더 내에 manifest.ts 파일을 생성해준다.
(Nextjs 15 버전 기준)
import type { MetadataRoute } from "next";
export default function manifest(): MetadataRoute.Manifest {
return {
name: "Next.js PWA", // 앱의 전체 이름
short_name: "NextPWA", // 홈 화면에 표시될 짧은 이름
description: "A Progressive Web App built with Next.js", // 앱의 전체 설명
start_url: "/", // 앱이 시작되는 URL
display: "standalone", // 네이티브 앱처럼 보이도록 구성
background_color: "#ffffff",
theme_color: "#000000",
icons: [
{
src: "/icon-192x192.png",
sizes: "192x192", // 필수 아이콘 크기
type: "image/png",
},
{
src: "/icon-512x512.png",
sizes: "512x512", // 필수 아이콘 크기
type: "image/png",
},
], // PWA의 앱 아이콘
};
}description을 제외한 모든 필드는 필수적이다.
다만 해당 프로젝트에 현재는 favicon과 같은 아이콘이 없기 때문에 더미로 파일명만 우선 넣어주었다.
4. 아이콘 추가
아이콘의 경우는 public/ 폴더 내에 추가하면 된다.
필수 아이콘 크기로는 192x192와 512x512이다.
5. https 설정
로컬 개발 중이므로 현재는 별도 설정을 취하진 않으나, 배포 환경에서는 https가 필수적이다.
또 로컬에서 ssl 인증서를 생성해주는 라이브러리를 사용하여 https 환경에서의 테스트를 진행할 수도 있다.
6. 빌드 실행
npm run build
npm start필자의 경우는 배포 전, 개발 단계이므로 npm run dev를 실행하였다.
빌드를 하게 되면 위와 같이 sw.js와 workbox.js 파일이 생성된다.
sw.js : Service Worker 파일로, 네트워크 요청을 가로채고 캐싱 전략을 관리하는 역할
workbox-.js : Workbox가 생성한 파일로, Service Worker 동작에 필요한 핵심 기능을 포함
7. PWA 테스트
Chrome DevTools Lighthouse를 활용하여, PWA 테스트를 진행하려고 했으나, 현재는 Lighthouse에서 PWA 테스트 지원을 종료하였다.
기존에는 위 카테고리에서 PWA 테스트까지 5개의 테스트 내용을 제공했다고 한다... 🥲
그래서 현재 내 상황에서는 Application 탭에서
Manifest파일 설정 확인Service Workers에서 "activated and is running"으로 표시되는지 확인
7-1. Manifest 확인
우선 Manifest는 파일에서 설정한 내용과 그대로 나오는 걸 위 사진과 같이 확인할 수 있었다.
7-2. Service Workers 확인
또 Service workers 탭에서 위와 같이 "activated and is running"을 비롯한 서비스 워커가 잘 등록되었다는 내용을 확인할 수 있다.
그렇다면, 이 두 과정이 왜 PWA 설정 테스트라고 볼 수 있는가?
- Manifest는 애플리케이션이 PWA로 동작하기 위한 주요 메타데이터를 정의하며, 브라우저와 운영체제가 애플리케이션을 PWA로 인식하고 동작할 수 있게 한다.
- PWA는 서비스 워커를 통해
오프라인 지원,푸시 알림,네트워크 요청캐싱등 주요 기능을 제공합니다. - 서비스 워커가 성공적으로 등록되고 실행 중이라는 것은
PWA로 동작하기 위한 첫 번째 조건이 충족되었다는 의미입니다.
Lighthouse에서 해당 기능을 제공했다면, 쉽게 끝날 수 있었겠지만 덕분에
해당 과정에 대해 이해할 수 있었다.. 오히려 좋아 😙
