본문 바로가기
반응형

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이 있어야 배너를 설치 할 수 있습니다. 이것은 설치 배너에 표시되는 이름이며 검색의 키워드로 사용됩니다.
https://developer.mozilla.org 참고

icons 지정

icons는 앱에서 필요한 다양한 크기의 아이콘을 지정합니다. 그중에서도 192px(128dp)는 꼭 있어야 하는 크기의 아이콘입니다. 이 아이콘이 있어야 스플래시 화면이 표시 됩니다.

dp는 주로 모바일에서 사용하는 크기 단위로 여러가지 화면에서 동일한 비율의 크기를 표시합니다.

Splash screen 설정

스플래시 스크린은 3가지의 설정 조합으로 구성됩니다. 배경색 + 아이콘 + short_name(아이콘 이름)이 설정되었다면 스플래시 화면이 나옵니다.

  1. 배경색
  2. 아이콘
  3. 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",

https://developers.google.com 참조

orientation 설정

orientation은 기기의 방항을 가로로 할지 세로로 할지 지정하는 값입니다. 게임이 아니라면 거의 세로모드를 사용하면 됩니다.

"orientation": "portrait",
  • portrait : 세로모드
  • landscape : 가로모드

wikipedia.org 참조

PWA를 설치할 수 있는 이벤트와 구현 방법

웹앱의 가장 기대하는 기능 중 하나가 웹앱을 설치할 수 있다는 것일 것입니다. 웹앱을 설정하기 위해서는 아래와 같은 몇가지 조건이 갖추어져 있어야 합니다.

  • 기존에 웹 앱이 설치되어 있지 않아야 합니다.
  • 30초 이상 웹사이트를 탐색해야 합니다.
  • start_url, short_name, name이 설정되어 있어야 합니다.
  • 192px 크기 이상의 앱 아이콘이 설정되어 있어야 합니다.
  • Service Workerfetch 이벤트가 구현되어 있어야 합니다.
  • 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 디버깅

  1. 크롬 브라우저의 개발자도구의 Application탭을 선택합니다.
  2. Manifest항목을 확인합니다.
  3. 설정한 내용이 잘 적용되어 있는지 확인 합니다.

  1. 크롬 브라우저의 주소창에 chrome://flags 입력하고
  2. 설정 옵션 중 사용자 참여 검사 우회(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">

참조

728x90

UX 공작소

고급지게 만들어 저렴하게 배포는 공작소