Zmiany w działaniu dodawania do ekranu głównego

Pete LePage

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. W Chrome 68 wprowadzamy zmiany, które nas do tego przybliżą.

Co się zmienia?

Począwszy od Chrome 68 na Androidzie (stabilna wersja z lipca 2018 r.) baner „Dodaj do ekranu głównego” nie będzie już wyświetlany. 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

Wyświetlane, gdy witryna spełnia kryteria dodawania do ekranu głównego

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 zamiast „Anuluj” kliknie „Dodaj”. Umieszczenie w aplikacji przycisku Zainstaluj oznacza, że nawet jeśli użytkownik nie zdecyduje się na zainstalowanie 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 reakcji 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 przez użytkownika.

Dodatkowe materiały

Aby dowiedzieć się więcej, np. o banerach z prośbą o instalację aplikacji, zapoznaj się z artykułem:

• 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