Next.js에 PWA 적용하기

1. PWA란?

• PWA는 프로그레시브 웹 앱(progressive web app)의 줄임말입니다. PWA는 웹으로 개발된 사이트를 앱처럼 사용할 수 있게 하는 방법입니다. 
• Next.js 공식문서에도 PWA를 적용하는 방법이 자세히 나와있습니다.
• https://nextjs.org/docs/app/building-your-application/configuring/progressive-web-apps

Configuring: Progressive Web Applications (PWA) | Next.js

 

 

 

 

2. PWA 특징

• 웹 플랫폼 기술을 사용하여 구축되었지만 플랫폼별 앱과 같은 사용자 경험을 제공하는 앱
• 웹에서 직접 엑세스 가능하므로 앱 스토어를 거치지 않고 장치의 홈 화면에 설치 가능
• 설치된 앱은 네이티브 앱과 유사한 형태로 제공되어 브라우저가 아닌 독립형 앱으로 실행 가능
• 브라우저 UI 없이 표시되지만 기술적인 측면에서는 웹사이트이므로 실행하기 위해서는 브라우저 엔진 필요
• 백그라운드 및 오프라인에서 작동 가능

 

 

 

 

3. Next.js에 PWA 적용 방법

 

• 라이브러리를 설치해줍니다.

yarn add next-pwa

 

 

 

• 루트에 next.config.mjs를 생성해주고 이렇게 설정해줍니다.

import withPWA from 'next-pwa';

/** @type {import('next').NextConfig} */
const nextConfig = {

};

export default withPWA({
    dest: 'public',
    ...nextConfig,
});

 

 

 

 

 

 

• manifest 파일을 다음과 같이 생성해야합니다.
  • 밑에 사이트에 접속해서 필요한 설정을 입력합니다.
  • ex) 사이트에 들어가서 설정 예시
    • 앱 이름: "hobeet"
    • 테마 색상: #8936FF
    • 배경 색상: #2EC6FE
    • 아이콘: 512x512 크기의 이미지 준비 (일반용, 마스크용)
    • 기본 언어: ko-KR
    • 기타 필요한 설정들 조정

https://progressier.com/pwa-manifest-generator

PWA Manifest Generator | Progressier

 

 

 

• 생성된 JSON을 복사하여 프로젝트 public/manifest.webmanifest 파일에 붙여넣습니다.

{
  "theme_color": "#8936FF",
  "background_color": "#2EC6FE",
  "icons": [
    { "purpose": "maskable", "sizes": "512x512", "src": "icon512_maskable.png", "type": "image/png" },
    { "purpose": "any", "sizes": "512x512", "src": "icon512_rounded.png", "type": "image/png" }
  ],
  "orientation": "any",
  "display": "standalone",
  "dir": "auto",
  "lang": "ko-KR",
  "name": "hobeet",
  "short_name": "hobeet",
  "start_url": "/",
  "scope": "/"
}

 

• 반드시 아이콘 이미지는 반드시 public 폴더에 위치해야 합니다.

 

 

 

• layout.tsx
  • Next.js 13 이상에서는 layout.tsx 파일의 metadata에 manifest를 추가해야합니다.

  manifest: "/manifest.webmanifest" 추가

 

 

 

 

 

 

• yarn build