최근에 pwa를 주제로 프로젝트를 하게 되었는데 pwa에 대해서 알아보기도 하고 next-pwa도 한번 써보고 싶어서 찍먹을 해보기로 하였다.
우선 create-next-app 을 이용해서 next-app을 만든다.
npx create-next-app next-pwa
이후에 next-pwa를 설치해준다.
yarn add next-pwa
이후에 512x512 그리고 192x192아이콘을 public 디렉토리에 넣어준다.
다음은 manifest파일을 public 디렉토리에 작성해 주는 것이다. 크롬 확장 프로그램을 만들 때도 이 파일을 작성했었는데, PWA에서 마찬가지이다.
{
"name": "Next PWA demo",
"short_name": "Next PWA",
"icons": [
{
"src": "/icon.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#FFFFFF",
"background_color": "#FFFFFF",
"start_url": "/",
"display": "standalone",
"orientation": "portrait"
}이제 _document.js 파일을 만들어서 아래 내용을 붙여넣는다.
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link rel="manifest" href="/manifest.json" />
<link rel="apple-touch-icon" href="/icon.png"></link>
<meta name="theme-color" content="#fff" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;마지막으로 next.config.js 파일을 아래와 같이 수정한다.
const withPWA = require("next-pwa");
module.exports = withPWA({
pwa: {
dest: "public",
register: true,
skipWaiting: true,
},
});이후 yarn dev로 앱을 실행시켜주고 위에 다운로드 버튼을 누르면 아래와 같이 나올 것이다.
크롬 라이트하우스에서도 확인 할 수 있다.
'개발이야기' 카테고리의 다른 글
| Agile Development Principle (0) | 2022.05.17 |
|---|---|
| Component Driven Development (CDD) (0) | 2022.05.13 |
| qwzd에 eslint, prettier 적용하기 (0) | 2022.05.12 |
| Cypress에서 브라우저의 권한을 다루는 방법 (0) | 2022.04.29 |
| 방슐랭가이드에 핸드폰 인증 구현하기 (0) | 2022.04.17 |
