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 aplikacji PWA na urządzeniu mobilnym lub komputerze. Po zainstalowaniu aplikacji PWA zostanie ona dodana do programu uruchamiającego użytkownika, dzięki czemu będzie działać jak każda inna zainstalowana aplikacja.
Oprócz instalacji w przeglądarce możesz też 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 skorzystać z dodatkowej wygody uruchamiania aplikacji z ekranu głównego telefonu lub z menu Start w systemie operacyjnym na komputerze. W przypadku niektórych aplikacji biurowych i rozrywkowych więcej miejsca na ekranie zapewnia usunięcie pasków narzędzi przeglądarki z okna w zainstalowanych trybach standalone, minimal-ui lub window-control-overlay.
Wymagania wstępne
Zanim zaczniesz, upewnij się, że Twoja aplikacja PWA spełnia wymagania dotyczące możliwości zainstalowania, które zwykle obejmują plik manifestu aplikacji internetowej.
Promuj instalację
Aby pokazać, że progresywna aplikacja internetowa jest instalowalna, i zapewnić niestandardowy proces instalacji w aplikacji:
- Nasłuchuj zdarzenia
beforeinstallprompt. - Zapisz zdarzenie
beforeinstallprompt, aby mogło aktywować proces instalacji później. - 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łuchuj zdarzenia beforeinstallprompt
Jeśli progresywna aplikacja internetowa spełnia wymagane kryteria instalacji, przeglądarka wywoła zdarzenie beforeinstallprompt. Zapisz odniesienie do zdarzenia i zaktualizuj interfejs, aby wskazać, że może on 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, udostępnij przycisk lub inny element interfejsu, który użytkownik może kliknąć, aby zainstalować aplikację. Po kliknięciu tego elementu wywołaj prompt() w zapisanym zdarzeniu beforeinstallprompt (zapisanym 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 realizuje się zgodnie z wyborem użytkownika.
Funkcję prompt() możesz wywołać tylko raz w przypadku opóźnionego zdarzenia. Jeśli użytkownik ją odrzuci, musisz poczekać, aż zdarzenie beforeinstallprompt uruchomi się ponownie, zwykle natychmiast po zakończeniu działania 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 nasłuchuj zdarzenie appinstalled, które jest wywoływane, gdy PWA jest instalowane, niezależnie od mechanizmu używanego do instalacji.
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 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ć ją w taki sposób, aby zawsze ukrywał przycisk instalacji i udostępniał przycisk Wstecz po uruchomieniu jako zainstalowanej aplikacji 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 ustawić inny kolor tła dla aplikacji PWA uruchomionej jako zainstalowana aplikacja PWA, użyj warunkowego 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? Z artykułu Jak Chrome obsługuje aktualizacje pliku manifestu aplikacji internetowej, dowiesz się, kiedy i w jaki sposób te zmiany są odzwierciedlane w Chrome.