Search results for 'manifest'

Manifest for web application 요약

2015.02.14 15:39

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




nundefined HTML5_JS_CSS html5, manifest, w3c, Web Application

  1. iOS에서의 add to homescreen
    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW3

    android에서의 add to homescreen
    https://developer.chrome.com/multidevice/android/installtohomescreen

  2. android의 옛날 버전을 지원하기 위해
    <meta name="mobile-web-app-capable" content="yes">
    를 사용하면 주소창이 노출되지 않는 상태로 실행된다.

Google Hangouts manifest.json 정리

2013.08.06 01:30

개인적으로 크롬 확장 프로그램(또는 크롬 익스텐션)에 관심이 있는 편이다. 그래서 이전에 간단한 확장 프로그램을 만들어보기도 했고. 크롬 확장 프로그램을 실행시키기 위해 필요한 파일 중에 하나가 manifest.json인데 Google Hangouts의 manifest.json을 예제로 삼아 간단히 정리해봤다. Hangouts가 manifest.json의  모든 항목을 사용하는 것은 아니므로 manifest.json의 전체 내용을 파악하긴 어렵지만 시작점으로는 충분히 의미있으리라 생각한다.


{

   // background 페이지는 익스텐션의 프로세스를 실행한다.

   // extensions의 기본 lifecycle에 대한 이해가 필요함

   // html이 필요 없는 경우 'scripts'를 name으로 하고 javascript 파일의 배열을 value로 설정 가능

   // 브라우저가 빨리 시작되어야 하는 경우에는 permission에 background를 설정한다.

   "background": {

      "page": "background.html"

      // 여기에 persistent를 설정할 수 있는데 특별한 설정이 없다면 true로 설정된 것

   },


   // 브라우저 액션을 위한 설정. 툴바 우측에 아이콘이 생긴다.

   "browser_action": {

      "default_icon": {

         "19": "images_2/presence/offline_19.png",

         "38": "images_2/presence/offline_38.png"

      },

      // 아이콘에 마우스를 올렸을 때 나타나는 툴팁

      "default_title": "__MSG_CHROME_EXT_SHORT_NAME__"

   },


   // 웹페이지의 컨텍스트에서 실행되는 자바스크립트 파일

   // DOM을 사용하여 브라우저의 내용에 접근, 변경이 가능

   "content_scripts": [ {

      // 아래 matches로 선택한 페이지에서 모든 프레임에 삽입할지, top 프레임에만 삽입할지 여부

      "all_frames": true,

      // 대상 페이지에 삽입할 javascript. 배열에 표시된 순서대로 삽입됨

      "js": [ "scripts/ace-contentscript.js" ],

      // 필수. js를 삽입할 대상 페이지를 결정하는 규칙

      "matches": [ "*://*.google.com/mail/*" ],

      // js가 삽입될 때를 지정.

      // document_start: css 다음에 삽입

      // document_end: DOM이 완료되면 삽입. (DomContentLoaded)

      // document_idle: 기본값. document_end와 window.onload 이벤트 사이에서 브라우저가 적절히 삽입

      "run_at": "document_start"

   }, {

      "all_frames": true,

      // 조건에 맞는 URL은 대상에서 제외.

      "exclude_globs": [ "*prop=docs*" ],

      "js": [ "scripts/ace-contentscript.js" ],

      "matches": [ "*://*.google.com/talkgadget/notifierclient*" ],

      "run_at": "document_end"

   }, {

      "all_frames": true,

      "exclude_globs": [ "*prop=docs*" ],

      "js": [ "scripts/ace-contentscript.js" ],

      "matches": [ "*://*.google.com/talkgadget/_/chat*" ],

      "run_at": "document_end"

   }, {

      "all_frames": true,

      "exclude_globs": [ "*prop=docs*" ],

      "js": [ "scripts/ace-contentscript.js" ],

      "matches": [ "*://*.google.com/u/*/talkgadget/_/chat*" ],

      "run_at": "document_end"

   } ],


   // 기본 보안 제약

   // 1. eval 및 동일한 기능을 사용하여 문자열로 된 스크립트 실행 불가

   // 2. inline 스크립트 실행 불가

   // 3. local script와 객체 리소스만 로드 가능

   //

   // inline script 보안 해제: unsafe-inline

   // remote script/object 보안 해제: 필요한 origin 등록

   // eval 보안 해제: unsafe-eval

   "content_security_policy": "script-src 'self' https://*.google.com https://feedback.googleusercontent.com ; object-src 'self'",


   // _locales의 서브디렉토리를 지정한다. _locales 디렉토리가 있는 경우에는 필수

   // _locales 디렉토리가 없다면 빠져야 한다.

   "default_locale": "en",


   // 132자 이내의 설명. management ui와 스토어에 모두 노출됨

   "description": "__MSG_CHROME_EXT_DESCRIPTION__",


   // 아이콘

   // extensions의 경우 128x128과 48x48이 필수

   // 16x16의 경우 favicon용

   "icons": {

      "128": "images_2/icon-128x128.png",

      "48": "images_2/icon-48x48.png"

   },


   // 개발 과정에서 extension의 유일한 Id를 만들기 위해 사용.

   // crx로 패키징한 후 manifest.json 파일을 보면 확인 가능

   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDsDApubb73tPfYlNIFxDu3K3/EHgV6/YOJXJkld1OZ20jW/cOht1j0NggnXhQYuu1mXFUufud4I2N7b5ydyg09gcM9Va3Zk17RhNV9smbPHOd4XlzJeXifX/9MgHPu4FzCen3CiSXsOeAELJIXEuT28xICriuUko/rNPwGeIB9VwIDAQAB",


   // 항상 2

   "manifest_version": 2,


   // 최소 실행 가능한 크롬 버전

   "minimum_chrome_version": "26.0.0.0",


   // extension 이름. 45자 이하. install dialog, management ui, store에 노출

   // i18n을 사용하기 위해 아래와 같이 설정하고 프로그램에서 변경 가능

   "name": "__MSG_CHROME_EXT_SHORT_NAME__",


   // extension의 동작을 결정하는 옵션을 수정할 수 있는 페이지

   "options_page": "settingsdialog.html",


   // extensions에서 사용할 권한, API, 접근할 도메인 등등

   // 패턴: 접근 가능한 호스트. cross-origin XHR, cookie, 프로그램적으로 삽입되는 컨텐트 스크립트 등

   // background: 크롬이 빨리 뜨고 늦게 종료되도록하여 extension이 더 오래 살아있도록 함 (크롬 실행되지 않아도 extension 실행)

   // cookies: chrome.cookie 모듈 사용시

   // idle: chrome.idle 모듈 사용시

   // notifications: 권한 확인(checkPermission()) 없이 notification API 사용

   // tabs: chrome.tabs 또는 chrome.windows 모듈 사용시

   "permissions": [ "*://*.google.com/*", "*://*.orkut.com/*", "background", "cookies", "idle", "notifications", "tabs" ],


   // NPAPI plugins 설정

   "plugins": [ {

      // plugin 위치. manifest 파일로부터의 상대적 경로

      "path": "plugin/ace.dll",

      // 웹 페이지에서 접근 가능 여부

      // true: 일반 웹 페이지에서 로드 가능

      // false: extensions에서만 로드 가능

      "public": false

   }, {

      "path": "plugin/ace.bundle",

      "public": false

   }, {

      "path": "plugin/libace.so",

      "public": false

   } ],

   "requirements": {

      "plugins": {

         "npapi": false

      }

   },


   // 자동 업데이트를 위한 경로 설정

   "update_url": "https://clients2.google.com/service/update2/crx",


   // .으로 구분하는 4개의 숫자. 0 ~ 65535에서 사용. 0으로 시작할 수 없음.

   // 자동 업데이트시 이 숫자를 기준으로 삼는다.

   // 앞 자리의 숫자가 크면 뒷 자리의 숫자와 관계 없이 새로운 버전 (ex. 1.2.0 > 1.1.9.999)

   "version": "2013.717.433.1",


   // 웹에서 직접 접근 가능한 extensions의 리소스

   "web_accessible_resources": [ "*" ]

}


manifest.json 파일의 전체 내용을 알고 싶다면 크롬 개발자 사이트의 manifest 파일에 대한 페이지를 방문해보기 바란다.




nundefined ETC Chrome, chrome extensions, extensions, Google, google hangouts, hangouts, manifest, manifest.json, 구글, 크롬, 크롬 익스텐션, 크롬 확장 프로그램

  1. Blog Icon

    비밀댓글입니다