Web app manifests

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

웹 앱 매니페스트(Web app manifest)는 프로그레시브 웹 앱(PWA)라고 칭하는 웹 기술 모음집의 일부로서, 앱 스토어를 거치지 않고 장치의 홈 화면에 설치할 수 있는 웹사이트를 구성합니다. 단순한 홈 화면 링크/북마크를 통한 일반적인 웹 앱과 달리, PWA는 사전 다운로드를 통해 오프라인에서도 동작하며 일반적인 Web API도 사용할 수 있습니다.

웹 앱 매니페스트는 웹 애플리케이션의 정보를 JSON 텍스트 파일로 제공하여, 웹 앱의 다운로드 및 네이티브 앱과 유사한 형태로 제공(홈 화면 설치를 통한 더 빠른 접근 및 풍부한 사용자 경험 제공)을 가능케 합니다. PWA 매니페스트는 자신의 이름, 저작자, 아이콘, 버전, 설명, 기타 필요한 리소스 등을 포함합니다.

구성요소

웹 앱 매니페스트는 다음의 키를 포함할 수 있습니다. 각각의 링크를 클릭해 더 많은 정보를 알아보세요.

예제

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}

웹 앱 매니페스트는 HTML 페이지 <head> 요소 내의 <link> 요소를 사용해 연결합니다.

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

참고: .webmanifest 확장자는 명세의 Media type registration 구획에 정의(매니페스트 파일의 응답은 Content-Type: application/manifest+json을 반환해야 함)되어 있습니다. 브라우저는 .json과 같은 기타 적절한 확장자도 지원합니다. (Content-Type: application/json).

참고: 매니페스트를 가져오려면 인증 정보가 필요한 경우, 매니페스트 파일이 현재 페이지와 동일한 출처에 위치하더라도 반드시 crossorigin 특성을 use-credentials로 지정해야 합니다.

스플래시 화면

Chrome 47 이후 버전에서는, 홈 화면에서 실행한 사이트가 스플래시 화면을 사용합니다. 스플래시 화면은 웹 앱 매니페스트의 다음 속성을 사용해 자동으로 생성합니다.

명세

Specification Status Comment
Web App Manifest Working Draft Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
background_color
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support 46
Notes
Full support 46
Notes
Notes Does not support lang or scope.
Chrome Android Full support 46
Notes
Full support 46
Notes
Notes Does not support lang or scope.
Firefox Android ? Opera Android Full support YesSafari iOS ? Samsung Internet Android Full support 5.0
Notes
Full support 5.0
Notes
Notes Does not support lang or scope.
categories
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
description
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
dir
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
display
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 47Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
iarc_rating_id
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
icons
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes By default, used for as the source for "Add to home screen" (see bug 1234558).
Disabled From version 53: this feature is behind the manifest.install.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
lang
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
name
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes By default, used for as the source for "Add to home screen" (see bug 1234558).
Disabled From version 53: this feature is behind the manifest.install.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
orientation
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
prefer_related_applications
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
related_applications
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
scope
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
screenshots
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
serviceworker
ExperimentalDeprecatedNon-standard
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
short_name
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes By default, used for as the source for "Add to home screen" (see bug 1234558).
Disabled From version 53: this feature is behind the manifest.install.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
start_url
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
theme_color
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 53
Notes Disabled
Full support 53
Notes Disabled
Notes By default, used for as the source for "Add to home screen" (see bug 1234558).
Disabled From version 53: this feature is behind the manifest.install.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

같이 보기