Progressive Web App
: 네이티브 + 모바일웹앱 + 하이브리드
네이티브 앱과 똑같은 사용자 경험을 제공하는 것이 궁극적 목표임
💎 overview
pwa 개념
https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames
https://yozm.wishket.com/magazine/detail/1969/
🎨 예제 pinterest pwa 확인
1. 개발자도구 > application
2. 앱을 닫아도 동작하기 때문에 실시간 알림이 가능한 것!
2-1. 오프라인 적용?
오프라인을 체크해도(인터넷에 연결되어 있지 않습니다)
(ㅎㅇ)
공룡이 뜨지 않고 뭐가 존재하긴하는 이유? => 캐시가 남아있어서!
🎇 3. Lighthouse
앱의 완성도를 퍼센트로 측정하여 나타내는 대략적인 지표(퍼포먼스, seo 등)
client-side js proxy?
pwa를 이해하려면 앱 매니페스트와 서비스워커, HTTPS 프로토콜을 꼭 알아야한당
1. service worker
sw.js
pwa의 핵심!
웹 브라우저 안에 있지만 분리되어 항상 실행되는 백그라운드 프로그램
2. https
보안 안정성을 위함!
👑 실습
1. react 파일 생성
(ts도 지원한다함)
npx create-react-app [프로젝트명] --template cra-template-pwa갑자기 헷갈려서 찾아본 npx vs. npm
npx : 모듈을 로컬에 저장하지 않고, 매번 최신 버전의 파일만을 임시로 불러와 실행 시킨 후에, 다시 그 파일은 없어지는 방식(링크)
만약 설치시 web-vitals 에러가 뜨면
npm install로 web-vitals 설치해주면됨
1-1. 구동후 매니패스트 체크
icons 같은게 잘 있나~
1-2. service-worker.js
- src/index.js에서 resister 사용하기
-> 주석에 구구절절 잘 적혀있음!!
-> un만 빼주고 react 재구동
serviceWorkerRegistration.register();1-3. index.html
1) public/index.html
<script>
navigator.serviceWorker.register('sw.js')
.then(res=>{
console.log('서비스워커 등록 완료!!!')
})
</script>2) public/sw.js
// sw.js
// 처음에 한번만 install함
self.addEventListener('install', ()=>{
console.log('서비스워커 설치!')
})- 콘솔 체크, 서비스 동작 확인!!
+새로고침시 업데이트하도록 체크하기
1-4. mainfest.json
pwa의 여권!!!
mainfest.json에 앱 소개 정보와 기본 설정이 있음
name, color, icons ...
- display
"display": "standalone",휴대폰 디바이스의 상태표시줄, 하단 메뉴바를 보이게할지말지 선택
browser, standalone, fullscreen, minimul-ui
- icons
1) 이미지를 파비콘으로 만들어보자!
https://www.favicon-generator.org/
2) manifast 수정
"icons": [
{
"src": "icons/favicon.ico",
"sizes": "16x16",
"type": "favicon/ico",
"form_factor": "wide"
},
...3) 확인!
4) 에러 조지기
- manifast에 screenshots 키값 넣어주기
"screenshots": [
{
"src": "icons/nongdam.jpg",
"type": "image/jpg",
"sizes": "2048x1372",
"form_factor": "narrow"
},
{
"src": "icons/nongdam.jpg",
"type": "image/jpg",
"sizes": "2048x1372",
"form_factor": "wide"
}
],
- icons 타입 수정(맘대로 바꿨다가 에러남)
"icons": [
{
"src": "./icons/favicon-16x16.png",
"sizes": "16x16",
"type": "image/png"
},1-5. 이벤트 예시
// sw.js
self.addEventListener('install', (a) => {
console.log('서비스워커 설치 완료')
})
self.addEventListener('activate', (a) => {
console.log('서비스워커 동작 시작')
})
self.addEventListener('fetch', (a) => {
console.log('데이터 요청시 처리')
})
2. postMessage
2-1. 데이터 전송과 받기
src/App.js 데이터 전송
navigator.serviceWorker.controller.postMessage({
message: "Hello, service worker ~~~"
})public/sw.js 데이터 받기
self.addEventListener('message', (e) => {
console.log('메시지', e.data);
self.registration.showNotification('title', {
body: e.data.message
});
})
- 권한이 없어용!!
src/App.js
Notification.requestPermission().then();
-
알림 허가해주면, 하단에 쨔쟌
3. 테스트
index.html에서 서비스워커 등록한거 return으로 막고
src/service-worker.js에 작성한 알림 테스트 붙여넣기
버튼 클릭 이벤트로 바꿔본당
function msg() {
navigator.serviceWorker.controller.postMessage({
message: "Hello, service worker ~~~"
})
}
return(
...
<button onClick={msg}>알림메시지</button>
...
)