Web App Manifest
Progressive Web App 의 설치와 앱 구성정보를 담고 있는 json 형식의 설정 파일 앱 아이콘, 화면 런쳐 방식 및 배경색, 시작 페이지 등을 설정할 수 있는 JSON 파일
앱 관련 구성정보에는 아래와 같은 항목들이 설정됩니다.
- Start URL : 웹 앱이 시작되는 지점
- Launch Image : 웹 앱 시작 화면
- Display Type : 웹 앱의 화면 형태
- Display Orientation : 웹 앱 화면 방향
- App Icon : 앱 아이콘 이미지와 크기
Web App Manifest 파일 구조
{
"short_name": "
"name": "
"icons": [
{
"src": "dist/images/icons/icon‐32x32.png",
"type": "image/png",
"sizes": "32x32"
},
{}
],
"background_color": "#1E88E5",
"display": "standalone",
"start_url": "./"
}
파일 등록
<link rel="manifest" href="/manifest.json">
웹 앱 설치 배너 동작 조건
앱이 다음 기준을 충족하면 Chrome이 배너를 자동으로 표시합니다.
- 웹 사이트가 설치되어 있지 않음
- 사용자가 최소 30초 이상 웹 사이트를 탐색
- 웹 앱매니페스트 파일에 다음이 포함됨:
start_url
로드short_name
(홈 화면에 사용)name
(배너에 사용)- 192x192 png 아이콘(아이콘 선언에 mime 유형의 image/png이 포함되어야 함)
- Service Worker의 fetch 이벤트 구현
- HTTPS를 통해 서비스가 제공됨 (서비스 워커를 사용하기 위한 요구사항).
beforeinstallprompt
로 설치 배너의 표시 시기를 지연하거나 disable 가능
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;
});
}
});
https://developers.google.com/web/fundamentals/app-install-banners/?hl=ko
Install Banner 디버깅
- 주소창에
chrome://flags
입력 - 설정 옵션 중 사용자 참여 검사 우회(Bypass user engagement checks) 체크하여 조건 충족
실습
- index.html 생성
- manifest.json 생성
- 앞에서 배운 name, icon, display, background_color 등 지정
- node.js로 로컬 서버 구성
- node server.js 로 서버 구동 후 localhost:3000 접속
- 개발자도구 Application 으로 manifest 파일 내용 확인
지원되는 브라우저 (17년 5월 기준)
- Chrome 42 이상
- Firefox
- Opera
- Samsung Internet