Natywny komunikat o instalacji aplikacji

Prompty natywne instalacji aplikacji umożliwiają użytkownikom szybkie bezproblemową instalowanie aplikacji natywnej bezpośrednio ze sklepu z aplikacjami na urządzeniach użytkowników bez opuszczania przeglądarki i bez wyświetlania irytujących reklam pełnoekranowych.

Jakie są kryteria?

Aby wyświetlić użytkownikowi prośbę o zainstalowanie natywnej aplikacji, Twoja witryna musi spełniać te kryteria:

Gdy spełnisz te kryteria, zostanie uruchomione zdarzenie beforeinstallprompt. Ty mogą go użyć, aby poprosić użytkownika o zainstalowanie Twojej aplikacji natywnej.

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 ona wyświetlić z aplikacją natywną, a nie internetową. 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 Twojej preferowanej aplikacji natywnej. Każdy obiekt musi zawierać właściwość platform i id. Gdzie platform to play a id to identyfikator aplikacji w Sklepie Play.

Wyświetlanie prośby o instalację

Aby wyświetlić okno instalacji:

  1. Wykrywaj zdarzenie 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 metodę prompt() w zapisanym zdarzeniu beforeinstallprompt.

Posłuchaj: beforeinstallprompt

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

Po wywołaniu zdarzenia beforeinstallprompt zapisz odniesienie do zdarzenia. i zaktualizuj interfejs, aby wskazać użytkownikowi, że może ją zainstalować.

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;
});

Poinformowanie użytkownika, że aplikacja jest gotowa do zainstalowania

Najlepszym sposobem na powiadomienie użytkownika, który może zainstalować Twoją aplikację, jest dodanie przycisku lub inny element 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';
});

Pokaż prompt

Aby wyświetlić prośbę o instalację, wywołaj prompt() przy zapisanym zdarzeniu można wykonać gestem 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;
    });
});

Funkcję prompt() możesz wywołać tylko raz w przypadku opóźnionego zdarzenia. 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 restrykcyjną politykę zabezpieczeń treści, dodaj dyrektywę *.googleusercontent.com do dyrektywy img-src, mogą pobrać ikonę powiązaną z Twoją aplikacją ze Sklepu Play.

W niektórych przypadkach *.googleusercontent.com może być bardziej rozbudowany niż pożądane. Jest ale można to zawęzić za pomocą zdalnego debugowania. urządzenia z Androidem, aby określić URL ikony aplikacji.