Manifest for web application을 사용할 일이 있어 스펙을 살펴보며 간단히 정리했다. 이 스펙은 web application을 브라우저가 아닌 곳에서 실행시킬 때 기기에서 표시할 정보와 실행에 필요한 정보를 저장하는 방법에 대해 정의하고 있다. 모바일 사이트나 web os등 이 스펙이 사용되는 곳은 심심치 않게 있겠지만 일반 사용자에게는 거의 눈에 띄지 않는 스펙이기도 하다.
개인적인 필요로 http://w3c.github.io/manifest/ 문서를 한 번 살펴보면서 정리한 것이므로 개인적으로 불필요하다고 생각하는 부분은 정리하지 않았고 문서의 품질을 높이기 위해 리뷰를 하지 않았으므로 내용이 누락되어 있거나 오역이 있을 가능성이 높다. 그러므로 이 문서를 참고할 분들은 적용 전에 반드시 원본 문서를 참고하면 좋겠다.
===
Manifest for web application
Editor’s Draft
11 Feb 2015
http://w3c.github.io/manifest/
요약
이 스펙은 개발자들이 웹 애플리케이션의 메타 데이터를 집중해서 관리할 수 있는 JSON 기반의 선언 방법을 정의한다. 앱의 이름, 링크, 아이콘을 지정하는 일 외에도 시작할 때 열리게 되는 페이지 등을 지정할 수 있다. 웹 앱의 기본 화면 방향이나 표시 방법 (풀스크린과 같은) 을 설정할 수 있다. 또한 앱을 URL에 scope하도록 함으로써 웹 앱에서 다른 웹 앱으로 이동할 수 있는 딥 링크를 사용할 수 있는 방법을 제공한다.
메타데이터를 사용하면 user agent (이하 ua)는 개발자들에게 네이티브 앱처럼 동작하는 사용자 경험을 제공할 수 있는 방법을 제공한다.
또한 여기서는 manifest 링크 타입을 정의하며 이는 문서 내에서 manifest를 연결하는 선언 방법을 제공한다.
1. 사용 예
1.1 일반적인 manifest의 예
{
"name": "Super Racer 2000",
"short_name": "Racer2K",
"icons": [{
"src": "icon/lowres",
"sizes": "64x64",
"type": "image/webp"
}, {
"src": "icon/hd_small",
"sizes": "64x64"
}, {
"src": "icon/hd_hi",
"sizes": "128x128",
"density": 2
}],
"scope": "/racer/",
"start_url": "/racer/start.html",
"display": "fullscreen",
"orientation": "landscape"
}
1.2 link를 사용한 manifest의 연결
<!doctype>
<html>
<title>Store finder - search</title>
<!-- Startup configuration -->
<link rel="manifest" href="manifest.json">
<!-- Fallback application metadata for legacy browsers -->
<meta name="application-name" content="Store Finder">
<link rel="icon" sizes="16x16 32x32 48x48" href="lo_def.ico">
<link rel="icon" sizes="512x512" href="hi_def.png">
2, 설치할 수 있는 웹 앱
manifest의 값들은 top-level browsing context (application context)에서 유효하다. > see 6.3
2.1 설치 가능 표시
적절한 값이 지정된 manifest가 있다면 ua에서는 설치 가능하다고 판단할 수 있음
하지만 정확한 기준은 브라우저마다 다를 수 있음
3. navigation scope
manifest랄 적용했을 때 application context가 이동할 수 있는 URL을 표시한 것
scopeUrl이 지정되어 있지 않거나 targetUrl과 scopeUrl이 same origin이고 pathname이 scopeUrl의 pathname으로 시작하면 이동 가능.
navigation scope은 scope 값으로 지정. 지정하지 않으면 unbounded 상태. 모든 url로 이동 가능
3.1 고려해야 하는 보안 문제
unbounded이고 browser 모드가 아닌 경우 ua에서는 보안/프라이버시 문제가 발생하면 사용자에게 알려야 함
3.2 deep links
설치된 웹 앱의 범위 내에 있는 url
4. display mode
사용자에게 보여지게 될 모습을 지정
display mode를 지정하면 top-level browser context에서 기본 display mode가 됨
기본은 browser
browser를 제외하고는 fallback display mode가 있다.
fullscreen: ua chrome이 없고 화면 전체를 사용
standalone: native app처럼 보임
minimal-ui: fullscreen과 비슷하나 네비게이션을 컨트롤 할 수 있는 최소의 ui를 제공
browser: 플랫폼에서 지정된 ua사용
4.1 display-mode 기능
css에서 display-mode로 구별하여 css를 지정할 수 있따.
EcmaScript에서는 matchMedia()를 사용하여 값을 확인할 수 있다.
5. 리소스와 manifest를 연결
resource는 리소스의 표현자인 html 문서에 manifest 링크 관계가 포함되어 있을 때 manifest와 연결되어 있다고 한다.
5.1 manifest 연결
link 엘리먼트를 이용하여 manifest 키워드를 사용할 수 있다.
manifest 타입이 여러개 있을 경우 첫 번째 line 엘리먼트만 유효하다.
6. manifest 라이프 사이클
6.1 manifest의 획득
브라우저에서 성공하면 처리된 manifest와 manifest url을 반환하지만 다른 경우에는 바로 멈추고 아무것도 반환하지 않음. 아무것도 반환되지 않으면 브라우저는 manifest 선언을 무시해야 함. 이 과정에서 브라우저는 load 이벤트를 지연시켜서는 안됨
manifest를 캐시하기 위해서는 명시적으로 캐시 선언자를 지정하기를 권장함
6.1.1 컨텐트 보안 정책
manifest-src, default-src를 사용하여 ua가 manifest를 얻을 수 있는 출처를 지정할 수 있음.
기본적으로 manifest-src는 * 이며 ua는 cors를 통해 어떤 곳에서도 값을 받아올 수 있음.
6.2 manifest의 처리
개발자에게 경고를 해야 할 때, ua에서 에러를 표시할 수도 그렇지 않을 수도 있음
에러를 무시할 경우 ua는 내용이 지정되지 않은 것처럼 처리되어야 함
extension point: 다른 스펙에서 새로운 종류의 값을 manifest에 추가하는 방법
manifest 처리 순서
파싱
extension point: 다른 값을 처리
start URL
display mode
orientation
name
short name
icons
scope
파싱이 끝난 manifest 반환
6.3 manifest의 적용
top-level browsing context에 manifest 적용
manifest의 값이 표시 방법이나 동작에 영향을 미치게 됨
manifest가 적용된 top-level browsing context는 application context라고 함
ua가 딥링크로 이동하는 요청을 받아 application context가 생성되면
ua는 즉시 replacement enabled[?]인 상태로 딥링크로 이동해야 함
6.4 manifest의 갱신
manifest URL을 사용하면 ua는 변경 여부를 주기적으로 확인하기도 한다. (HTTP cache 선언자에 따르거나 실행 이후의 업데이트를 확인) 변경 내용이 있다면 동일한 처리 방법으로 갱신한다.
변경사항이 없더라도 manifest에서 지정한 리소스가 변경됐는지를 주기적으로 확인할 수도 있다.
변경사항이 있으면 업데이트를 할 수도 있다.
7 manifest와 구성 요소
manifest는 웹 애플리케이션이 실행될 때 시작 파라미터와 기본값을 담고 있는 JSON 문서다.
7.1 name
웹 앱의 이름을 표시하는 문자열
meta element에서 application-name 속성과 동일하게 동작한다.
지정하지 않을 경우 application-name이나 title의 값으로 대신한다.
trim된 값을 사용함
7.2 short_name
웹 앱의 짧은 이름을 표시하는 문자열
공간이 부족할 때 사용
trim된 값을 사용
7.3 scope
application context에서 이동할 수 있는 범위를 나타내는 문자열
7.4 icon
icon 객체의 배열. 아이콘으로 표시되어야 하는 곳에서 다양하게 사용된다.
icon 객체는 src, type, sizes, density로 구성될 수 있다.
동일한 선언이 있는 경우 마지막에 선언된 것을 사용
7.5 display
display mode를 나타내는 문자열
값이 지정되지 않거나 잘못 지정되면 ua에서는 항상 대체 방안을 적용해야 한다.
7.6 orientation
기본 방향을 설정
any
natural
landscape
portrait
portrait-primary
portrait-secondary
landscape-primary
landscape-secondary
중에 선택 가능 (https://w3c.github.io/screen-orientation/#idl-def-OrientationLockType)
7.7 start_url
사용자가 처음 실행시켰을 때 ua에서 로드할 url 문자열
권고 사항임. 사용자가 북마크 하는 과정에서 변경될 수도 있음.
manifest 파일의 url의 상대 경로로 지정할 수 있음.
8. icon 객체와 구성 요소
ua에서 조건이 가장 잘 맞는 아이콘을 찾게 됨
rel 속성이 icon인 link 엘리먼트와 동일한 기능
8.1 icon 객체의 내용 보안 정책
아이콘 로드는 manifest를 참조하는 문서와 연관된 image-src 선언자에 의해 결정된다.
8.2 density
icon에 최적인 device pixel density
dot per px로 지정
0보다 큰 값
기본 값은 1.0
8.3 sizes
공백으로 구분되는 토큰의 집합으로 구성되는 문자열
토큰은 대소문자를 가리지 않으며
아이콘의 크기를 나타낸다.
값은 any나 양수로 표시하며 x(또는 X)로 구별한다.
실제 pixel값을 의미함
8.4 src
ua가 icon 데이터를 얻어올 수 있는 url
manifest의 url을 기준으로 값을 계산한다.
8.5 type
icon의 media type에 대한 힌트.
ua에서 지원하지 못하는 종류를 걸러내기 위한 것이 목적
기본 값은 없으나 ua에서는 image타입으로 예상해야 한다.
기타
manifest의 media type은 application/manifest+json