Wiele przeglądarek umożliwia włączenie i promowanie instalacji progresywnej aplikacji internetowej (PWA) bezpośrednio w jej interfejsie. Instalacja (wcześniej nazywana „Dodaj do ekranu głównego”) umożliwia użytkownikom Twoją aplikację PWA na komórce lub komputerze. Zainstalowanie aplikacji PWA powoduje dodanie jej do aplikacji użytkownika co pozwala uruchamiać ją tak samo jak każdą inną zainstalowaną aplikację.
Oprócz udostępniania w przeglądarce, możesz skonfigurować własną, niestandardową procedurę instalacji bezpośrednio w aplikacji.
![Przycisk Zainstaluj aplikację dostępny w Spotify PWA](https://web.developers.google.cn/static/articles/customize-install/image/install-app-button-provid-c69a76f7a7ce5.png?hl=pl)
Rozważając, czy warto promować instalację, zastanów się, jak użytkownicy zwykle
używać aplikacji PWA. Jeśli na przykład istnieje grupa użytkowników, którzy korzystają z aplikacji PWA wiele
użytkowników w tygodniu mogą korzystać z
Z poziomu ekranu głównego telefonu lub menu Start na komputerze.
systemu operacyjnego. Niektóre aplikacje zwiększające produktywność i rozrywkowe również mają
z dodatkowej przestrzeni ekranu utworzonej przez usunięcie pasków narzędzi
okno w zainstalowanych trybach standalone
lub minimal-ui
.
Wymagania wstępne
Zanim zaczniesz, upewnij się, że Twoja aplikacja PWA spełnia wymaganiami w zakresie możliwości instalacji, które zwykle mieć manifest aplikacji internetowej.
Promuj instalację
Aby pokazać, że progresywną aplikację internetową można zainstalować, i udostępnić proces instalacji w aplikacji:
- Wykrywaj zdarzenie
beforeinstallprompt
. - Zapisz zdarzenie
beforeinstallprompt
, aby mogło aktywować proces instalacji później. - Poinformuj użytkownika, że aplikację PWA można zainstalować, i podaj przycisk lub inny aby rozpocząć proces instalacji w aplikacji.
Nasłuchuj zdarzenia beforeinstallprompt
Jeśli progresywna aplikacja internetowa spełnia wymagane kryteria instalacji,
przeglądarka uruchomi zdarzenie beforeinstallprompt
. zapisać odwołanie do wydarzenia,
i zaktualizuj interfejs, aby wskazać, że użytkownik może zainstalować Twoją progresywną aplikację internetową.
// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can install the PWA
showInstallPromotion();
// Optionally, send analytics event that PWA install promo was shown.
console.log(`'beforeinstallprompt' event was fired.`);
});
Proces instalacji w aplikacji
Aby umożliwić instalację w aplikacji, dodaj przycisk lub inny element interfejsu
którą użytkownik może kliknąć, by zainstalować aplikację. po kliknięciu elementu lub
i kliknij, aby zadzwonić pod numer prompt()
w przypadku zapisanego zdarzenia beforeinstallprompt
(zapisanego w
deferredPrompt
). Wyświetla użytkownikowi modalne okno instalacji z pytaniem
potwierdzić, że chcą zainstalować Twoją progresywną aplikację internetową.
buttonInstall.addEventListener('click', async () => {
// Hide the app provided install promotion
hideInstallPromotion();
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice;
// Optionally, send analytics event with outcome of user choice
console.log(`User response to the install prompt: ${outcome}`);
// We've used the prompt and can't use it again, throw it away
deferredPrompt = null;
});
Właściwość userChoice
to obietnica, która realizuje się zgodnie z wyborem użytkownika.
W zdarzeniu odroczonym możesz wywołać prompt()
tylko raz. Jeśli użytkownik
zostanie odrzucony, musisz poczekać do zdarzenia beforeinstallprompt
uruchamia się ponownie, zwykle bezpośrednio po właściwości userChoice
.
został rozwiązany.
Wykrywanie instalacji PWA
Możesz użyć właściwości userChoice
, aby określić, czy użytkownik zainstalował
do aplikacji z poziomu interfejsu. Jeśli użytkownik zainstaluje Twoją PWA,
z paska adresu lub innego komponentu przeglądarki, userChoice
nie pomoże.
Zamiast tego lepiej nasłuchiwać zdarzenia appinstalled
, które jest uruchamiane, gdy
z instalacją aplikacji PWA niezależnie od mechanizmu użytego do jej zainstalowania.
window.addEventListener('appinstalled', () => {
// Hide the app-provided install promotion
hideInstallPromotion();
// Clear the deferredPrompt so it can be garbage collected
deferredPrompt = null;
// Optionally, send analytics event to indicate successful install
console.log('PWA was installed');
});
Sprawdzanie, jak została uruchomiona aplikacja PWA
Zapytanie o media display-mode
w usłudze porównywania cen wskazuje, w jaki sposób została uruchomiona PWA:
na karcie przeglądarki
lub jako zainstalowana aplikacja PWA. Dzięki temu można stosować różne
w zależności od sposobu uruchomienia aplikacji. Możesz na przykład skonfigurować
aby zawsze ukrywać przycisk instalacji i wyświetlać przycisk Wstecz po uruchomieniu
zainstalowana aplikacja PWA.
Śledzenie, jak została uruchomiona aplikacja PWA
Aby śledzić, jak użytkownicy uruchamiają Twoją PWA, za pomocą narzędzia matchMedia()
przetestuj
Zapytanie o multimedia: display-mode
. Safari na iOS nie obsługuje jeszcze tej funkcji, więc musisz
zaznacz navigator.standalone
, które zwraca wartość logiczną wskazującą, czy
przeglądarka działa w trybie samodzielnym.
function getPWADisplayMode() {
const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
if (document.referrer.startsWith('android-app://')) {
return 'twa';
} else if (navigator.standalone || isStandalone) {
return 'standalone';
}
return 'browser';
}
Śledzenie zmian trybu wyświetlania
Aby sprawdzić, czy użytkownik zmienia się między standalone
a browser tab
, nasłuchuj
zmiany w zapytaniu o media display-mode
.
window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
let displayMode = 'browser';
if (evt.matches) {
displayMode = 'standalone';
}
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', displayMode);
});
Aktualizuj interfejs użytkownika zgodnie z bieżącym trybem wyświetlania
Aby zastosować inny kolor tła aplikacji PWA uruchomionej jako zainstalowana PWA, użyj warunkowego kodu CSS:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
Aktualizowanie ikony i nazwy aplikacji
Co zrobić, jeśli musisz zaktualizować nazwę aplikacji lub dodać nowe ikony? Dowiedz się, jak Chrome obsługuje aktualizacje pliku manifestu aplikacji internetowej. aby zobaczyć, kiedy i w jaki sposób te zmiany zostaną odzwierciedlone w Chrome.