모바일 앱에 어울리는 프로젝트를 하고 있는데 팀원 모두 앱개발 경험이 없었다.
진로도 앱개발 쪽으로 생각하고 있지 않기 때문에 PWA를 활용해보기로 했다.
PWA를 APK파일로 만들어서 플레이스토어에 등록할 수도 있다.
Next.js는 SSR인데 앱으로 만드는게 맞나요?
Next.js는 기본적으로 SEO향상 등을 위해 첫 접속시에만 SSR을 활용하고 그 이후에는 SPA처럼 동작한다.
그래서 토스같이 앱을 개발하는 회사에서도 Next.js를 많이 사용하는 것 같다.
SEO가 필요 없는 사이트인데 Next.js를 사용해야 할까요?
공유하기 기능이 있다면 사용하는 것을 추천한다.
링크 미리보기에 들어갈 내용을 og 태그로 작성하는데
CSR만 사용하면 모든 페이지 링크 미리보기가 똑같아진다.
페이지별로 대응을 할 수가 없다.
그 외에도...
첫 페이지 로딩이 빨라지는 장점이 있다.
폰트 최적화, 이미지 최적화 등의 기능을 자체 제공해서 편리하다.
(이미지의 경우 width와 height를 지정하면 next.js가 알아서 리사이징으로 파일 크기를 줄여줘서 편리하다.)
라우팅의 경우에도 app router나 pages router를 사용하면 폴더 기반으로 라우팅을 할 수 있어서 편리하다.
1. next-pwa 설치
npm i next-pwa
2. next.config.js를 업데이트 or 생성
const withPWA = require('next-pwa')({
dest: 'public'
})
module.exports = withPWA({
// next.js config
})
npm run build
빌드를 하면 public 폴더에 workbox-*.js와 sw.js 두개의 파일이 생성된다.
3. manifest.json 추가
app라우터를 사용중이라면 app 디렉토리 최상단에 추가하면 된다.
pages 라우터를 사용중이라면 public 폴더 안에 추가하면 된다.
아이콘도 public 폴더에 넣어서 경로를 잘 지정해주면 된다.
public/icons/파일명
이라면 src에는
/icons/파일명
이라고 적으면 된다.
아래는 예제 코드 입니다.
{
"name": "PWA App",
"short_name": "App",
"icons": [
{
"src": "/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/android-chrome-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#FFFFFF",
"background_color": "#FFFFFF",
"start_url": "/",
"display": "standalone",
"orientation": "portrait"
}
manifest generator를 사용하면 편리하게 만들 수 있다.
https://www.simicart.com/manifest-generator.html/
https://www.simicart.com/manifest-generator.html/
www.simicart.com
pwa 아이콘도 만들어주자
https://www.pwabuilder.com/imageGenerator
PWABuilder
www.pwabuilder.com
4. 메타데이터 추가
next.js가 manifext.json을 읽고 알아서 메타 데이터를 추가해준다.
따로 설정하지 않아도 이제 pwa라고 인식한다.
하지만 모바일용 PWA라면 확대 방지, 아이폰 안전영역 대응을 위해서 아래 메타태그를 추가해주면 좋다.
아래 메타태그를
pages 라우터를 사용한다면 _document.js가 아니라 _app.js의 <Head>태그 안에 추가해줘야한다.
<meta
name='viewport'
content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover'
/>
🪄꿀팁
1. 아이폰 안전영역 (아이폰 하단바 이슈)
앱에는 보통 하단바가 있는데
아이폰의 경우 최하단에 하단바를 붙이면 저렇게 홈버튼과 겹치는 문제가 발생한다.
안드로이드 유저라 나중에 팀원의 제보로 알게 되었다.
안드로이드+맥북을 사용한다면 xcode의 시뮬레이터로 테스트해가며 개발 할 수 있다.
env(safe-area-inset-bottom)으로 해결할 수 있다.
.container {
position: fixed;
width: 100%;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom); //아이폰 하단 여백 주는 방법
}
적용 후
2. 스토어에 올리는 방법 (apk 만들기)
PWABuilder를 사용하면 안드로이드,아이폰,윈도우 앱을 만들 수 있다.
방법은 간단하다. 아래 사이트로 이동해서 PWA 페이지 주소를 입력하고 기다리면 된다.
단, https를 지원하는 페이지여야 한다.
PWABuilder
www.pwabuilder.com
스토어에 올릴 때 개인정보 처리방침이 필요한데
개인정보 처리방침을 만들어주는 한국 사이트에서 기능 제공을 중단했다.
외국 사이트를 이용하면 된다.
구글에 app privacy policy generator 라고 검색하면 찾을 수 있다.
3. 기기 진동 울리는 방법
놀랍게도 javascript에서 모바일 기기에 진동을 울리는 기능을 제공한다.
단, 안드로이드에서만 가능하다.
아래와 같이 사용할 수 있다.
if(navigator.vibrate){
navigator.vibrate(10); // 1000 = 1초
}
단순히 촉각 피드백을 위해서 사용하는 것이라면 값은 1~10 정도가 적당하다.
이렇게 배열로 패턴을 전달해 줄 수도 있다.
navigator.vibrate([
100, 30, 100, 30, 100, 30, 200, 30, 200, 30, 200, 30, 100, 30, 100, 30, 100,
]); // Vibrate 'SOS' in Morse.
4. 스플래시 스크린 적용
IOS 로딩화면을 아래 사이트에서 만들 수 있다.
https://appsco.pe/developer/splash-screens
Appscope
Appscope is a directory of Progressive Web Apps, showcasing hundreds of excellent PWA examples.
appsco.pe
