[NextJS_Pet119] PWA setting

신치우·2023년 4월 30일

NextJS

목록 보기

8/11

Next JS를 쓰면서 PWA 세팅하는 방법을 처음 공부하였다.
생각보다 어렵지 않았으나 순서를 정리해놓으려고 합니다.
특히 아니 이것도 해야돼? 이런것들이 있는데 해야합니다.

1. npm 다운로드

npm install next-pwa

2. npm 다운로드 후 next.config.js 설정

const withPWA = require('next-pwa')({
  dest: 'public'
})

module.exports = withPWA({
  // next.js config
})

여기까지 완료한 후 yarn build or npm run build 를 하면 public 폴더 안에 workbox-*.js 와 sw.js 파일이 생성된다

성공시 아래와 같은 터미널을 확인할 수 있다.

앞에 [PWA] 라고 써있는게 나온다
실패하면 [PWA]... 이라고 나온다는데 확인해보지 못했다.

3. icon 을 넣어야한다

여기서 내가 겪었던 문제가 발생한다

파일 크기는 512x512 이상을 준비한다
PWA check시에 512x512 이상을 확인하는 부분이 있다

아이콘으로 사용할 이미지를 하나 준비하고
아래 사이트를 이용하여 크기별로 생성을 한다
https://favicomatic.com/

생성이 완료되면 아래와 같이 code를 얻을 수 있는데 꼭 기억하지 않아도 된다
왜냐면 이미 다운로드된 압축파일에 해당 코드도 같이 반영되어 있기 때문이다.

해당 코드에서 복사하여 사용하되 자신이 이미지를 넣은 폴더의 path로 바꿔주는 것은 잊지말자

위에서 빌드가 성공했었다면 _document.tsx 라는 파일이 생성된 것을 알수 있다.
해당 <Head /> 를 <Head> </Head> 로 바꿔준 후 코드를 붙여넣기 해준다
아래는 내가 사용한 example 이다

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <meta charSet="utf-8" />
        <link rel="manifest" href="/manifest.json" />
        <meta name="theme-color" content="#000000" />
        <link
          rel="apple-touch-icon"
          sizes="114x114"
          href="./icons/apple-touch-icon-114x114.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="144x144"
          href="./icons/apple-touch-icon-144x144.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="60x60"
          href="./icons/apple-touch-icon-60x60.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="120x120"
          href="./icons/apple-touch-icon-120x120.png"
        />
        <link
          rel="apple-touch-icon"
          sizes="76x76"
          href="./icons/apple-touch-icon-76x76.png"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

4. manifest.json 을 만들어주자

manifest.json 파일의 위치는 public 폴더 안에 위치한다
그리고 자신이 사용한 모든 image를 작성해서 넣어주자

{
    "name": "PWA App",
    "short_name": "App",
    "icons": [
        {
            "src": "./icons/apple-touch-icon-57x57.png",
            "sizes": "57x57",
            "type": "image/png"
        },
        {
            "src": "./icons/apple-touch-icon-60x60.png",
            "sizes": "60x60",
            "type": "image/png"
        },
        ...
        {
            "src": "./icons/favicon.ico",
            "sizes": "48x48",
            "type": "image/icon",
            "purpose": "any maskable"
        }
    ],
    "theme_color": "#FFFFFF",
    "background_color": "#FFFFFF",
    "start_url": "/",
    "display": "standalone",
    "orientation": "portrait"
  }