Next.js을 이용해 PWA(프로그래시브 웹 어플리케이션) 구현

문제

해당 프로젝트에는 댓글 기능이 있고 댓글이 달렸을때마다 팀원분들과 회의를 통해 push 알림을 줄 수 있게 개발하기로 결정했습니다. firebase을 통해 push알림을 구현했지만 모바일에서도 push 알림을 줄 수 있을까 여러 방법을 찾아보다 PWA(프로그래시브 웹 앱)이라는것을 발견 했고 PWA을 설정하면 웹을 애플리케이션 처럼 작동 시킬 수 있다는것을 알았습니다.

PWA란?

PWA는 웹과 네이티브 앱의 기능 모두의 이점을 가지고 있는 웹앱입니다. PWA를 사용하면 사용자가 앱을 다운로드하거나, 업데이트를 할 필요 없이 웹 브라우저를 통해서 앱을 바로 사용할 수 있다는게 가장 큰 장점입니다.

다른 특징은 네이티브 앱 처럼 오프라인에서도 작동이 가능하다는 점입니다. 네트워크가 연결이 되어있지 않더라도 캐시된 데이터를 사용할 수 있고, 네트워크가 연결 되면 새로운 데이터를 불러와 업데이트를 해줍니다.

Nextjs에서 PWA 설정하기

저는 next-pwa라는 라이브러리를 사용해서 PWA을 설정했습니다. next-pwa가 아니더라도 next.js의 공식문서에서도 PWA을 설정하는법을 통해 설정 할 수 있습니다. next-pwa를 선택한 이유는 PWA 기능을 쉽게 통합해서 사용할 수 있기 때문에 선택하였습니다.

npm install -D next-pwa을 통해 설치했습니다.

next.config.mjs 설정하기

그리고 next.config.mjs의 설정을 조금 바꿔줍니다.

import withPWA from 'next-pwa';

const pwa = withPWA({
  dest: 'public'
});

...
export default pwa(nextConfig);

next-pwa의 withPWA을 이용해 pwa를 설정을 해줍니다. dest에 public을 설정한 이유는 빌드시에 workbox-*.js와sw.js가 자동으로 생성되는데 저장할 곳을 지정하는겁니다.

manifest.json 설정하기

그 이후 PWA에는 manifest.json이 꼭 필요합니다. manifest.json는 애플리케이션에 대한 정보를 제공해주는 JSON 파일입니다. 앱 이름, 시작URL, 아이콘, 배경색상 등 여러가지를 지원해줍니다. 자세한 설정은 이곳에서 확인 가능합니다.

{
  "name": "프로젝트 이름",
  "short_name": "프로젝트 이름",
  "description": "프로젝트 설명",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/android-icon-36x36.png",
      "sizes": "36x36",
      "type": "image/png",
      "density": "0.75"
    },
    {
      "src": "/icons/android-icon-48x48.png",
      "sizes": "48x48",
      "type": "image/png",
      "density": "1.0"
    },
    {
      "src": "/icons/android-icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "density": "1.5"
    },
    {
      "src": "/icons/android-icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "density": "2.0"
    },
    {
      "src": "/icons/android-icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "density": "3.0"
    },
    {
      "src": "/icons/android-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "density": "4.0"
    }
  ]
}

저는 manifest.json을 이렇게 설정 하였습니다.

Head에 Meta 추가하기

export const metadata: Metadata = {
  title: '타이틀',
  description: '홈페이지 소개글',
  manifest: '/manifest.json',
  icons: {
    icon: [
      {
        rel: 'icon',
        sizes: '180x180',
        url: '/icons/apple-icon-180x180.png',
      },
    ],
  },
};

웹사이트에서 manifest.json를 읽어올수 있도록 설정해주면 설정을 마무리 할 수 있습니다.

후기

생각보다 간단하면서도 깊게 들어가면 더 어려울것 같은 예감이 들어서 나중에 PWA 관련된 것을 블로그에 상세하게 적어볼려고 합니다.