전부터 앱도 만들어보고 싶었는데 아직 react native를 배우기에는 부족한 것 같다 생각이 들었다.
앱을 만들기에는 아직 부족한거 같고 그렇다고 아예 만들줄 모르면 좀 그런 것 같아 PWA라는 것을 알고 알아보게 되었다.
PWA
웹 앱으로
PWA는 모바일 앱과 웹 사이트의 중간 형태로, 웹 개발을 통해 모바일 앱과 유사한 경험을 제공할 수 있다는 장점이 있다. PWA를 사용하면 모바일 앱처럼 홈 화면에 아이콘을 추가하고, 푸시 알림을 받고, 오프라인 상태에서 작동하게 하는 것이 가능했다.
next에서 해보았다.
npm install next-pwa
다운을 받아준 후
우선 public 폴더에 manifast.json이라는 파일을 만들어 줘야 한다.
{
"name": "길동무 gildongmu",
"short_name": "길동무",
"description": "여행 친구를 구해봐요! 길동무",
"theme_color": "#ffc211",
"background_color": "#ffffff",
"display": "standalone",
"scope": "./",
"start_url": "./",
"icons": [
{
"src": "./icons/symbol.svg",
"sizes": "72x72 96x96 128x128 144x144 152x152 192x192 384x384 512x512",
"type": "image/svg+xml",
"purpose": "maskable any"
}
]
}
이런식으로 적절히 수정을 해주고
이후에 next.config.js에
const prod = process.env.NODE_ENV === 'production';
const runtimeCaching = require('next-pwa/cache');
const withPWA = require('next-pwa')({
dest: 'public',
register: true,
skipWaiting: true,
runtimeCaching,
disable: prod ? false : true
});
const nextConfig = withPWA({
// next config
});
module.exports = nextConfig;
이런식으로 추가를 해준다.
_document.tsx에는
<Head>
<meta name="theme-color" content="#3D39F1" />
<link rel="manifest" href="/manifest.json" />
</Head>
이런식으로 추가를 해준다.
그리고 빌드 후 실행을 해준 다음
Lighthouse 탭으로 가서 확인을 한다.
이런식으로 나오게 되면 준비가 되었다는 뜻이다.
더 설정을 하고 하면 푸시 알림도 보낼 수 있다고 한다.
'이것저것' 카테고리의 다른 글
| 다음 우편번호 api 사용해보기 (0) | 2024.07.24 |
|---|---|
| Framer Motion과 Intersection Observer (0) | 2024.06.22 |
| React Portal? (0) | 2024.05.26 |
| pm2 알아보기 (0) | 2024.05.22 |
| padStart와 padEnd (JS) (0) | 2024.05.18 |
