Odkąd po raz pierwszy wprowadziliśmy baner dodawania do ekranu głównego, pracujemy nad wyraźniejszym oznaczaniem progresywnych aplikacji internetowych i uproszczeniem ich instalowania. Docelowo chcemy umieścić przycisk instalacji w omniboksie na wszystkich platformach, a w Chrome 68 wprowadzamy zmiany.
Co się zmienia?
Od wersji Chrome 68 na urządzeniach z Androidem (wersja stabilna w lipcu 2018 r.) w Chrome nie będzie już
baner dodawania do ekranu głównego. Jeśli witryna spełnia kryteria dodawania do ekranu głównego, Chrome wyświetli minipasek informacyjny. Jeśli użytkownik kliknie minipasek informacyjny lub wywołasz metodę prompt() w zdarzeniu beforeinstallprompt gestem użytkownika, Chrome wyświetli modalne okno dialogowe dodawania do ekranu głównego.
Baner A2HS Chrome 67 i starsze wersje
Wyświetla się automatycznie, gdy witryna spełnia kryteria dodawania do ekranu głównego, a witryna nie wywołuje metody preventDefault() w zdarzeniu beforeinstallprompt.
LUB
Wyświetlane przez wywołanie prompt() w zdarzeniu beforeinstallprompt.
Mini-infobar Chrome 68 i nowsze
Jeśli reklama zostanie odrzucona przez użytkownika, nie wyświetli się, dopóki nie minie odpowiedni czas (ok. 3 miesiące).
Pokazywane niezależnie od tego, czy funkcja preventDefault() została wywołana w zdarzeniu beforeinstallprompt.
Ten interfejs zostanie usunięty w przyszłej wersji Chrome po wprowadzeniu przycisku instalacji w omniboksie.
Okno A2HS
Wyświetlane przez wywołanie funkcji prompt() gestem użytkownika w zdarzeniu beforeinstallprompt w Chrome 68 i nowszych wersjach.
LUB
Wyświetlane, gdy użytkownik kliknie minipasek informacyjny w Chrome 68 i nowszych wersjach.
LUB
Wyświetlane, gdy użytkownik kliknie „Dodaj do ekranu głównego” w menu Chrome we wszystkich wersjach Chrome.
Minipasek informacyjny
Minipasek informacyjny to element interfejsu Chrome. Witryna nie może go kontrolować, ale użytkownik może go łatwo zamknąć. Po zamknięciu przez użytkownika strona nie pojawi się ponownie, dopóki nie upłynie odpowiednio dużo czasu (obecnie po 3 miesiącach). Minipasek informacyjny pojawi się, gdy strona spełnia kryteria dodawania do ekranu głównego, niezależnie od tego, czy preventDefault() w wydarzeniu beforeinstallprompt
czy nie.
Zamiast pytać użytkownika przy wczytywaniu strony (antywzorzec dla próśb o przyznanie uprawnień), możesz wskazać, że aplikację można zainstalować za pomocą interfejsu. Dzięki temu wyświetli się modalna prośba o zainstalowanie aplikacji. Na przykład taka aplikacja PWA na komputerze dodaje przycisk „Zainstaluj aplikację” tuż nad nazwą profilu użytkownika.
Wysyłanie próśb o zainstalowanie aplikacji po wykonaniu gestu użytkownika oznacza, że użytkownik nie ma spamu, a zwiększa prawdopodobieństwo, że kliknie „Dodaj” zamiast „Anuluj”. Jeśli umieścisz w aplikacji przycisk Zainstaluj, przycisk pojawi się w aplikacji nawet wtedy, gdy użytkownik nie zdecyduje się na jej instalację dzisiaj, jutro lub po jej zakończeniu.
Nasłuchuję zdarzenia beforeinstallprompt
Jeśli Twoja witryna spełnia kryteria dodawania do ekranu głównego, Chrome uruchomi zdarzenie beforeinstallprompt, zapisze odniesienie do tego zdarzenia i zaktualizuje interfejs użytkownika, aby wskazać, że użytkownik może dodać aplikację do ekranu głównego.
let installPromptEvent;
window.addEventListener('beforeinstallprompt', event => {
// Prevent Chrome <= 67 from automatically showing the prompt
event.preventDefault();
// Stash the event so it can be triggered later.
installPromptEvent = event;
// Update the install UI to notify the user app can be installed
document.querySelector('#install-button').disabled = false;
});
Zdarzenie beforeinstallprompt nie będzie uruchamiane, jeśli aplikacja jest już zainstalowana (patrz kryteria dodawania do ekranu głównego).
Jeśli jednak użytkownik później odinstaluje aplikację, zdarzenie beforeinstallprompt będzie ponownie wywoływane przy każdej zmianie nawigacji na stronie.
Wyświetlam okno z: prompt()
Aby wyświetlić okno dodawania do ekranu głównego, wywołaj w zapisanym zdarzeniu polecenie prompt(), wykonując gest użytkownika. Chrome wyświetli okno modalne z prośbą o dodanie aplikacji do ekranu głównego. Następnie nasłuchuj obietnicy zwróconej przez właściwość userChoice zdarzenia beforeinstallprompt. Gdy prośba się wyświetli i użytkownik odpowie na nie, obiekt obiecujący zwraca obiekt z właściwością outcome.
btnInstall.addEventListener('click', () => {
// Update the install UI to remove the install button
document.querySelector('#install-button').disabled = true;
// Show the modal add to home screen dialog
installPromptEvent.prompt();
// Wait for the user to respond to the prompt
installPromptEvent.userChoice.then(choice => {
if (choice.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
// Clear the saved prompt since it can't be used again
installPromptEvent = null;
});
});
W zdarzeniu odroczonym możesz wywołać metodę prompt() tylko raz. Jeśli użytkownik kliknie w oknie Anuluj, musisz poczekać, aż zdarzenie beforeinstallprompt uruchomi się podczas następnej nawigacji na stronie. W przeciwieństwie do standardowych próśb o uprawnienia kliknięcie „Anuluj” nie będzie blokować przyszłych wywołań funkcji prompt(), ponieważ musi je wywoływać gestem użytkownika.
Dodatkowe materiały
Banery zachęcające do zainstalowania aplikacji – więcej informacji, m.in.:
- Szczegóły wydarzenia
beforeinstallprompt - Śledzenie reakcji użytkownika na prośbę o dodanie ekranu głównego
- Śledzenie, czy aplikacja została zainstalowana
- Określanie, czy aplikacja działa jako aplikacja zainstalowana