PWA(Progressive Web App) 지원 추가 #12
Description
개요
블로그를 PWA(Progressive Web App)로 전환하여 오프라인 접근, 홈 화면 추가, 푸시 알림 등의 기능을 지원합니다.
구현 사항
1. Next.js PWA 설정
pnpm add next-pwa// next.config.js
const withPWA = require('next-pwa')({
dest: 'public',
disable: process.env.NODE_ENV === 'development',
register: true,
skipWaiting: true,
});
module.exports = withPWA({
// ... existing config
});2. Web App Manifest
// public/manifest.json
{
"name": "Binary01 Blog",
"short_name": "Binary01",
"description": "Jinsoo Lee의 개발 블로그",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}3. 메타 태그 추가
// app/layout.tsx
<head>
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" href="/icons/icon-192x192.png" />
</head>4. Service Worker 캐싱 전략
- 포스트 페이지: Network First (최신 콘텐츠 우선)
- 정적 자산: Cache First (이미지, CSS, JS)
- API 응답: Stale While Revalidate
작업 항목
- next-pwa 패키지 설치 및 설정
- manifest.json 생성
- 앱 아이콘 제작 (192x192, 512x512)
- 메타 태그 추가
- 오프라인 폴백 페이지 생성
- Lighthouse PWA 점수 확인