프로그레시브 웹앱(PWA)을 정리해 봤습니다
현재 진행하고 있는 프로젝트는 제조 공장의 설비 데이터를 실시간으로 확인하는 모바일 웹앱을 만드는 것이다.
설비(PLC)에 에러나 이상이 있는 경우 모바일 push 알림으로 알려주고 설비의 상태를 실시간으로 확인할 수 있다.
이 프로젝트는 프로그레시브 웹앱으로 만들어졌으며 전임자가 만들어 둔 뼈대에 살을 붙이는 작업을 진행 중이다.
이번 프로젝트를 시작하며 그리고 마무리 단계까지 오며 개발하고 공부했던 프로그레시브 웹앱에 대해 정리해 볼까 한다.
프로그레시브 웹앱
PWA(Progressive Web Apps)는 2016년 구글 I/O에서 처음 발표된 개념으로, 웹 링크로 접근하지만 앱처럼 사용할 수 있도록 만든 웹(?)이다. 여기서 “앱처럼 사용할 수 있다”라는 말은 무엇인가!
앱처럼 사용할 수 있다
일반적으로 웹은 모바일의 네이티브 기능을 사용하지 못한다. 네이티브 기능이라 함은 카메라 앱 접근, push 알림 메세지 발송 등 휴대폰 기기를 조작하고 동작시키는 것들이라 할 수 있다. 웹 브라우저 언어인 자바스크립트로 휴대폰을 조작할 수가 없는 것은 당연하다. 그런데 PWA는 이런 것을 가능케 하기 때문에 모바일 "앱처럼 사용할 수 있다"고 표현했다.
프로그레시브 웹앱의 정의
PWA는 하나의 개발 방식이자 개념이기 때문에 "이건 PWA고 이건 반응형 웹이고 이건 모바일 앱이야"라고 구분하기가 애매하다. 현재로서 가장 널리 알려진 PWA의 정의는 아래와 같다.
PWA로 식별되기 위한 핵심 원칙
1. 검색 가능(Discoverable), 컨텐츠를 검색 엔진을 통해 찾을 수 있어야 한다.
2. 설치 가능(Installable), 기기의 홈 화면이나 앱 런처에서 사용할 수 있어야 한다.
3. 연결 가능(Linkable), URL을 통해 공유할 수 있어야 한다.
4. 네트워크 독립적(Network indenpenent), 오프라인 상태에서 동작하거나 혹은 열악한 네트워크 연결에서도 동작해야 한다.
5. 점진적 향상(Progressively enhanced), 최신 브라우저에서는 모든 기능을 사용할 수 있고 구형 브라우저에서는 기본적인 수준으로 사용할 수 있어야 한다.
6. 재참여 가능(Re-engageable), 새 컨텐츠가 사용 가능할 때마다 알림을 보낼 수 있어야 한다.
7. 반응형(Responsively designed), 스크린과 브라우저를 탑재한 모든 장치에서 사용할 수 있어야 한다 - 모바일 폰, 태블릿, 노트북, TV, 냉장고, 등.
8. 안전(Secure), 사용자, 앱, 서버간의 연결은 민감한 데이터에 접근을 시도하는 모든 제3자에 대해 안전해야 한다.
- 출처 : MDN
근데 막상 개발하고 사용해 보니 백그라운드 동작, push 알림 사용 가능, 모바일 화면에 앱 설치 이 정도 기능으로도 충분히 일반적인 앱과 유사하다고 느꼈다.
프로그레시브 웹앱의 장점
PWA의 가장 큰 장점이라고 하면 위에 나열한 주요 기능 3가지이지만 이것이 장점이 되려면 한 가지 필수 전제 조건이 있다. 바로 구글 플레이스토어와 애플 앱 스토어를 거치지 않고도 다운로드 및 업데이트를 할 수 있다는 점이다.
보통 앱을 출시하거나 업데이트 및 배포할 경우 구글과 애플의 승인이 떨어져야 한다. 문제는 승인 기준을 알 수도 없거니와 언제 승인이 나는지도 몰라 막막하다는 것이다. 앱 배포 후 플레이스토의 승인까지 빠르면 하루 느리면 일주일까지 기다린 적도 있다. 승인 거절이 난다면 문제 부분을 수정 후 또 승인을 기다려야 한다. 만약 업데이트 후에 예상치 못한 버그로 핫픽스 배포해야 하는 경우 정말 아찔해진다.
PWA는 웹 배포이기 때문에 이런 고통을 받지 않아도 된다. 구글과 애플에게 숙제 검사를 맡지 않아도 된다는 것이다.
프로그레시브 웹앱 예시
최근에 경험했던 PWA는 브랜드에서 이벤트 페이지였다. 간단하게 이벤트 게임도 구현하고 재밌었던 경험이었다. 그리고 실제로 RPG 게임도 있어서 해봤다. 고블린 슬레이어라는 게임인데 웃긴건 앱을 삭제하면 내 계정의 모든 데이터가 사라진다.
프로그레시브 웹앱 개발
그럼 PWA 개발 과정을 보며 어떻게 백그라운드에서 동작하고 push 알림 기능을 사용할 수 있는지 살펴보자. 참고로 PWA는 프레임워크도 아니고 라이브러리도 아니며 가능한 최고의 웹앱 경험을 전달하기 위한 기술이자 개념임을 인지하고 언급 되는 특정 기술이 꼭 PWA의 핵심 기술이 아닌 것을 유의하자!
백그라운드 실행 - 서비스 워커
service-workers는 브라우저와 네트워크 사이의 가상 프록시 서버 역할을 한다. 아래 그림을 보면 서비스워커는 브라우저나 서버에 붙어있는 것이 아니며 독립적으로 존재한다. 그렇기 때문에 브라우저가 종료되어도 캐시데이터를 가지고 백그라운드에서 작동한다.
서비스워커를 실행시키는 방법은 간단하다. 가장 메인이되는 html 파일에서 서비스워커를 등록하는 코드와 service-worker.js 파일을 추가하면 된다.
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("./service-worker.js")
.then((service) => {
console.log("서비스 워커 등록", service.active);
})
.catch((err) => {
console.log("서비스 워커 등록 실패", err);
});
}
</script>
서비스워커는 캐시를 기반으로하기 때문에 캐시전략이나 관리가 중요하다. 아직은 서비스워커의 캐시 플로우나 생명주기를 제대로 파악하지 못했다. 조만간 공부해서 따로 정리해 볼 예정이다.
앱 정보 등록 및 설치 구현 - manifest
PWA가 성립되기 위해서는 일반적인 모바일 어플리케이션처럼 사용할 수 있어야 한다는 것인데, 이를 위해서는 앱 설치가 가능해야 한다. 이를 가능케하는 것이 바로 manifest.json 파일이다. 해당 파일에서 앱 아이콘, 이름, 설명 등을 설정할 수 있다. 그리고 html에서 manifest파일을 link하면 된다.
// index.html
<head>
<link rel="manifest" href="manifest.json">
</head>
// manifest.json
{
"name": “재밌는 모바일” 앱,
"short_name": “재밌는 앱”,
"description": “신비로운 모험이 가득한 앱”,
"icons": [
{
"src": “./icon_32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "./icon_512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/pwa-examples/funapp/index.html",
"display": "fullscreen",
"theme_color": "#B12A34",
"background_color": "#B12A34"
}
manifest 파일을 html에 링크 했다면 다음과 같이 설치 아이콘이 생기고 모바일 화면이나 바탕화면에 앱 형태로 설치할 수 있다.
푸시 알림
PWA에서 푸시 알림을 구현 방법은 조금 독특하다. 앱으로 데이터를 전송해 줄 서버를 구독하는 방식인데, 이것을 구현하긴 위해서는 별도의 메세지 서비스 라이브러리를 사용한다. 주로 firebase의 FCM(Firebase Cloud Message) 사용한다.
푸시 알림의 동작 원리를 그림으로 표현하자면 아래와 같다.
프로그레시브 웹앱 프로젝트를 진행하며..
처음 PWA 개념을 접했을 때 상당히 놀라웠다. 웹 구현이지만 앱으로써 기능을 하는 것을 보고 활용 가능성이 무궁무진하겠구나 싶었다.
단점
물론 아직 PWA는 유저 입장에서 설치하는 과정이나 사용법이 상당히 어색하다. 실제로 서비스를 사용하는 분들께 앱 다운로드 설명서를 나눠줬을 만큼 설치 단계부터 헤매는 경우가 있었다. 물론 install 안내 팝업을 통해 다운로드를 유도할 수도 있지만 기기나 크롬 앱 버전에 따라 팝업이 뜨지 않는 경우도 많았다. 그리고 service-worker는 캐시를 활용하기에 재설치 할 경우 캐시 데이터가 휘발되기 쉽고 잔여 캐시 때문에 업데이트가 제대로 반영되지 않는 경우도 있었다. 물론 이 부분은 service-worker에서 제공하는 캐시 api를 활용하여 해결할 수 있지만 예상치 못한 버그나 에러가 발생하기도 했었다.
이번 프로젝트를 진행하며 현재까지도 우여곡절이 많지만 매번 새로운 개념을 알게 되어 재밌다(급마무리)
참고 블로그
https://developer.mozilla.org/en-US/docs/Web/API/PushManager
https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Tutorials/
https://www.happykoo.net/@happykoo/posts/188
https://firebase.google.com/docs/cloud-messaging/concept-options?hl=ko