NextJS웹사이트에 PWA적용하기

https://www.google.com/url?sa=i&url=https%3A%2F%2Fvelog.io%2F%40borderline0px%2FPWA&psig=AOvVaw0W9rkgDawSQZvpt96m0zqh&ust=1644051858274000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCIChjtHY5fUCFQAAAAAdAAAAABAD

 

 

PWA란 Progressive Web App의 줄임말입니다.

쉽게 웹사이트를 앱처럼 사용할 수 있도록 해주는 것입니다.

기존의 웹사이트들을 핸드폰에서 실행할 경우 성능상의 문제로 좋지 않은 경험을 느꼈을 수 있습니다.

하지만 PWA를 이용한다면 네이티브앱과 비슷한 성능의 앱처럼 사용할 수 있습니다.

 

제가 PWA를 사용하게 된 이유는 2가지입니다.

1. 웹사이트 주소를 매번 입력하여 들어오기 번거로우며, 해당 사이트의 특정 기능을 앱처럼 사용하고 싶다.

2. 핸드폰 푸쉬알림을 이용하여 사용자들의 서비스 질을 높이고 싶다.

 

이번 글에서는 NextJS로 만들어진 프로젝트를 PWA로 적용하는 법을 다뤄보겠습니다.

---

■필요한 library 설치하기

npm i next-pwa
yarn add next-pwa

 

■webpack 설정

// next.config.js

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

// 만약 withPlugins을 이용해 여러가지 export를 묶었다면
module.exports = withPlugins([
    [withXXX],[withYYY],[withPWA, {pwa:{dest:'public'}}]
  ], nextConfig);

 

■manifest.json 파일 생성하기

// 아이콘 경로를 정확히 설정해주셔야 합니다.
// 또한 아이콘 형식을 지켜주셔야합니다.
{
  "name": "test",
  "short_name": "test",
  "theme_color": "#123456",
  "background_color": "#123456",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "/images/icons/logo.png",
      "type": "image/png",
      "sizes": "72x72"
    },
    {
      "src": "/images/icons/logo.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "/images/icons/logo.png",
      "type": "image/png",
      "sizes": "128x128"
    },
    {
      "src": "/images/icons/logo.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "/images/icons/logo.png",
      "type": "image/png",
      "sizes": "152x152"
    },
    {
      "src": "/images/icons/logo.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons/logo.png",
      "type": "image/png",
      "sizes": "384x384"
    },
    {
      "src": "/images/icons/logo.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

 

■meta tags적용하기 (head in _document.js 꼭 document.js는 아니어도 됨)

<meta charset='utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' />
<meta name='description' content='Description' />
<meta name='keywords' content='Keywords' />
<title>pwa test</title>

<link rel="manifest" href="/manifest.json" />
<link href='/images/icons/logo.png' rel='icon' type='image/png' sizes='16x16' />
<link href='/images/icons/logo.png' rel='icon' type='image/png' sizes='32x32' />
<link rel="apple-touch-icon" href="/images/icons/logo.png"></link>
<meta name="theme-color" content="#317EFB"/>

 

■ TEST

 

npm run build
yarn build

빌드 후 실행시켜본 뒤 개발자 도구의 

Lighthouse 탭을 확인해봅니다.

최하단에 PWA에 대한 평가가 나오며, 어떠한 부분이 부족한지, 적합한지 알려주므로 

그것을 보고 에러를 잡아나가시면 됩니다.

 

다음 글엔 푸쉬알림을 이용하는 방법을 다뤄보겠습니다.

읽어주셔서 감사합니다.