Next.js 13 App Routing PWA 적용하기 / Next.js

1. Why?

핀테크 프로젝트 모익에서 PWA(Progressive Web App)를 적용시킬때의 기록이다. 모익은 모바일을 메인으로 하는 웹앱서비스로 기획되었기에 모바일 환경에서 유저의 경험을 향상시키기 위해 도입했다.

 

PWA를 도입하면 웹앱을 앱처럼 설치할 수 있게 되고, 이번에는 사용해보지 못했지만 서비스 워커를 사용한 캐싱과 웹 푸시 메시지로 알람을 전송하는 것 등 많은 장점을 가지게 된다.

web.dev에서 설명하는 PWA의 이점

 

PWA는 모두의 지하철을 만들며 한 번 도입해본적이 있었기도 했고, Trade off에 비해 얻을게 많다고 판단했기에 쉽게 결정을 내릴 수 있었다. 

---

2. 도입

모익은 Next.js 13 App Routing 방식을 기반으로 하고 있었고, Next.js에서 PWA 도입을 위해 사용되는 next-pwa라이브러리는 업데이트 된 지 1년이 넘어갔기에 래퍼런스를 찾는데 고생을 좀 했다. 

Convert a Next.js App to a Progressive Web App

 

다른 부분은 레퍼런스가 충분하기에 넘어가고, 가장 중요한 부분인 next.config.js 부분만 다루겠다.

전체 코드는 아래와 같다.

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

const runtimeCaching = require('next-pwa/cache');
const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
  runtimeCaching,
});

module.exports = withPWA({
  output: 'standalone',
  experimental: {
    appDir: true,
  },
  images: {
  //(생략)
  },
  reactStrictMode: false,
});

위의 코드는 크게 세 부분으로 나눌 수 있다.

const runtimeCaching = require('next-pwa/cache');

우선 next-pwa 패키지에서 cache 모듈을 가져와서 runtimeCaching 변수에 할당하는 부분이다.

이 변수는 아래의 PWA 설정에 사용된다.

const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
  runtimeCaching,
});

next-pwa 패키지를 사용해서 PWA를 설정하는 함수를 호출하는 부분으로, 각각의 옵션은 다음과 같다.

 

• dest : PWA 빌드 결과물이 저장될 디렉토리를 설정하는 옵션이다.
• register : 서비스 워커 등록 여부를 설정하는 옵션이다. 서비스 워커는 웹 워커의 일종으로 간략하게 설명하자면 네트워크 요청을 가로채 이를 처리할 수 있으며, 요청한 리소스를 캐시에 저장해 네트워크 환경이 불안할때도 PWA가 정상적으로 작동되도록 돕는다.
• skipWating : 서비스 워커 갱신 시 skip 여부를 설정하는 옵션이다. true로 설정했으니 곧바로 갱신된다.
• runtimeCaching : 서비스 워커의 런타임 캐싱 옵션을 설정하는 변수인데, 위에서 설명한 캐시에 저장한 리소스를 우선 확인하고, 없을때에만 네트워크로 요청을 보내게 된다. 이를 통해 성능 향상과 네트워크 환경에 상관없이 좋은 경험을 제공할 수 있다.

 

이 외에도 기타 다른 옵션들을 설정할 수 있는데, next.js Github를 들어가면 확인해볼 수 있다. https://github.com/shadowwalker/next-pwa#available-options

module.exports = withPWA({
  output: 'standalone',
  experimental: {
    appDir: true,
  },
  images: {
  //(생략)
  },
  reactStrictMode: false,
});

위 부분에서는 module.exports를 사용하여 next.config.js 파일의 설정을 내보내는 부분이다.

 

• output : manifest에서 PWA를 어떤 형태로 보여줄지 사용하는 옵션도 output이라 착각하기 쉬운데, Next.js에서 output은 빌드 과정에서 어떻게 코드를 추출할지를 선택하는 것이다. 'standalone'옵션을 주는 것은 웹앱을 실행하는데 필요한 최소한의 코드만을 추출한다는 의미이다.
• reactStrictMode : React Strict Mode를 on/off시키는 옵션이다. 2차례 실행시키는 것이 오히려 헷갈리게 만들거나 불편한 부분이 많아서 합의를 통해 꺼두고 진행했다.

---

3. 래퍼런스

https://github.com/shadowwalker/next-pwa

GitHub - shadowwalker/next-pwa: Zero config PWA plugin for Next.js, with workbox 🧰

https://medium.com/@2018.itsuki/convert-a-next-js-app-to-a-progressive-web-app-119d736bbcf

Convert a Next.js App to a Progressive Web App

https://web.dev/learn/pwa/progressive-web-apps?hl=ko

프로그레시브 웹 앱  |  web.dev

https://developer.mozilla.org/ko/docs/Web/API/Service_Worker_API

Service Worker API - Web API | MDN

https://wonsss.github.io/PWA/service-worker/

PWA의 핵심, 서비스 워커란?

https://nextjs.org/docs/app/api-reference/next-config-js/output#automatically-copying-traced-files

next.config.js Options: output | Next.js

https://tech.inflab.com/20230918-rallit-standalone/

랠릿 standalone 적용기