Natywny komunikat o instalacji aplikacji

Komunikat o instalacji natywnej aplikacji pozwala użytkownikom szybko i bezproblemowo zainstalować na ich urządzeniach aplikację natywną bezpośrednio ze sklepu z aplikacjami, bez opuszczania przeglądarki i bez irytujących reklam pełnoekranowych.

Jakie są kryteria?

Aby można było wyświetlać użytkownikowi natywną prośbę o zainstalowanie aplikacji, Twoja witryna musi spełniać te kryteria:

Zdarzenie beforeinstallprompt zostanie uruchomione, gdy spełnisz te kryteria. Dzięki niemu możesz zachęcić użytkownika do zainstalowania aplikacji natywnej.

Wymagane właściwości pliku manifestu

Aby zachęcić użytkownika do zainstalowania aplikacji natywnej, musisz dodać do pliku manifestu aplikacji internetowej 2 usługi: 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 zamiast aplikacji internetowej wyświetli użytkownikowi prośbę o wyświetlenie aplikacji natywnej. Jeśli nie skonfigurujesz tej wartości (lub false), przeglądarka poprosi użytkownika o zainstalowanie aplikacji internetowej.

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

Pokaż prośbę o instalację

Aby wyświetlić okno instalacji, musisz:

  1. Wykrywa zdarzenie beforeinstallprompt.
  2. Powiadom użytkownika, że Twoja aplikacja natywna może zostać zainstalowana za pomocą przycisku lub innego elementu generującego zdarzenie gestu użytkownika.
  3. Aby wyświetlić potwierdzenie, wywołaj funkcję prompt() w zapisanym zdarzeniu beforeinstallprompt.

Posłuchaj: beforeinstallprompt

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

Po wywołaniu zdarzenia beforeinstallprompt zapisz do niego odniesienie i zaktualizuj interfejs, 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;
});

Powiadamiaj użytkownika o możliwości zainstalowania aplikacji

Najlepszym sposobem powiadomienia użytkownika o możliwości zainstalowania aplikacji jest dodanie przycisku lub innego elementu do interfejsu. Nie pokazuj reklamy pełnoekranowej ani innych elementów, które mogą być irytujące 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świetl prompt

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

Następnie poczekaj na obietnicę zwracaną przez właściwość userChoice. Obietnica zwraca obiekt z właściwością outcome po pokazaniu promptu i uzyskaniu odpowiedzi od 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ć tylko jedno wywołanie prompt(). Jeśli użytkownik ją odrzuci, musisz poczekać, aż zdarzenie beforeinstallprompt uruchomi się podczas następnej nawigacji na stronie.

Specjalne uwagi dotyczące korzystania z zasad Content Security Policy

Jeśli w Twojej witrynie obowiązuje restrykcyjna polityka bezpieczeństwa treści, pamiętaj, aby dodać do dyrektywy img-src *.googleusercontent.com, aby umożliwić Chrome pobranie ikony powiązanej z aplikacją ze Sklepu Play.

W niektórych przypadkach wartość *.googleusercontent.com może być bardziej wyczerpująca, niż jest potrzebna. Możesz go zawęzić za pomocą zdalnego debugowania na urządzeniu z Androidem, aby określić adres URL ikony aplikacji.