Wiele przeglądarek umożliwia włączanie i promowanie instalacji progresywnej aplikacji internetowej (PWA) bezpośrednio w interfejsie. Instalacja (wcześniej nazywana Dodaj do ekranu głównego) umożliwia użytkownikom zainstalowanie PWA na urządzeniu mobilnym lub komputerze. Instalacja PWA powoduje dodanie aplikacji do ekranu głównego użytkownika, dzięki czemu może ona działać jak każda inna zainstalowana aplikacja.
Oprócz instalacji w przeglądarce możesz udostępnić własny proces instalacji bezpośrednio w aplikacji.
Decydując, czy promować instalację, zastanów się, jak użytkownicy zazwyczaj korzystają z Twojej aplikacji PWA. Jeśli np. masz grupę użytkowników, którzy korzystają z Twojej aplikacji internetowej wiele razy w ciągu tygodnia, mogą oni czerpać korzyści z dodatkowej wygody uruchamiania aplikacji z ekranu głównego telefonu lub z menu Start w systemie operacyjnym na komputerze. Niektóre aplikacje do pracy i rozrywki również korzystają z dodatkowej przestrzeni na ekranie, która powstaje po usunięciu pasków narzędzi przeglądarki z okna w trybie standalone, minimal-ui lub window-control-overlay.
Wymagania wstępne
Zanim zaczniesz, sprawdź, czy PWA spełnia wymagania instalowalności, które zwykle obejmują posiadanie pliku manifestu aplikacji internetowej.
Promowanie instalacji
Aby pokazać, że progresywna aplikacja internetowa jest instalowalna, i zapewnić niestandardowy proces instalacji w aplikacji:
- Nasłuchuj zdarzenia
beforeinstallprompt. - Zapisz zdarzenie
beforeinstallprompt, aby można było później wywołać proces instalacji. - Poinformuj użytkownika, że PWA można zainstalować, i udostępnij przycisk lub inny element, który umożliwi rozpoczęcie procesu instalacji w aplikacji.
Nasłuchiwanie zdarzenia beforeinstallprompt
Jeśli Twoja progresywna aplikacja internetowa spełnia wymagane kryteria instalacji, przeglądarka uruchamia zdarzenie beforeinstallprompt. Zapisz odwołanie do zdarzenia i zaktualizuj interfejs użytkownika, aby wskazać, że użytkownik może zainstalować PWA.
// 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, umieść przycisk lub inny element interfejsu, który użytkownik może kliknąć, aby zainstalować aplikację. Gdy użytkownik kliknie element, wywołaj funkcję prompt() w zapisanym zdarzeniu beforeinstallprompt (przechowywanym w zmiennej deferredPrompt). Wyświetla użytkownikowi okno instalacji z prośbą o potwierdzenie, że chce zainstalować PWA.
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 jest rozwiązywana zgodnie z wyborem użytkownika.
Funkcję prompt() możesz wywołać tylko raz w przypadku opóźnionego zdarzenia. Jeśli użytkownik go zamknie, musisz zaczekać, aż zdarzenie beforeinstallprompt zostanie ponownie wywołane, zwykle natychmiast po rozwiązaniu problemu z właściwością userChoice.
wykrywać, kiedy PWA została zainstalowana;
Możesz użyć właściwości userChoice, aby określić, czy użytkownik zainstalował Twoją aplikację z interfejsu użytkownika. Jeśli jednak użytkownik zainstaluje PWA z paska adresu lub innego elementu przeglądarki, userChoice nie pomoże.
Zamiast tego zacznij nasłuchiwać zdarzenia appinstalled, które jest wywoływane, gdy tylko zainstalujesz PWA, niezależnie od tego, jaki mechanizm został użyty do jego 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');
});
wykrywanie sposobu uruchomienia aplikacji PWA,
Zapytanie o multimedia display-mode w CSS wskazuje, w jaki sposób uruchomiono PWA: na karcie przeglądarki czy jako zainstalowaną aplikację PWA. Umożliwia to stosowanie różnych stylów w zależności od sposobu uruchomienia aplikacji. Możesz na przykład skonfigurować aplikację tak, aby zawsze ukrywać przycisk instalacji i zapewniać przycisk Wstecz, gdy jest uruchamiana jako zainstalowana PWA.
Śledzenie sposobu uruchomienia PWA
Aby śledzić, jak użytkownicy uruchamiają PWA, przetestuj zapytanie o multimedia matchMedia() za pomocą narzędzia display-mode.
function getPWADisplayMode() {
if (document.referrer.startsWith('android-app://'))
return 'twa';
if (window.matchMedia('(display-mode: browser)').matches)
return 'browser';
if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone)
return 'standalone';
if (window.matchMedia('(display-mode: minimal-ui)').matches)
return 'minimal-ui';
if (window.matchMedia('(display-mode: fullscreen)').matches)
return 'fullscreen';
if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
return 'window-controls-overlay';
return 'unknown';
}
Śledzenie zmian trybu wyświetlania
Aby śledzić, czy użytkownik przełącza się między trybem browser a innymi trybami wyświetlania, sprawdzaj zmiany w zapytaniu o multimedia display-mode.
// Replace "standalone" with the display mode used in your manifest
window.matchMedia('(display-mode: standalone)').addEventListener('change', () => {
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
});
Aktualizacja interfejsu użytkownika na podstawie bieżącego trybu wyświetlania
Aby zastosować inny kolor tła dla PWA podczas uruchamiania zainstalowanej PWA, użyj kodu CSS warunkowego:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
Zmiana ikony i nazwy aplikacji
Co zrobić, jeśli musisz zaktualizować nazwę aplikacji lub przesłać nowe ikony? Aby dowiedzieć się, kiedy i jak te zmiany są odzwierciedlane w Chrome, przeczytaj artykuł Jak Chrome obsługuje aktualizacje pliku manifestu aplikacji internetowej.