PWA의 캐싱과 푸쉬 기능은 익히 알려져 있지만, 홈 설치에 대해선 제대로 되어있는 문서가 거의 없다. 기능은 기존 바로가기의 전체화면 버전이라 간단해보이지만 구현해보면 빙산의 일각인 걸 절실히 깨닫게 된다.
Add To Home Screen, 홈 설치, 웹 앱 설치
사전지식
아래 사전지식이 없으면 이 문서가 읽기 힘들 수 있다.
- es6
- 서비스워커
- 캐싱 전략
조건
홈 설치가 되려면 다음과 같은 조건이 필요하다. 크롬 측 설명인데 다른점이 많아서 하나씩 까보자.
- HTTPS
- 서비스워커 설치
- start_url 이 오프라인 사용가능
- 최소 192px 아이콘 지원
- manifest.json 에 name 과 short_name 값 등록
HTTPS
HTTPS 를 통해 서비스가 제공되어야한다고 나오는데, 도메인 뿐아니라 페이지의 모든 리소스가 HTTPS 프로톨콜로 전송되어야한다.
서비스워커 설치
PWA 를 시작하는데 필수 요소니 자세한 설명은 생략
start_url 오프라인 사용가능
어느 캐싱전략을 사용해도 상관없으나 오프라인 모드로 연결이 되어야한다. 국내 서비스일 경우 크게 느리지 않으므로 Network First Strategy 로 캐싱하는 걸 추천한다. 국외 서비스일 경우 로드되는 리소스까지 캐싱전략을 세워야될 수 있다.
여기서 start_url 에 querystring 을 추가해 사용하는 경우가 대부분일텐데 캐싱되는 URL 은 querystring 이 없다는 걸 감안해야한다.
예를 들어보자.
{
// 보통 fetch request 로 접근되는 경로는 다음과 같다.
"start_url": "/",
// 검색 파라미터가 달려있다면 이런 모양일 것이다.
"start_url": "/?NaPm=",
// 하지만 manifest.json 에 들어있는 경로는 다음과 같을 것이다.
"start_url": "/?pwa=1&utm_source=pwa"
}
유저가 접근시 ['NaPm', 'pwa', 'utm_source']
등의 파라미터를 제거해야 경로가 캐시처리되며 오프라인 접근이 될 것이다.