PWA란 무엇이고 장단점은 무엇인가에 이어 웹앱 매니페스트(Manifest)를 만들고 사용하는 방법입니다. PWA의 핵심은 매니페스트(Manifest)와 서비스워커(service-worker)입니다. 그중에서 매니페스트(Manifest)는 인스톨 배너와 앱 아이콘에 대한 설정을 담당합니다.
웹앱 매니페스트(Manifest)란?
웹앱 매니페스트(Manifest)는 PWA(Progressive Web Apps)의 설치와 앱의 구성 정보를 담고 있는 json 설정파일입니다. 이 설정은 크게 아래와 같은 작업을 합니다.
- App Icon : 설치 시 앱의 아이콘 이미지와 크기 설정
- 스플래시((splash screen) 화면 : 로딩화면 설정
- Start URL : 웹앱이 실행될 때 가장 처음 보여질 URL 설정
- Display Type : 웹 앱의 화면 형태 (browser, standalone, fullscreen)
- Display Orientation : 웹앱의 화면 방향(가로모드, 세로모드)
웹앱 매니페스트(Manifest)의 설정
웹앱 매니페스트의 설정은 JSON으로 설정합니다. 아래와 같은 코드를 작성하여 <head> 태그 안에 배치 합니다.
index.html
<head> <link rel="manifest" href="manifest.json"> </head>manifest.json
{ "short_name": "프로젝트 이름(아이콘의 이름으로 표시됨)", "name": "설치 배너에 표시되는 이름(검색의 키워드로 사용됨)", "icons": [ { "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" }, { "src": "images/icon192.png", "sizes": "192x192", "type": "image/png" }, { "src": "images/icon512.png", "sizes": "512x512", "type": "image/png" } ], "start_url": "./index.html", "display": "standalone", "orientation": "portrait", "theme_color": "#000000", "background_color": "#ffffff" }각 설정은 아래와 같습니다.
short_name 지정
short_name은 필수 입력사항으로 short_name이 있어야 배너를 설치 할 수 있습니다. 이것은 프로젝트 이름으로 설치된 아이콘의 이름으로 표시 됩니다.
name 지정
name도 필수 입력사항으로 name이 있어야 배너를 설치 할 수 있습니다. 이것은 설치 배너에 표시되는 이름이며 검색의 키워드로 사용됩니다.
icons 지정
icons는 앱에서 필요한 다양한 크기의 아이콘을 지정합니다. 그중에서도 192px(128dp)는 꼭 있어야 하는 크기의 아이콘입니다. 이 아이콘이 있어야 스플래시 화면이 표시 됩니다.
dp는 주로 모바일에서 사용하는 크기 단위로 여러가지 화면에서 동일한 비율의 크기를 표시합니다.
Splash screen 설정
스플래시 스크린은 3가지의 설정 조합으로 구성됩니다. 배경색 + 아이콘 + short_name(아이콘 이름)이 설정되었다면 스플래시 화면이 나옵니다.
- 배경색
- 아이콘
- short_name
start_url 설정
start_url은 필수 요소로 웹 앱이 실행될때 가장 처음 나오는 화면을 지정합니다. 말하자면 스플래시 화면 다음에 나오는 화면입니다.
기본 설정은 아래와 같이 설정합니다.
"start_url": "./index.html",그 외에 Query string를 사용하여 통계에 사용할 수도 있습니다.
"start_url": "./index.html?qa=homescreen",display 설정
display의 설정은 웹앱이 어떤 모양으로 보여질지 설정하는 값입니다.
- browser(normal) : 해당 브라우저에서 기본 웹으로 실행
- standalone : 상단의 URL바를 제거하여 네이티브앱처럼 보임(가장 많이 사용함)
- fullscreen : 화면전체를 사용하여 native처럼 보임
iOS에서 standalone 사용 시 <head> 태그 안에 아래의 메타태그를 추가해야 합니다.
<meta name="apple-mobile-web-app-capable" content="yes">theme_color 설정
테마 컬러는 브라우저 상단의 URL 입력바와 시스템 바까지 포함한 색상을 지정할 수 있습니다.
"theme_color": "#0087F7",
orientation 설정
orientation은 기기의 방항을 가로로 할지 세로로 할지 지정하는 값입니다. 게임이 아니라면 거의 세로모드를 사용하면 됩니다.
"orientation": "portrait",portrait: 세로모드landscape: 가로모드
PWA를 설치할 수 있는 이벤트와 구현 방법
웹앱의 가장 기대하는 기능 중 하나가 웹앱을 설치할 수 있다는 것일 것입니다. 웹앱을 설정하기 위해서는 아래와 같은 몇가지 조건이 갖추어져 있어야 합니다.
- 기존에 웹 앱이 설치되어 있지 않아야 합니다.
- 30초 이상 웹사이트를 탐색해야 합니다.
start_url,short_name,name이 설정되어 있어야 합니다.192px크기 이상의 앱 아이콘이 설정되어 있어야 합니다.Service Worker의fetch이벤트가 구현되어 있어야 합니다.HTTPS로 보안 서비스 되어야 합니다.
원래는 자동으로 설치배너가 보이게 되어 있으나 설치버튼을 클릭하여 설치할 수 있게 할 수도 있습니다. 아래의 javascript코드를 작성하면 됩니다.
var deferredPrompt; window.addEventListener('beforeinstallprompt', function(e) { console.log('beforeinstallprompt Event fired'); e.preventDefault(); // Stash the event so it can be triggered later. deferredPrompt = e; return false; }); // 특정 버튼 클릭 시 설치 시작 btnSave.addEventListener('click', function() { if(deferredPrompt !== undefined) { // The user has had a postive interaction with our app and Chrome // has tried to prompt previously, so let's show the prompt. deferredPrompt.prompt(); // Follow what the user has done with the prompt. deferredPrompt.userChoice.then(function(choiceResult) { console.log(choiceResult.outcome); if(choiceResult.outcome == 'dismissed') { console.log('User cancelled home screen install'); } else { console.log('User added to home screen'); } // We no longer need the prompt. Clear it up. deferredPrompt = null; }); } });Web App Manifest 디버깅
- 크롬 브라우저의 개발자도구의 Application탭을 선택합니다.
- Manifest항목을 확인합니다.
- 설정한 내용이 잘 적용되어 있는지 확인 합니다.
- 크롬 브라우저의 주소창에
chrome://flags입력하고 - 설정 옵션 중 사용자 참여 검사 우회(Bypass user engagement checks) 체크합니다.
이 설정은 웹앱 개발 시 필수요소가 설정되어 있지 않더라도 브라우저에서 인스톨 배너(앱 아이콘 설치)가 뜨는지 않 뜨는지 확인 할 수 있게 해 줍니다.
주의할 점
마지막으로 PWA가 Safari에서는 잘 인식하지 않는 경우 가 있습니다. 그것을 대비해서 HTML의 <HEAD>영역에 아래의 meta태그를 입력합니다.
<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png"> <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
