PWA란?
기존에 서비스되는 웹 페이지를 모바일 환경에서도 별도의 포팅이나 어플리케이션 개발 없이도 사용할 수 있게끔 만든 형태.
각 플랫폼별 언어를 이용한 개발이 필요하지 않으므로, 크로스 플랫폼을 완벽하게 지원한다고 볼 수 있다.
PWA의 조건
- HTTPS 운영 - 보안문제 해결.
- Lets entrypt, cert bot 등을 이용한 SSL 적용하기
- 웹 앱 매니페스트|Web App Manifest 존재
- 사이트와 관련된 정보를 담은 JSON 파일을 적용하는것.
- 모바일 환경에서도 잘 동작할 수 있게 대응.
- 서비스 워커|Service Worker 사용
- 백그라운드에서 동작하는 프로세스로 실행됨
- App이 종료된 상태에서도 동작하거나, 캐싱 등의 다양한 기능을 제공.
- 반응형 디자인 적용
- Offline 기능 적용
구글 Lighthouse report - 해당 웹 서비스의 품질을 평가하는 도구 . 다양한 기능들에 대한 성능 평가를 통해 해당 사이트의 품질을 평가하고, WPA 앱으로써 적절한 요소들을 가지고 있는지 체크해준다.
Manifest 적용하기
manifest 는 해당 웹 서비스에 대한 전체적인 정보를 가지고 있는 파일로써, 보통은 최상위 디렉토리에 존재하여 index 페이지에 삽입되어 동작한다.
일반적으로 만들어진 웹 서비스가 안드로이드,IOS와 같은 모바일 환경 등에서 마치 어플리케이션처럼 동작하기 위한 각종 속성들을 표기한다.
장고에서 이를 사용하기 위해 static 디렉토리의 최상위에 위치시키고, 메인 페이지 html 에 포함시켜 사용하였다.
매니페스트 파일 안에는 앱의 이름 , 아이콘, 시작 URL, 출력 타입, 배경/테마 색상, 설명 , 기본언어 등이 포함된다.
매니페스트 세팅이 완료되었다면, 웹 페이지에서 개발자 도구를 실행 - application 탭으로 가서 정보 확인이 제대로 되는지 확인해보면 된다.
Service Worker 사용하기
Service Worker의 모든 역할은 event에 대해 반응하는것 이라고 주로 표현한다. 아래와 같은 다양한 기능을 제공하여 PWA에서 중요한 역할을 한다.
- Offline Access
- Push Notification
- Background Synchronization
Service Worker는 싱글 쓰레드로 동작하는 웹페이지의 자바스크립트와 별개의 쓰레드를 가진다. 따라서 백그라운드 작업으로 웹 페이지에서 동작하는 자바스크립트와 병렬처리가 가능하다.
현재 로드된 웹 페이지와는 별개로, manifest에 정의된 scope범위 페이지에서 동작할 수 있는데, 이러한 방식은 해당 페이지들이 로드되지 않았더라도 백그라운드에서 스크립트가 동작하여 해당 페이지에 대한 동작을 미리 처리할 수 있게 한다. 이러한 특징 덕에 1,2,3의 기능을 제공할 수 있다.
이와는 별개로, https 가 제공되는 페이지에서만 service worker를 사용할 수 있다. 다만 로컬에서 개발중일때는 https가 없더라도 사용 가능하다.
Service Worker의 수신 이벤트
service worker는 이벤트 기반으로 동작한다고 했다. 아래와 같은 이벤트들을 수신하여 그에 반응하는 식으로 동작한다.
- Fetch
- 웹 자원에 접근하기 위해 행해지는 모든 요청 동작들을 칭함.
- 서비스워커는 fetch 를 통해 발생하는 모든 http 요청에 대해 network proxy로써 반응한다.
- network proxy -> 사용자로부터 서버로 가는 요청들을 service worker가 미리 가로채고, 해당 요청들에 대해 적절한 동작을 하여 사용자나 서버로 다시 보낸다. https 가 필요한 이유 중 하나.
- css/자바스크립트 파일 임포트시에도 fetch 이벤트가 발생한다.
- Push Notification
- 서비스워커는 푸시알림을 수신하며, 푸시알림은 브라우저별로 있는 별도의 푸시 서버에서 보내진다.
- 우리의 서버에서 사용자로 바로 푸시 알림을 보내는것이 아니고, 서비스 서버에서 브라우저 푸시서버로 푸시 알림을 보내고, 브라우저 푸시서버가 이를 수신하여 다시 사용자 장치에 푸시 알림을 발송하는 식으로 동작한다.
- 사용자 장치에서 백그라운드 프로세스로 실행되는 서비스 워커는 브라우저 푸시서버가 보낸 알림을 수신하여 사용자에게 보여준다.
- Notification Interaction
- 사용자가 푸시알림을 받은 경우, 해당 푸시알림을 터치하는 등의 동작에 반응하는것 또한 서비스 워커가 담당한다.
- Background Sync
- 인터넷 연결이 오프라인인 상태에서, 사용자의 action이나 요청을 서비스워커가 받아 저장했다가 연결이 복원되는 대로 해당 요청을 서버로 발송함.
- Service Worker Lifecycle
- Installation , Activation 의 두 단계 중 하나를 후킹하여 코드를 추가하면 원하는 동작의 수행이 가능해짐.
Service Worker Life Cycle
Install과 Activate 의 두 단계로 나뉨
- Install
- 브라우저가 서비스워커를 설치하며 Install Event가 발생한다. 이때 install event 코드를 후킹하여 원하는 동작을 끼워넣을 수 있음. 주로 pre-caching을 위해 사용한다.
- 브라우저 페이지 새로고침시 -> 항상 서비스워커가 재설치되지는 않음. 서비스워커가 설치되지 않았거나, 변경사항이 있는 경우에만 재설치가 이뤄짐.
- Activate
- install 종료 직후 실행중인 서비스 워커가 없는경우 진입하는 단계. 실행중인 이전 서비스 워커가 있는 경우에는 대기상태로 진입하여 기존 탭이 닫히길 기다린다.
- 서비스 워커는 도메인 전체를 작동 범위로 하기 때문에, 특정 페이지가 아닌 해당 서비스의 전체 페이지가 닫혀야 activate 단계로 진입할 수 있다.
- 이 단계 이후에는 idle mode-> terminate mode순으로 진행된다. 둘 다 event 수신이 가능한 상태이며, fecth 발생시 terminate 모드는 idle로 전환되어 event에 대한 반응을 수행한다.