Natywny komunikat o instalacji aplikacji

Prompty natywne instalacji aplikacji pozwalają użytkownikom szybko i płynnie zainstalować Twoją aplikację natywną na urządzeniu bezpośrednio ze sklepu z aplikacjami, bez opuszczania przeglądarki i bez wyświetlania irytujących reklam pełnoekranowych.

Jakie są kryteria?

Aby można było wyświetlić użytkownikowi prośbę o instalację aplikacji natywnej, witryna musi spełniać te kryteria:

Zdarzenie beforeinstallprompt zostanie uruchomione, gdy spełnisz te kryteria. Możesz go użyć, aby poprosić użytkownika o zainstalowanie natywnej aplikacji.

Wymagane właściwości pliku manifestu

Aby poprosić użytkownika o zainstalowanie aplikacji natywnej, musisz dodać do pliku manifestu aplikacji internetowej 2 właściwości: prefer_related_applications i related_applications.

"prefer_related_applications": true,
"related_applications": [
    {
    "platform": "play",
    "id": "com.google.samples.apps.iosched"
    }
]

Właściwość prefer_related_applications informuje przeglądarkę, że ma wyświetlić użytkownikowi aplikację natywną, a nie aplikację internetową. Jeśli nie skonfigurujesz tej wartości (czyli false), przeglądarka poprosi użytkownika o zainstalowanie aplikacji internetowej.

related_applications to tablica z listą obiektów, które informują przeglądarkę o Twojej preferowanej aplikacji natywnej. Każdy obiekt musi zawierać właściwość platform i właściwość id. Gdzie platform to play a id to identyfikator aplikacji w Sklepie Play.

Wyświetlanie prośby o instalację

Aby wyświetlić okno instalacji, wykonaj te czynności:

  1. Nasłuchuj zdarzenia beforeinstallprompt.
  2. Poinformuj użytkownika, że natywną aplikację można zainstalować za pomocą przycisku lub innego elementu, który wygeneruje zdarzenie gestu użytkownika.
  3. Wyświetl prompt, wywołując funkcję prompt() w zapisanym zdarzeniu beforeinstallprompt.

Posłuchaj: beforeinstallprompt

Jeśli kryteria zostaną spełnione, Chrome wywoła zdarzenie beforeinstallprompt. Możesz go użyć, aby wskazać, że aplikacja może zostać zainstalowana, a potem poprosić użytkownika o jej zainstalowanie.

Gdy zdarzenie beforeinstallprompt zostanie wywołane, zapisz odwołanie do tego zdarzenia i zaktualizuj interfejs użytkownika, aby wskazać, że użytkownik może zainstalować Twoją aplikację.

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

Powiadamianie użytkownika, że można zainstalować Twoją aplikację

Najlepszym sposobem na poinformowanie użytkownika o możliwości zainstalowania aplikacji jest dodanie przycisku lub innego elementu do interfejsu. Nie wyświetlaj reklam pełnoekranowych ani innych elementów, które mogą być uciążliwe lub rozpraszające.

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});

Wyświetlanie promptu

Aby wyświetlić prośbę o instalację, w zapisanym zdarzeniu wywołaj prompt() za pomocą gestu użytkownika. Wyświetli się okno modalne z prośbą o dodanie aplikacji do ekranu głównego.

Następnie posłuchaj obietnicy zwróconej przez właściwość userChoice. Obietnica zwraca obiekt z właściwością outcome po wyświetleniu promptu i odpowiedzi użytkownika.

btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});

W zdarzeniu odroczonym możesz wywołać funkcję prompt() tylko raz. Jeśli użytkownik zamknie okno, musisz zaczekać, aż zdarzenie beforeinstallprompt zostanie wyzwolone po przejściu na następną stronę.

Ważne uwagi dotyczące korzystania z zasady Content Security Policy

Jeśli Twoja witryna ma restrykcyjne zasady bezpieczeństwa treści, dodaj *.googleusercontent.com do dyrektywy img-src, aby Chrome mógł pobrać ikonę powiązaną z Twoją aplikacją ze Sklepu Play.

W niektórych przypadkach *.googleusercontent.com może być bardziej rozbudowany niż pożądane. Możesz zawęzić tę kategorię przez zdalne debugowanie urządzenia z Androidem, aby określić URL ikony aplikacji.