Odkąd po raz pierwszy udostępniliśmy baner z opcją dodania aplikacji do ekranu głównego, pracujemy nad tym, aby progresywne aplikacje internetowe były lepiej opisane i łatwiejsze do zainstalowania. Naszym ostatecznym celem jest udostępnienie przycisku instalacji w omniboksie na wszystkich platformach, dlatego w Chrome 68 wprowadzamy zmiany zmierzające do osiągnięcia tego celu.
Co się zmienia?
Począwszy od Chrome 68 na Androidzie (stabilna wersja z lipca 2018 r.) Chrome nie będzie już wyświetlać banera „Dodaj do ekranu głównego”. Jeśli witryna spełnia kryteria dodawania do ekranu głównego, Chrome wyświetli minipasek informacji. Jeśli użytkownik kliknie minipasek informacji lub wywoła funkcję prompt() w zdarzeniu beforeinstallprompt w ramach działania użytkownika, Chrome wyświetli okno modalne z prośbą o dodanie aplikacji do ekranu głównego.
Baner A2HS Chrome 67 i starsze wersje
Wyświetlane automatycznie, gdy witryna spełnia kryteria dodawania do ekranu głównego, a nie wywołuje zdarzenia preventDefault() w przypadku zdarzenia beforeinstallprompt.
LUB
Wyświetlany po wywołaniu funkcji prompt() w zdarzeniu beforeinstallprompt.
Minipasek informacji Chrome 68 i nowsze wersje
Jeśli użytkownik zamknie okno, nie będzie ono wyświetlane, dopóki nie upłynie odpowiedni czas (około 3 miesięcy).
Wyświetlany niezależnie od tego, czy metoda preventDefault() została wywołana w zdarzeniu beforeinstallprompt.
Ten element interfejsu zostanie usunięty w przyszłej wersji Chrome, gdy wprowadzimy przycisk instalacji w polu wyszukiwania.
Dialog A2HS
Wywoływane przez wywołanie prompt() w ramach gestu użytkownika w zdarzeniu beforeinstallprompt w Chrome 68 i nowszych wersjach.
LUB
Wyświetla się, gdy użytkownik kliknie minipasek informacji w Chrome 68 lub nowszej wersji.
LUB
Wyświetla się po kliknięciu przez użytkownika opcji „Dodaj do ekranu głównego” w menu Chrome we wszystkich wersjach Chrome.
Minipasek informacji
Minipasek informacji to element interfejsu Chrome, którego nie można kontrolować na stronie, ale użytkownik może go łatwo zamknąć. Gdy użytkownik zamknie okno, nie pojawi się ono ponownie, dopóki nie upłynie odpowiedni czas (obecnie 3 miesiące). Minipasek informacji pojawi się, gdy witryna spełnia kryteria dodawania do ekranu głównego, niezależnie od tego, czy preventDefault() w przypadku zdarzenia beforeinstallprompt.
Zamiast wyświetlać użytkownikowi prośbę o przyznanie uprawnień podczas wczytywania strony (w ramach wzorców zapobiegających prośbom o przyznanie uprawnień), możesz wskazać, że aplikację można zainstalować, używając interfejsu, który wyświetli prośbę o zainstalowanie. Na przykład ta PWA na komputer dodaje przycisk „Zainstaluj aplikację” tuż nad nazwą profilu użytkownika.
Prośba o zainstalowanie aplikacji po wykonaniu przez użytkownika określonego działania nie będzie dla niego wyglądać jak spam i zwiększy prawdopodobieństwo, że kliknie „Dodaj” zamiast „Anuluj”. Umieszczenie w aplikacji przycisku Zainstaluj oznacza, że nawet jeśli użytkownik zdecyduje się nie instalować aplikacji dzisiaj, przycisk będzie nadal dostępny jutro lub w dowolnym innym momencie, gdy będzie gotowy do jej zainstalowania.
Nasłuchuję zdarzenia beforeinstallprompt
Jeśli Twoja witryna spełnia kryteria dodawania aplikacji do ekranu głównego, Chrome wywoła zdarzenie beforeinstallprompt, zapisze odwołanie do tego zdarzenia i zaktualizuje interfejs użytkownika, aby wskazać, że użytkownik może dodać Twoją 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 zostanie wywołane, jeśli aplikacja jest już zainstalowana (patrz kryteria dodawania do ekranu głównego).
Jeśli jednak użytkownik odinstaluje aplikację, zdarzenie beforeinstallprompt zostanie ponownie wywołane po przejściu na każdą stronę.
Wyświetlanie okna z prompt()
Aby wyświetlić okno dodawania do ekranu głównego, wywołaj funkcję prompt() zapisanego wydarzenia w ramach działania użytkownika. Chrome wyświetli okno modalne z prośbą o dodanie aplikacji do ekranu głównego. Następnie odczytaj obietnicę zwróconą przez właściwość userChoice zdarzenia beforeinstallprompt. Obietnica zwraca obiekt z właściwością outcome po wyświetleniu promptu i odpowiedzi użytkownika na niego.
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;
});
});
Funkcję prompt() możesz wywołać tylko raz w związku z opóźnionym zdarzeniem. Jeśli użytkownik kliknie Anuluj w oknie dialogowym, musisz zaczekać, aż zdarzenie beforeinstallprompt zostanie uruchomione po przejściu na kolejną stronę. W przeciwieństwie do tradycyjnych próśb o udzielenie uprawnień kliknięcie anuluj nie spowoduje zablokowania przyszłych wywołań funkcji prompt(), ponieważ wywołanie tej funkcji musi być wywołane w ramach działania użytkownika.
Dodatkowe materiały
- Szczegóły dotyczące wydarzenia
beforeinstallprompt - Śledzenie odpowiedzi użytkownika na prośbę o dodanie do ekranu głównego
- Śledzenie, czy aplikacja została zainstalowana
- Sprawdzanie, czy aplikacja jest uruchomiona jako zainstalowana aplikacja