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) 체크하여 조건 충족

실습

  1. index.html 생성
  2. manifest.json 생성
  3. 앞에서 배운 name, icon, display, background_color 등 지정
  4. node.js로 로컬 서버 구성
  5. node server.js 로 서버 구동 후 localhost:3000 접속
  6. 개발자도구 Application 으로 manifest 파일 내용 확인

지원되는 브라우저 (17년 5월 기준)

  • Chrome 42 이상
  • Firefox
  • Opera
  • Samsung Internet

참고