[01 PWA란? ]
- PWA는 프로그레시브 웹 앱(Progressive Web App)의 줄임말이다.
- 한 마디로 PWA는 HTML, CSS, JavaScript와 같은 웹 기술로 만드는 앱을 의미하는데 그 느낌과 기능이 실제 네이티브 앱과 견줄 수 있을 정도로 좋다고 한다.
- 대표적으로 푸시 알림이나 오프라인 지원과 같은 기능이 있다.
- 나는 푸시 알림을 사용하기 위해 PWA의 service worker를 사용했고, 푸시 알림을 구현하는 동안 프론트 분들이 반응형에 신경써주셔서 manifest.json 파일 설정을 통해 간단하게 홈 화면에 추가 기능까지만 구현해보았다.
[02 Manifest.json 파일 설정]
- 나는 Push API를 구현하고 나서 이 기능을 구현했는데 기능구현이라고 하기도 민망할만큼 간단했다...
- 따라서 꼭 service worker를 사용하는 PWA 기능을 사용하지 않더라도 front(우리팀의 경우 React)에서 반응형 웹만 잘 만들어 준다면 시간 대비 결과물이 좋아(?) 추천하는 기능이다.
- manifest.json 파일은 create-react-app 사용시 자동으로 생성되는 파일이지만 따로 설정하려면 index.html 파일과 같은 루트 디렉토리에 위치시키면 된다.
- 참고로 이 블로그에 옵션에 대한 설명이 자세해서 참고하기 좋았다.
(1) index.html
- 먼저 manifest.json 파일을 사용하려면 index.html 파일의 <head> 태그 안에 배치한다.
- create-react-app 사용시 자동으로 들어가있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="https://blog.kakaocdn.net/dn/Y1REr/btrEhV7ULvt/RRr1L4euPBpa5a8kKHBUp1/img.png" />
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Pill my rhythm</title>
</head>
<body>
...
</body>
</html>
(2) manifest.json
- 그리고 manifest.json 파일에서 사용하는 key와 그 의미는 다음과 같다.
- short_name : 필수, 프로젝트 이름 (아이콘의 이름으로 표시됨)
- name : 필수, 설치 배너에 표시되는 이름 (검색의 키워드로 사용됨)
- icons : 192px 필수(Splash 화면에 표시), 앱에서 필요한 다양한 크기의 아이콘들
- start_url : 필스, 웹앱이 실행될 때 가장 처음 나오는 화면의 경로
- display : 웹앱이 어떤 모양으로 보여질지 설정하는 항목
- browser(normal) : 해당 브라우저에서 기본 웹으로 실행
- standalone : 상단의 URL 바를 제거하여 네이티브앱처럼 보임 (가장 많이 사용)
- fullscreen : 화면 전체를 사용하여 native처럼 보임
- theme_color : 브라우저 상단의 URL 입력바와 시스템바에 설정할 색상
- orientation : 기기의 방향을 가로로 할 지 세로로 할 지 지정하는 항목, 게임이 아니라면 거의 세로모드 사용
- portrait : 세로 모드
- landscape : 가로 모드
- Splash screen 이란 앱 아이콘을 처음 눌렀을 때 웹 페이지가 뜨기 전 짧게 뜨는 화면으로 "배경색 + 192px 아이콘 + short_name"에 설정한 값으로 구성된다.
(3) iphone에서 이용시 주의할 점
- 이 때 iphone(ios)에서 홈 화면에 추가 기능을 이용하려면 주의할 점이 몇 가지 있다.
- 첫 째, display에 standalone 옵션을 사용할 때 index.html의 <head> 태그에 다음 meta 태그를 추가한다.
<meta name="apple-mobile-web-app-capable" content="yes">
- 둘 째, icons를 적용하기 위해서는 역시 index.html의 <head> 태그에 다음 link 태그를 추가한다.
<link rel="apple-touch-icon" sizes="192x192" href="192px이미지경로">
<link rel="apple-touch-icon" sizes="512x512" href="512px이미지경로">
(4) 적용 코드
- 우리 프로젝트에 적용할 버전으로 바꾼 최종 코드는 다음과 같다.
- 헷갈렸던 점은 start_url이 처음엔 "./index.html"인 줄 알았는데 그냥 default route 경로를 입력해야 했다.
{
"short_name": "PMR",
"name": "Pill My Rhythm",
"icons": [
{
"src": "badge-72x72.png",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "icon-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#7fdcdc",
"background_color": "#92e0df"
}
[03 적용 확인 ]
(1) chrome
- 적용한 manifest.json을 가장 쉽게 확인하는 방법은 개발자 도구(f12)이다.
- Application 탭의 Manifest 항목을 보면 적용된 소스 코드와 항목을 볼 수 있다.
(2) 홈 화면에 추가
- Android (chrome 앱)와 ios (safari 앱)에서 각각 적용한 모습은 다음과 같다.
- 홈화면에 추가하는 방법은 이 블로그를 참고하자.
