-
[PWA] Next.js 프로젝트에 PWA 적용하기JavaScript 2023. 10. 25. 19:11
PWA(Progressive Web App)이란 모바일 및 웹 애플리케이션 개발의 접근 방식 중 하나로, 네이티브 모바일 앱과 유사한 경험을 제공하는 기술이다. PWA를 적용하면 브라우저나 모바일 홈에서 웹 앱을 설치하여 사용할 수 있고 푸시 알림, 오프라인 등의 기능도 하여 풍부한 사용자 경험을 제공할 수 있다. Next.js 프로젝트에 PWA를 적용을 해보았다.
Next.js를 위한 PWA 플러그인인 next-pwa가 있어 사용하기로 하였다.
npm install next-pwa yarn add next-pwa1. 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 검사를 할 수 있다.
반응형'JavaScript' 카테고리의 다른 글
[JavaScript] ??= (0) 2023.12.01 [JavaScript] 이벤트 전파 중단하기 (1) 2023.11.23 [JavaScript] XState 기초 이해하기 (0) 2023.10.20 [JavaScript] 다중 조건 정렬 (0) 2023.10.12 [JavaScript] 커링이란? (0) 2023.09.20