1. PWA란?
native app과 web app의 장점을 가진 web app입니다.
모바일 사용량이 늘어나는 추세지만 실제로 사용자가 어플을 까는데는 많은 과정이 필요합니다.
필요한 앱을 식별하고 스토어에 들어가 검색하고 설치하고 설치가 끝나면 그제서야 앱을 사용할 수 있습니다.
PWA는 이러한 고객 경험을 향상시켜줍니다. PWA는 웹 사이트에서 바로 앱 형태로 다운받을 수 있게 해줍니다. 앱 형태로 다운받는 것 외에도 다양한 기능을 지원해줍니다.
2. 특징
1. 오프라인 지원
Service Worker를 통해 오프라인으로도 사용할 수 있습니다.
service worker는 브라우저와 네트워크 사이에서 proxy server 역할을 합니다. service worker는 사용자가 처음으로 사이트에 접속하면 바로 설치됩니다.
오프라인 지원을 위해서는 오프라인용 페이지를 service worker를 통해 캐싱해두면 사용자가 오프라인 상태로 접속했을때 해당 페이지를 렌더링하게 됩니다.
2. 홈에 추가하기
모바일 앱 처럼 화면에 아이콘을 추가할 수 있습니다.
웹 앱이 홈에 추가하기를 지원하려면 다음과 같은 조건을 만족해야합니다.
- HTTPS 제공
- manifest 파일 제공
- 웹 앱이 아직 사용자의 기기에 설치되지 않았음
주의! ios chrome은 지원하지 않음!
https://support.google.com/chrome/answer/9658361?hl=en&co=GENIE.Platform%3DiOS
manifest 파일
{
"name": "",
"short-name": "",
"icons": [
{
"src": "", //정사각형 모양만 가능, 실제 이미지랑 크기 같아야함
"sizes": "32x32",
"type": "image/png"
}
],
"start_url": "https://localhost:5500",
"display": "fullscreen",
"theme_color" : "#F5C6AA",
"background_color": "#FCD8D4" //splash 화면과 웹앱 설치시에 사용할 배경 색상
}name, icon, start_url은 필수이고 형식이 안맞으면 설치 버튼이 안뜹니다.
windows chrome 기준으로 이런 버튼이 떠야 제대로 한겁니다.
원래는 사용자가 수동으로 설치해야 하지만
BeforeInstallPromptEvent 라는걸 써서 사용자에게 설치를 권유할 수 있는데
아직 지원하지 않는 플랫폼이 많기도 하고 비표준 기능입니다.
(비표준이란 추후에 기능이 많이 바뀔수도 있고 호환성에 문제가 있을수도 있다는 뜻)
3. web push 알림
이번 프로젝트에서 pwa를 도입하는 가장 큰 이유입니다. 웹 앱인데 푸쉬 알림을 지원한다니!
구현 순서
-
push 알림 권한을 받음
Notification.requestPermission()사용 -
server에 client에 message를 push하는 로직 추가
server가 client device에 직접적으로 push 알림을 보내는 것이 아니라 브라우저쪽에서 제어하는 push service에 요청을 하면 push service가 client에게 message를 보내는 방식입니다.
web-push-libs -
client에서 message를 받아 알림으로 출력하는 로직 추가
self.addEventListener('push', function(event) { if (event.data) { console.log('This push event has data: ', event.data.text()); } else { console.log('This push event has no data.'); } });self는 service worker를 뜻합니다.push event의 data에서 값을 받아오는 방법입니다.
event.data.text() event.data.json() event.data.blob()
