Web app manifests

Experimental: 이 기능은 실험적인 기능입니다.
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

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

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

구성요소

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

    예제

    json
    {
      "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> 요소를 사용해 연결합니다.

    html
    <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
    Web Application Manifest
    # shortcuts-member
    Web Share Target API
    # share_target-member
    Window Controls Overlay
    # addition-of-new-window-controls-overlay-display-mode
    Manifest Incubations
    # note_taking-member
    Web Application Manifest
    # short_name-member
    Web Application Manifest
    # dfn-fullscreen
    Web Application Manifest
    # dfn-standalone
    Manifest Incubations
    # url-member
    Web Application Manifest
    # scope-member
    Manifest Incubations
    # new_note_url-member
    Manifest Incubations
    # display_override-member
    Web Application Manifest
    # theme_color-member
    Web Application Manifest
    # dfn-minimal-ui
    Web Application Manifest
    # name-member
    Web App Manifest - Application Information
    # description-member
    Web Application Manifest
    # start_url-member
    Web Application Manifest
    # id-member
    Manifest Incubations
    # protocol_handlers-member
    Web App Launch Handler API
    # client_mode-member
    Manifest Incubations
    # file_handlers-member
    Web Application Manifest
    # related_applications-member
    Web Application Manifest
    # background_color-member
    Web Application Manifest
    # display-member
    Web Application Manifest
    # icons-member
    Manifest Incubations
    # protocol-member
    Web Application Manifest
    # dfn-browser
    Web Application Manifest
    # orientation-member
    Web Application Manifest
    # prefer_related_applications-member
    Web App Launch Handler API
    # launch_handler-member
    Manifest Incubations
    # dfn-tabbed

    브라우저 호환성

    Report problems with this compatibility data on GitHub
    desktopmobile
    Chrome
    Edge
    Firefox
    Opera
    Safari
    Chrome Android
    Firefox for Android
    Opera Android
    Safari on iOS
    Samsung Internet
    WebView Android
    WebView on iOS
    background_color
    description
    display
    display.browser
    display.fullscreen
    display.minimal-ui
    display.standalone
    display_override
    Experimental
    tabbed display mode
    Experimental
    window-controls-overlay display mode
    Experimental
    file_handlers
    Experimental
    icons
    id
    launch_handler
    Experimental
    launch_handler.client_mode
    Experimental
    name
    note_taking
    Experimental
    note_taking.new_note_url
    Experimental
    orientation
    prefer_related_applications
    Experimental
    protocol_handlers
    Experimental
    protocol_handlers.protocol
    Experimental
    protocol_handlers.url
    Experimental
    related_applications
    Experimental
    scope
    serviceworker
    ExperimentalNon-standard
    serviceworker.scope
    ExperimentalNon-standard
    serviceworker.src
    ExperimentalNon-standard
    serviceworker.use_cache
    ExperimentalNon-standard
    share_target
    Experimental
    short_name
    shortcuts
    start_url
    theme_color

    Legend

    Tip: you can click/tap on a cell for more information.

    Full support
    Full support
    Partial support
    Partial support
    No support
    No support
    Experimental. Expect behavior to change in the future.
    Non-standard. Check cross-browser support before using.
    See implementation notes.
    Has more compatibility info.

    같이 보기