PWA 적용해보기 - manifest 적용

b00032 | javaScript | 2019-08-17

들어가며

이번에는 요즘 한창 구글과 모질라가 밀고있는 기술중 하나인 PWA를 적용해 보려 합니다. 한번에 전부 설명하기에는 너무 많아 우선 manifest 부터 적용하고 push, 오프라인 을 따로 올리도록 하겠습니다.

PWA

PWA(Progressive Web App)는 웹을 데스크톱 및 모바일에서 설치 가능하고 앱과 유사한 환경을 제공합니다. 앱과 유사한 경험을 지원하기 위해 PWA(Progressive Web App)는 푸쉬 알림(Push notification), 설치(install), 오프라인 지원 등의 기능을 지원하고 있습니다.

manifest

manifest 는 웹을 데스크톱 및 모바일장치에 설치할때 이에 대한 아이콘, 이름, 시작시 시작해야하는 경로 등의 내용을 브라우저에게 알려주는 json파일 입니다. manifest 을 설정하게 되면 해당 웹을 설치할때의 아이콘을 설정할 수 있고 해당 앱을 들어갈때 스플래시 이미지를 보여주어 좀더 App과 가깝게 느낄수 있도록 해줄 수 있습니다. 설정은 json 형태로 생성하여 웹앱 link 에 해당되는 페이지에 태그를 추가하면 됩니다. 우선 json 파일을 먼저 생성해보도록 하겠습니다.

manifest.json

"name": "woolta blog",
"short_name": "woolta",
"icons": [
    {
      "src": "/images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },,
    {
      "src": "/images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
"display": "standalone",
"orientation": "landscape",
"background_color": "#fff",
"theme_color": "#fff",
"start_url": "/"

속성의 자세한 설명은 바로 밑에서 설명하도록 하겠습니다. 이렇게 만든 파일을 적용할 페이지에 다음과 같이 link 태그를 사용하여 추가해주면 됩니다.

<link rel="manifest" href="/manifest.json">

이렇게 설명하면 manifest 설정이 완료되었습니다. 생각보다 훨씬 간단합니다. 이제 각 속성들에 대해 알아보도록 하겠습니다. :)

manifest 속성 알아보기

name, short_name

name : 웹을 설치하게 되면 icon에 표시되는 이름입니다.
short_name : 사용자의 홈 화면 이나 name 을 보여주기에는 제한적인 장소에서 표시되는 이름입니다.

"name": "woolta blog",
"short_name": "woolta"

display

display 속성은 설치한 웹 을 실행할때 브라우저 처럼 보일지 앱처럼 보일지 아에 전체화면으로 보일지 등의 대한 설정을 할 수 있습니다. 속성 옵션으로는 fullscreen, minimul-ui, standalone, browser 가 있습니다. 보통 특별한 경우가 아니라면 standalone 을 사용합니다.

"display": "standalone"

속성	설명
browser	일반 브라우저와 동일하게 보입니다.
standalone	다른 앱들처럼 최상단에 상태표시줄을 제외한 전체화면으로 보입니다.
fullscreen	상태표시줄도 제외한 전체화면으로 보여줍니다.(ex. 게임)
minimul-ui	`fullscreen` 과 비슷하지만 뒤로가기, 새로고침등 최소한의 영역만 제공합니다.(모바일 크롬 전용)

orientation

앱이 실행될때 가로, 세로 의 방향을 선택할 수 있습니다. 해당 옵션은 선택사항이므로 고정해야하는 상황이 아니라면 사용하지 않으셔도 됩니다.

"orientation": "landscape"

icons

홈화면에 추가하면 생길때 사용할 아이콘을 설정하는 옵션입니다. 설정한 아이콘 이미지들은 앱 실행, 작업 전환, 스플래시 화면 등의 장소에 사용하게 됩니다. 아이콘의 사이즈는 48px 단위로 제공해야 합니다. !!

"icons": [
    {
      "src": "/images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },,
    {
      "src": "/images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]

safari 브라우저에서는 이를 지원하지 않아 head 에 다음과 같은 태그를 추가하여 브라우징 이슈를 해결합니다.

<link rel="apple-touch-icon" sizes="192x192" href="/images/icons/icon-192x192.png">
<link rel="apple-touch-icon" sizes="512x512" href="/images/icons/icon-512x512.png">

start_url

홈화면에 설치한 앱을 시작할때 처음에 시작할 위치를 지정합니다.

"start_url": "/"

theme_color

상단부의 테마 부분의 색상을 지정할 수 있습니다. 해당 색상은 Hex 로 지정합니다.

"theme_color": "#fff"

background_color

웹이 처음 시작될때 splashScreen 에서 사용하기 위해 사용됩니다. 값으로는 hex 값을 넣어줄 수 있습니다.

 "background_color": "#fff"

splashScreen

스플래시 화면은 앱이 시작될때 브라우저에서 초기콘텐츠의 렌더링이 끝날때까지의 잠시동안 띄워주는 화면입니다. 스플래시 화면을 설정하게 되면 초기 렌더링시 흰화면 대신 스플래시 이미지가 보이면서 사용하는 사용자에게 좀더 친화적인 환경을 제공합니다. 마치 앱처럼.!! 스플래시 이미지는 따로 설정하지 않고 name, background_color, icons 설정이 되어있으면 이를 조합하여 보여주게 됩니다. 아쉽게도 IOS 에서는 아직 지원하고 있지 않습니다.

이미지]()

크롬에서 적용여부 확인

이제 위에서 적용한 manifest.json 을 확인해보도록 하겠습니다. 우선 데스크탑에서 적용여부를 확인하기 위해서 크롬에서 개발자도구 -> application -> Manifest 탭으로 이동하시면 적용되어있는 부분을 확인할 수 있습니다.

위에서 지정한 각종 옵션들이 적용된 부분을 볼 수 있습니다. 자 이제 모바일 디바이스에서도 제대로 적용되는지 확인해 보도록 합시다.!!

모바일 디바이스 확인

IOS 의 경우 아래와 같이 사파리에서 홈 화면에 추가를, Android 기기도 동일하게 크롬에서 홈화면에 추가를 해주시면 됩니다.

웹사이트가 마치 App 처럼 독립적으로 실행되는 아이콘이 생겼습니다. 이제 아이콘을 클릭해보도록 합시다.

위의 이미지와 같이 웹사이트 이지만 마치 앱처럼 보이는군요.!! 심지어 골칫거리중 하나인 노치까지도 컬러 옵션이 설정되는것을 확인할 수 있습니다.!!

출처

gommpo111@gmail.com