이 페이지는 Cloud Translation API를 통해 번역되었습니다.

리치 설치 UI를 추가하는 방법

Adriana Jara

앱 스토어는 개발자가 설치 전에 앱을 선보일 수 있는 공간으로, 사용자가 앱 설치를 선택하는 데 도움이 되는 스크린샷 및 텍스트 정보를 제공합니다. 더욱 풍부한 설치 UI는 웹 앱 개발자가 브라우저에서 직접 앱을 설치하도록 사용자를 초대할 수 있는 유사한 공간을 제공합니다. 이 향상된 UI는 Android 및 데스크톱 환경용 Chrome에서 사용할 수 있습니다.

기본 프롬프트

아래 예에서 충분한 컨텍스트를 제공하지 않는 기본 환경의 예를 참고하세요.

데스크톱용 브라우저 기본 설치 대화상자 — </ph> 데스크톱의 기본 설치 대화상자

모바일용 브라우저 기본 설치 대화상자 — </ph> 모바일의 기본 설치 대화상자

더욱 다양해진 설치 UI

일반적인 작은 기본 프롬프트 대신 더욱 풍부한 설치 UI 대화상자를 가져오려면 웹 매니페스트에 screenshots 및 description 필드를 추가하세요. 아래의 Squoosh.app 예를 확인해 보세요.

데스크톱 및 모바일의 풍부한 설치 UI — </ph> 데스크톱과 모바일의 풍부한 설치 UI

더욱 풍부한 설치 UI 대화상자는 웹 매니페스트에 있는 description 및 screenshots 필드의 콘텐츠로 구성됩니다.

대화상자를 트리거하려면 해당 폼 팩터의 스크린샷을 하나 이상 추가하면 되지만 설명도 추가하는 것이 좋습니다. 아래에서 해당 입력란에 대한 자세한 내용을 확인하세요.

스크린샷

스크린샷은 정말로 '풍부한' 느낌을 더해 줍니다. 새 설치 UI에 추가된 부분이므로 사용하는 것이 좋습니다. 매니페스트에서 screenshots 멤버를 추가합니다. 이 멤버는 하나 이상의 이미지가 필요한 배열을 가져와 Chrome에서 최대 8개를 표시합니다. 아래 예를 참고하세요.

 "screenshots": [
    {
     "src": "source/image1.png",
      "sizes": "640x320",
      "type": "image/png",
      "form_factor": "wide",
      "label": "Wonder Widgets"
    }
]

스크린샷은 다음 기준을 따라야 합니다.

너비 및 높이는 최소 320픽셀 이상, 최대 3,840픽셀이어야 합니다.
최대 크기는 최소 크기의 2.3배를 초과할 수 없습니다.
폼 팩터 값이 동일한 모든 스크린샷은 가로세로 비율이 동일해야 합니다.
JPEG 및 PNG 이미지 형식만 지원됩니다.
8개의 스크린샷만 표시됩니다. 더 많이 추가되면 사용자 에이전트는 해당 항목을 무시합니다.

또한 올바르게 렌더링되도록 이미지의 크기와 유형을 포함해야 합니다. 이 데모 보기

form_factor는 스크린샷이 데스크톱 (wide)에서 표시되어야 하는지 아니면 모바일 환경 (narrow)에 표시되어야 하는지를 브라우저에 나타냅니다.

설명

description 구성원은 설치 프롬프트에서 애플리케이션을 설명하여 사용자가 앱을 유지하도록 초대합니다.

description가 없어도 대화상자가 표시되지만 그렇게 하는 것이 좋습니다. 텍스트 7줄 (약 324자) 이후부터 시작되는 최대 길이이며, 더 긴 설명은 잘리고 생략 부호가 추가됩니다 (이 예 참고).

{
…
"description": "Compress and compare images with different codecs
right in your browser."
}

설명은 설치 프롬프트 상단에 표시됩니다.

스크린샷을 통해 설치 대화상자에 앱의 원본도 나열되어 있음을 알 수 있습니다. UI에 맞추기에 너무 긴 출처는 잘립니다. 이는 생략이라고도 하며 사용자를 보호하기 위한 보안 조치로 사용할 수 있습니다.

추가 자료

데모

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="dark light" />
    <link rel="manifest" href="manifest.json" />
    <title>How to add Richer Install UI to your web app</title>
    <!-- TODO: Devsite - Removed inline handlers -->
    <!-- <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
          navigator.serviceWorker.register('sw.js');
        });
      }
    </script>
    <script type="module" src="script.js"></script> -->
  </head>
  <body>
    <h1>How to add Richer Install UI to your web app</h1>
    <ol>
      <li>
        Install the app by clicking the button below. After the installation,
        the button is disabled.
        <p>
          <button disabled type="button">Install</button>
        </p>
      </li>
      <li>
        When you click on install a dialog similar to the ones from app stores
        will be displayed.
      </li>
      <li>
        The dialog includes the `description` and `screenshots` set in the app
        manifest.
      </li>
      <li>
        Screenshots should be different depending if the app is being installed
        on a mobile or desktop device, according to the `form_factor` value set
        for the screenshots on the manifest
      </li>
    </ol>
  </body>
</html>

JS


        // The install button.
const installButton = document.querySelector('button');

// Only relevant for browsers that support installation.
if ('BeforeInstallPromptEvent' in window) {
  // Variable to stash the `BeforeInstallPromptEvent`.
  let installEvent = null;

  // Function that will be run when the app is installed.
  const onInstall = () => {
    // Disable the install button.
    installButton.disabled = true;
    // No longer needed.
    installEvent = null;
  };

  window.addEventListener('beforeinstallprompt', (event) => {
    // Do not show the install prompt quite yet.
    event.preventDefault();
    // Stash the `BeforeInstallPromptEvent` for later.
    installEvent = event;
    // Enable the install button.
    installButton.disabled = false;
  });

  installButton.addEventListener('click', async () => {
    // If there is no stashed `BeforeInstallPromptEvent`, return.
    if (!installEvent) {
      return;
    }
    // Use the stashed `BeforeInstallPromptEvent` to prompt the user.
    installEvent.prompt();
    const result = await installEvent.userChoice;
    // If the user installs the app, run `onInstall()`.
    if (result.outcome === 'accepted') {
      onInstall();
    }
  });

  // The user can decide to ignore the install button
  // and just use the browser prompt directly. In this case
  // likewise run `onInstall()`.
  window.addEventListener('appinstalled', () => {
    onInstall();
  });
}