[PWA] Next.js 프로젝트에 PWA 적용하기
PWA(Progressive Web App)이란 모바일 및 웹 애플리케이션 개발의 접근 방식 중 하나로, 네이티브 모바일 앱과 유사한 경험을 제공하는 기술이다. PWA를 적용하면 브라우저나 모바일 홈에서 웹 앱을 설치하여 사용할 수 있고 푸시 알림, 오프라인 등의 기능도 하여 풍부한 사용자 경험을 제공할 수 있다. Next.js 프로젝트에 PWA를 적용을 해보았다.
Next.js를 위한 PWA 플러그인인 next-pwa가 있어 사용하기로 하였다.
npm install next-pwa
yarn add next-pwa
1. withPWA
next.config.js 파일에 다음과 같이 적용한다.
// next.config.js
const withPWA = require("next-pwa")({
dest: "public",
})
module.exports = withPWA({})require("next-pwa")로 next-pwa 모듈을 불러와 withPWA 상수에 담아 내보냈다.
dest는 PWA 관련 파일을 생성할 디렉토리를 지정한다. 빌드를 하면 public 폴더에 서비스 워커 파일들이 생성된다.
2. Manifest 파일 생성
// public/manifest.json
{
"name": "PWA App",
"short_name": "App",
"icons": [
{
"src": "/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/android-chrome-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#FFFFFF",
"background_color": "#FFFFFF",
"start_url": "/",
"display": "standalone",
"orientation": "portrait"
}public 폴더에 manifest.json 파일을 생성한다.
매니페스트는 애플리케이션의 정보를 담고 있는 메타데이터이다. 이 파일을 통해 사용자에게 더 풍부한 경험을 제공할 수 있다.
웹 앱 매니페스트 추가 | Articles | web.dev
웹 앱 매니페스트는 웹 애플리케이션에 대한 정보와 사용자의 휴대기기 또는 데스크톱에 설치되었을 때의 동작을 브라우저에 알려주는 간단한 JSON 파일입니다.
web.dev
매니페스트 작성에 대해 궁금하다면 해당 글 방문을 추천한다.
아이콘 이미지를 생성하려면 pwa icon generator로 검색으로 도움을 받을 수 있을 것이다.
// app/layout.tsx
export const metadata: Metadata = {
// ...생략
manifest: "/manifest.json",
}다음 <head> 태그에 매니페스트 파일을 넣는다.
next 13을 사용하고 있어 metadata 객체를 활용하였다.
next-pwa
Next.js with PWA, powered by workbox.. Latest version: 5.6.0, last published: a year ago. Start using next-pwa in your project by running `npm i next-pwa`. There are 58 other projects in the npm registry using next-pwa.
www.npmjs.com
이외에도 오프라인 기능 등 여러 옵션들이 있다.
PWA 적용
이로써 쉽게 PWA 적용이 완료되었다.!
애플리케이션을 실행해보면 주소표시줄 오른쪽에 웹앱 설치 아이콘이 보이며, 누르면 설치된다.
또한 Lighthouse 사용하여 PWA 검사를 할 수 있다.