새 HTML 설치 요소로 웹 앱 설치

Patrick Brosset
Patrick Brosset
홈페이지

게시일: 2026년 5월 12일

웹 앱을 설치하려면 항상 JavaScript가 필요했습니다. beforeinstallprompt 이벤트를 사용하면 설치 흐름이 스크립트에 완전히 포함됩니다. 새로운 <install> 요소는 이를 변경합니다. 단일 HTML 요소를 페이지에 삭제하면 브라우저에서 JavaScript가 필요 없는 신뢰할 수 있는 설치 버튼을 렌더링합니다.

이미지

Microsoft Edge팀은 Chrome팀과 협력하여 Chromium에 <install> 요소를 구현했습니다. 이제 Chrome 또는 Edge 버전 148부터 플래그 뒤에서 테스트할 수 있으며, 148부터 153까지 두 브라우저에서 사용할 수 있는 오리진 트라이얼 로도 테스트할 수 있습니다.

사용해 보고 자체 오리진 트라이얼이 있는 명령형 웹 설치 API (navigator.install())와 어떻게 비교되는지 알아보세요.

문제

웹 앱 설치가 단편화되어 있습니다. 모든 브라우저에는 주소 표시줄 아이콘, 메뉴 항목, 프롬프트와 같은 자체 진입점이 있습니다. 개발자는 설치 흐름이 표시되는 시점과 방법을 제한적으로 제어할 수 있습니다.

설치가 이전에는 현재 페이지로 제한되었기 때문에 사용자가 사이트에서 다른 앱을 설치할 수 있는 앱 스토어와 같은 환경을 빌드하기가 더 어렵습니다.

<install> 요소

새로운 <install> HTML 요소의 콘텐츠와 프레젠테이션은 브라우저에서 제어합니다. <geolocation>과 같은 다른 권한 요소와 마찬가지로 브라우저가 버튼의 라벨 텍스트, 언어, 모양을 제어하므로 사용자의 클릭을 진정한 의도 신호로 신뢰할 수 있습니다.

'멋진 애플리케이션 설치'라는 라벨이 지정된 버튼을 클릭하는 사용자는 설치 프롬프트가 표시되어도 놀라지 않을 것입니다.

브라우저에서 버튼을 렌더링하므로 최소한의 코드로 신뢰할 수 있는 설치 어포던스를 얻을 수 있으며 JavaScript에서 beforeinstallprompt 절차를 오케스트레이션할 필요가 없습니다.

현재 앱 설치

현재 페이지가 id 필드가 있는 매니페스트에 연결되는 경우 단일 요소만 있으면 됩니다.

<install></install>

브라우저에서 표준화된 텍스트와 아이콘으로 버튼을 렌더링하고 사용자가 버튼을 클릭하면 브라우저의 일반적인 설치 흐름이 시작됩니다.

다른 앱 설치

현재 페이지와 다른 오리진에 있는 웹 앱을 설치하려면 installurl 속성을 사용하여 다른 웹 앱을 가리킵니다.

<install installurl="https://awesome-app.com/"></install>

https://awesome-app.com의 페이지가 필드를 정의하는 매니페스트에 연결되는 경우 이 작업만 하면 됩니다.id

`id` 필드가 없는 경우 `manifestid` 속성을 사용하여 계산된 매니페스트 `id`를 제공합니다.

<install installurl="https://awesome-app.com/"
  manifestid="https://awesome-app.com/?source=pwa">
</install>

계산된 매니페스트 id를 가져오려면 다음 단계를 따르세요.

  1. DevTools를 엽니다.
  2. 애플리케이션 탭으로 이동합니다.
  3. ID 섹션에서 계산된 앱 ID 값을 복사합니다.

<install> 버튼을 사용하여 다른 오리진 앱을 설치하면 사용자에게 여러 앱을 설치할 수 있는 카탈로그 페이지를 빌드할 수 있으며 각 앱에는 자체 <install> 버튼이 있습니다.

대체 콘텐츠 제공

브라우저에서 <install> 요소를 지원하지 않으면 요소 내에 배치한 HTML이 표시됩니다.

<install installurl="https://awesome-app.com/">
  <a href="https://awesome-app.com/">Launch Awesome App</a>
</install>

지원 감지

대체 콘텐츠가 사용 사례에 충분하지 않고 요소를 지원하지 않는 브라우저에서 다른 사용자 환경을 구현하려는 경우 JavaScript를 사용하여 지원을 감지합니다.<install>

if ('HTMLInstallElement' in window) {
  // The <install> element is supported.
}

이벤트 처리

<install> 요소는 성공, 해제, 유효성 검사 오류를 수신 대기할 수 있는 이벤트를 발생시킵니다.

const button = document.querySelector('install');

button.addEventListener('promptaction', () => {
  console.log('Installation succeeded');
});

button.addEventListener('promptdismiss', () => {
  console.log('User dismissed the install prompt');
});

button.addEventListener('validationstatuschanged', (e) => {
  if (e.target.invalidReason === 'install_data_invalid') {
    console.error('Invalid install data:', e.target.invalidReason);
  }
});

지금 사용해 보기

오늘 <install> 요소를 사용해 보려면 다음 두 가지 옵션이 있습니다.

  • 기기에서만 요소를 로컬로 테스트합니다.
  • 오리진 트라이얼에 등록하여 사용자와 함께 실제 조건에서 요소를 테스트합니다.

로컬에서 테스트

오늘 자체 기기에서 요소를 테스트하려면 다음 단계를 따르세요.

  1. Chrome 또는 Edge 버전 148 이상을 사용합니다.
  2. 새 탭에서 about://flags/#web-app-install-element로 이동합니다.
  3. 웹 앱 설치 요소 를 사용 설정됨 으로 설정합니다.
  4. 브라우저를 다시 시작합니다.

오리진 트라이얼을 사용하여 라이브 사이트에서 테스트

오리진 트라이얼을 사용하면 프로덕션 사이트의 실제 사용자가 먼저 플래그를 사용 설정하지 않고도 이 기능을 사용할 수 있습니다.

  1. <install> 요소 오리진 트라이얼 등록 페이지를 엽니다.
  2. 로그인합니다.
  3. 등록 을 클릭합니다.
  4. 사이트의 오리진을 입력하고 양식의 나머지 부분을 작성합니다.
  5. 양식이 제출되면 토큰 문자열이 표시됩니다.
  6. <meta> 태그를 사용하여 토큰을 사이트의 페이지에 추가합니다.
<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">

또는 토큰을 HTTP 응답 헤더로 전송할 수도 있습니다.

Origin-Trial: YOUR_TOKEN_HERE

오리진 트라이얼은 버전 148~153의 Chrome 및 Edge에서 사용할 수 있으며 동일한 토큰이 두 브라우저에서 모두 작동합니다. 오리진 트라이얼에 대해 자세히 알아보려면 다음을 참고하세요.

실제 사례 보기

여러 샘플 앱을 설치할 수 있도록 <install> 요소를 사용하는 PWA 카탈로그인 <install> 요소 스토어 데모를 확인하세요.

웹 설치 API와 비교

<install> 요소는 웹에서 앱 설치를 개선하는 방법을 실험하는 유일한 방법이 아닙니다.

이전에는 사이트에서 동일한 오리진 또는 교차 오리진 웹 앱의 설치를 트리거할 수 있는 명령형 JavaScript API인 웹 설치 API (navigator.install())를 실험했습니다. 자세한 내용은 The Web Install API is ready for testing를 참고하세요.

웹 설치 API에도 자체 오리진 트라이얼이 있습니다.

두 접근 방식을 비교하는 방법은 다음과 같습니다.

요소 navigator.install() API
접근 방법 선언적 HTML 명령형 JavaScript
필요한 코드 단일 HTML 요소 navigator.install()을 호출하고 반환된 프로미스를 처리하는 JavaScript
브라우저 신뢰 높음: 브라우저에서 권한 요소와 마찬가지로 버튼의 콘텐츠와 모양을 제어합니다. 낮음: 신뢰 신호로 사용자 활성화 (클릭, 탭)가 필요합니다.
교차 오리진 설치 예, installurl 사용 예, URL을 navigator.install()에 전달하여
맞춤설정 최소: 브라우저에서 버튼의 모양을 결정합니다. 전체: 자체 UI를 디자인하고 상호작용에서 API를 호출합니다.
Fallback 기본 제공: 요소가 지원되지 않으면 하위 콘텐츠가 렌더링됩니다. 자체 기능 감지 및 대체 로직을 작성합니다.
권장 최소한의 코드가 포함된 드롭인 설치 버튼, 브라우저에서 신뢰할 수 있는 UI가 바람직한 시나리오 맞춤 설치 흐름, 동적 카탈로그 UI, 기존 JavaScript가 많은 인터페이스에 통합

여러분의 의견을 공유해 주세요

두 접근 방식 모두에 관한 의견을 적극적으로 받고 있습니다. 필요에 따라 <install> 요소 또는 navigator.install() API 또는 둘 다에 대한 지원을 추가할 수 있습니다.

<install> 요소에 관한 의견을 공유하려면 이 제안 전용 WICG 저장소에서 문제를 여세요.

navigator.install() API에 관한 의견을 공유하려면 개발자 의견: navigator.install 대 <install> 요소 문제에 댓글을 추가하세요.

리소스