대다수의 브라우저에서는 웹 브라우저 설치 시 프로그레시브 웹 앱 (PWA)을 바로 사용할 수 있습니다. 설치 (이전 명칭: '홈 화면에 추가')를 통해 사용자는 PWA에 관해 자세히 알아보세요. PWA를 설치하면 사용자의 다른 설치된 앱처럼 실행할 수 있습니다.
브라우저에서 제공하는 설치 환경 외에도 앱 내에서 직접 맞춤 설치 흐름을 제공할 수 있습니다.
<ph type="x-smartling-placeholder">![Spotify PWA에 제공된 앱 설치 버튼](https://web.developers.google.cn/static/articles/customize-install/image/install-app-button-provid-c69a76f7a7ce5.png?authuser=19&hl=ko)
설치 홍보 여부를 결정할 때는 사용자가 일반적으로
PWA를 사용하세요. 예를 들어 PWA를 여러 개 사용하는 사용자 집합이 있는 경우
이러한 사용자들은
휴대전화 홈 화면이나 데스크톱의 시작 메뉴에서 앱 실행
실행할 수 있습니다 또한 일부 생산성 및 엔터테인먼트 애플리케이션은
브라우저 툴바를 제거하면 생성된 여분의 화면 공간이
설치된 standalone
또는 minimal-ui
모드의 창
기본 요건
시작하기 전에 PWA가 설치 가능 요구사항. 일반적으로 웹 앱 매니페스트를 포함해야 합니다
설치 홍보하기
프로그레시브 웹 앱이 설치 가능하다는 것을 표시하고 맞춤 인앱 설치 흐름:
beforeinstallprompt
이벤트를 수신합니다.- 설치 흐름을 트리거할 수 있도록
beforeinstallprompt
이벤트를 저장합니다. 확인할 수 있습니다 - 사용자에게 PWA를 설치할 수 있다고 알리고 요소를 사용하여 인앱 설치 흐름을 시작합니다.
beforeinstallprompt
이벤트 수신 대기
프로그레시브 웹 앱이 필수 설치 기준을 충족하는 경우
브라우저가 beforeinstallprompt
이벤트를 실행합니다. 이벤트에 대한 참조를 저장합니다.
사용자가 PWA를 설치할 수 있음을 나타내도록 사용자 인터페이스를 업데이트합니다.
// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can install the PWA
showInstallPromotion();
// Optionally, send analytics event that PWA install promo was shown.
console.log(`'beforeinstallprompt' event was fired.`);
});
인앱 설치 흐름
인앱 설치를 제공하려면 버튼이나 기타 인터페이스 요소를 제공하세요.
사용자가 클릭하거나 탭하여 앱을 설치할 수 있습니다. 요소를 클릭하거나
누른 경우 저장된 beforeinstallprompt
이벤트에서 prompt()
호출(
deferredPrompt
변수). 사용자에게 다음과 같은 모달 설치 대화상자를 표시합니다.
PWA를 설치할 것인지 확인합니다.
buttonInstall.addEventListener('click', async () => {
// Hide the app provided install promotion
hideInstallPromotion();
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice;
// Optionally, send analytics event with outcome of user choice
console.log(`User response to the install prompt: ${outcome}`);
// We've used the prompt and can't use it again, throw it away
deferredPrompt = null;
});
userChoice
속성은 사용자의 선택으로 확인되는 프로미스입니다.
지연된 이벤트에서는 prompt()
를 한 번만 호출할 수 있습니다. 사용자가
beforeinstallprompt
이벤트가 실행될 때까지 기다려야 합니다.
다시 실행되며 일반적으로 userChoice
속성 직후
문제가 해결되었습니다.
PWA가 성공적으로 설치된 시점을 감지합니다.
userChoice
속성을 사용하여 사용자가
앱에 직접 액세스할 수 있습니다. 하지만 사용자가 PWA를 설치하는 경우
주소 표시줄이나 다른 브라우저 구성요소에서 userChoice
을 사용해도 도움이 되지 않습니다.
대신 매번 실행되는 appinstalled
이벤트를 수신 대기해야 합니다.
PWA를 설치하는 데 어떤 메커니즘이 사용되든 관계없이 설치됩니다.
window.addEventListener('appinstalled', () => {
// Hide the app-provided install promotion
hideInstallPromotion();
// Clear the deferredPrompt so it can be garbage collected
deferredPrompt = null;
// Optionally, send analytics event to indicate successful install
console.log('PWA was installed');
});
PWA가 실행된 방법 감지
CSS display-mode
미디어 쿼리는 다음 중 하나에서 PWA가 실행된 방식을 나타냅니다.
PWA로 표시할 수 있습니다. 따라서 여러 가지 다양한
앱 실행 방식에 따라 스타일이 다릅니다. 예를 들어
를 사용하여 설치 버튼을 항상 숨기고 앱으로 시작할 때 뒤로 버튼을 제공합니다.
PWA를 설치해야 합니다.
PWA가 실행된 방법 추적하기
사용자가 PWA를 실행하는 방법을 추적하려면 matchMedia()
를 사용하여
display-mode
미디어 쿼리 iOS의 Safari는 아직 이 기능을 지원하지 않으므로
대신 navigator.standalone
를 선택하세요. 이 함수는
브라우저가 독립형 모드로 실행 중인지 확인합니다.
function getPWADisplayMode() {
const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
if (document.referrer.startsWith('android-app://')) {
return 'twa';
} else if (navigator.standalone || isStandalone) {
return 'standalone';
}
return 'browser';
}
디스플레이 모드 변경 시점 추적
사용자가 standalone
와 browser tab
간에 변경하는지 추적하려면 다음을 수신 대기합니다.
display-mode
미디어 쿼리 관련 변경사항입니다.
window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
let displayMode = 'browser';
if (evt.matches) {
displayMode = 'standalone';
}
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', displayMode);
});
현재 디스플레이 모드에 따라 UI 업데이트
설치된 앱으로 실행될 때 PWA에 다른 배경 색상을 적용하는 방법 PWA에서는 조건부 CSS를 사용합니다.
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
앱의 아이콘 및 이름 업데이트
앱 이름을 업데이트하거나 새 아이콘을 제공해야 하면 어떻게 해야 하나요? Chrome에서 웹 앱 매니페스트 업데이트를 처리하는 방법을 확인하세요. 변경사항이 언제 어떻게 Chrome에 반영되는지 확인할 수 있습니다.