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

Pete LePage

Od czasu wprowadzenia banera „Dodaj do ekranu głównego” pracowaliśmy nad wyraźniejszym oznaczaniem progresywnych aplikacji internetowych i uproszczeniem sposobu ich instalowania przez użytkowników. Naszym ostatecznym celem jest udostępnienie przycisku instalacji w omniboksie na wszystkich platformach. W Chrome 68 wprowadzamy zmiany, które mają nam pomóc w jego osiągnięciu.

Co się zmienia?

Od Chrome 68 na Androidzie (stabilna wersja w lipcu 2018 r.) Chrome nie będzie już wyświetlać banera z prośbą o dodanie strony do ekranu głównego. Jeśli witryna spełnia kryteria dodawania do ekranu głównego, Chrome wyświetli mini-pasek informacyjny. Jeśli użytkownik kliknie mini-pasek informacyjny lub wywołasz zdarzenie prompt() w zdarzeniu beforeinstallprompt w ramach gestu użytkownika, Chrome wyświetli modalne okno dialogowe dodawania do ekranu głównego.

Baner A2HS Chrome 67 i starsze wersje

Wyświetlana automatycznie, gdy witryna spełnia kryteria dodawania do ekranu głównego, a witryna nie wywołuje funkcji preventDefault() w zdarzeniu beforeinstallprompt.

LUB

Wyświetlane przez wywołanie funkcji prompt() w zdarzeniu beforeinstallprompt.

Mini-infobar Chrome 68 i nowsze wersje

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

Jeśli użytkownik zamknie powiadomienie, nie będzie ono wyświetlane przez odpowiednio długi czas (ok. 3 miesiące).

Wyświetlane niezależnie od tego, czy w przypadku zdarzenia beforeinstallprompt wywołano funkcję preventDefault().

Ten interfejs zostanie usunięty w przyszłej wersji Chrome, gdy wprowadzimy przycisk instalacji w omniboksie.

A2HS Dialog

Wyświetlane 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 dotknie minipaska informacyjnego w Chrome 68 lub nowszej.

LUB

Wyświetla się po kliknięciu przez użytkownika opcji „Dodaj do ekranu głównego” w menu Chrome we wszystkich wersjach Chrome.

Mini pasek informacji

Mini-pasek informacyjny jest elementem interfejsu Chrome i nie można nim sterować z poziomu witryny, ale użytkownik może go łatwo zamknąć. Gdy użytkownik zamknie powiadomienie, nie pojawi się ono ponownie, dopóki nie upłynie odpowiedni czas (obecnie 3 miesiące). Mini-pasek informacji pojawi się, gdy witryna spełni kryteria dodawania do ekranu głównego, niezależnie od tego, czy klikniesz preventDefault() zdarzenie beforeinstallprompt, czy nie.

Zamiast wyświetlać prośbę o uprawnienia podczas wczytywania strony (co jest niezalecanym wzorcem w przypadku próśb o uprawnienia), możesz wskazać, że aplikację można zainstalować, używając interfejsu, który następnie wyświetli modalne okno z prośbą o instalację. Na przykład ta desktopowa aplikacja PWA dodaje przycisk „Zainstaluj aplikację” tuż nad nazwą profilu użytkownika.

Prośba o zainstalowanie aplikacji w odpowiedzi na działanie użytkownika jest mniej natarczywa i zwiększa prawdopodobieństwo, że kliknie on „Dodaj” zamiast „Anuluj”. Umieszczenie w aplikacji przycisku instalacji oznacza, że nawet jeśli użytkownik nie zdecyduje się na zainstalowanie aplikacji dzisiaj, przycisk będzie dostępny jutro lub w dowolnym innym momencie, gdy będzie gotowy na instalację.

Nasłuchiwanie zdarzenia beforeinstallprompt

Jeśli Twoja witryna spełnia kryteria dodawania 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 później odinstaluje aplikację, zdarzenie beforeinstallprompt będzie ponownie wywoływane przy każdej nawigacji po stronie.

Wyświetlanie okna z prompt()

Aby wyświetlić okno dialogowe dodawania do ekranu głównego, wywołaj prompt() w zapisanym wydarzeniu w ramach gestu 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. Obietnica zwraca obiekt z właściwością outcome po wyświetleniu promptu i udzieleniu przez użytkownika odpowiedzi.

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ć w przypadku odroczonego zdarzenia tylko raz. Jeśli użytkownik kliknie w oknie dialogowym przycisk anulowania, musisz poczekać, aż zdarzenie beforeinstallprompt zostanie uruchomione podczas następnej nawigacji po stronie. W przeciwieństwie do tradycyjnych próśb o uprawnienia kliknięcie przycisku anulowania nie zablokuje przyszłych wywołań funkcji prompt(), ponieważ musi ona być wywoływana w ramach działania użytkownika.

Dodatkowe materiały

Więcej informacji znajdziesz w artykule Banery instalacji aplikacji, w tym:

• Szczegóły beforeinstallprompt
• Śledzenie odpowiedzi użytkownika na prośbę o dodanie do ekranu głównego
• Śledzenie, czy aplikacja została zainstalowana
• Sprawdzanie, czy aplikacja działa jako zainstalowana