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:
- Ani aplikacja internetowa, ani aplikacja natywna zainstalowana obecnie na urządzeniu.
- Zawiera plik manifestu aplikacji internetowej, który zawiera:
short_name
name
(używana w prompcie na banerze)icons
w tym wersja 192 pikseli i 512 pikseliprefer_related_applications
totrue
related_applications
obiekt z informacjami o aplikacji
- wyświetlane przy użyciu protokołu HTTPS,
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"
}
]
prefer_related_applications
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
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:
- Wykrywaj zdarzenie
beforeinstallprompt
. - Poinformuj użytkownika, że natywną aplikację można zainstalować za pomocą przycisku lub innego elementu, który wygeneruje zdarzenie gestu użytkownika.
- Wyświetl prompt, wywołując metodę
prompt()
w zapisanym zdarzeniubeforeinstallprompt
.
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.