Wcześniej instalacja aplikacji była możliwa tylko w kontekście aplikacji na konkretne platformy. Dziś nowoczesne aplikacje internetowe oferują możliwość zainstalowania, które zapewniają taki sam poziom integracji i niezawodności jak aplikacje dostępne na poszczególnych platformach.
Możesz to osiągnąć na różne sposoby:
- Zainstaluj PWA w przeglądarce.
- Instalowanie PWA ze sklepu z aplikacjami.
Używanie różnych kanałów dystrybucji to skuteczny sposób na dotarcie do szerokiego grona użytkowników, ale wybór odpowiedniej strategii promowania instalacji PWA może być trudny.
W tym przewodniku znajdziesz wskazówki dotyczące łączenia różnych opcji instalacji w celu zwiększenia współczynnika instalacji i unikania konkurencji i kanibalizmie platform. Oferta instalacji obejmuje PWAs instalowane zarówno z przeglądarki, jak i z App Store, a także aplikacje przeznaczone do konkretnych platform.
Dlaczego warto udostępnić aplikację internetową do zainstalowania?
Zainstalowane progresywne aplikacje internetowe działają w oknie samodzielnym, a nie na karcie przeglądarki. Można je uruchamiać z poziomu ekranu głównego, stacji dokującej, paska zadań lub półki użytkownika. Można szukać ich na urządzeniu i przełączać się między nimi za pomocą przełącznika aplikacji. Dzięki temu poczują się jak część urządzenia, na którym są zainstalowane.
Jednak udostępnianie zarówno aplikacji internetowej do zainstalowania, jak i aplikacji na daną platformę może wprowadzać użytkowników w błąd. Dla niektórych użytkowników aplikacje działające na określonej platformie mogą być najlepszym wyborem, ale dla innych mogą mieć pewne wady:
- Ograniczenia miejsca na dane: instalacja nowej aplikacji może oznaczać usunięcie innych aplikacji lub zwolnienie miejsca przez usunięcie cennych treści. Jest to niekorzystne zwłaszcza w przypadku użytkowników słabszych urządzeń.
- Dostępna przepustowość: pobieranie aplikacji może być kosztowne i powolne, zwłaszcza w przypadku użytkowników, którzy korzystają z powolnego połączenia i drogich pakietów danych.
- Opory: opuszczenie witryny i przejście do sklepu w celu pobrania aplikacji powoduje dodatkowe trudności i opóźnia działanie użytkownika, które można wykonać bezpośrednio w internecie.
- Cykl aktualizacji: wprowadzanie zmian w aplikacjach na konkretne platformy może wymagać przejścia przez proces sprawdzania aplikacji, co może spowolnić wprowadzanie zmian i eksperymenty (np. testy A/B).
W niektórych przypadkach odsetek użytkowników, którzy nie pobiorą Twojej aplikacji na danej platformie, może być duży, np. którzy uważają, że nie będą z niej korzystać zbyt często albo nie usprawiedliwiają wydawania kilku megabajtów pamięci lub danych. Wielkość tego segmentu możesz określić na kilka sposobów, np. za pomocą ustawień usługi analitycznej, aby śledzić odsetek użytkowników „tylko w przeglądarce mobilnej”.
Jeśli rozmiar tego segmentu jest spory, oznacza to, że musisz zapewnić użytkownikom alternatywne sposoby instalacji treści.
Promowanie instalacji PWA w przeglądarce
Jeśli masz wysokiej jakości progresywną aplikację internetową, lepiej promować jej instalację zamiast aplikacji na danej platformie. Na przykład jeśli aplikacja na danej platformie nie ma funkcji oferowanych przez PWA lub aplikacja nie była od jakiegoś czasu aktualizowana. Możesz też promować instalację PWA, jeśli aplikacja na daną platformę nie została zoptymalizowana pod kątem większych ekranów, np. w przypadku ChromeOS.
W przypadku niektórych aplikacji pozyskiwanie użytkowników na konkretnej platformie jest kluczowym elementem modelu biznesowego. W takim przypadku warto promować instalację aplikacji na danej platformie. Niektórzy użytkownicy mogą jednak woleć przeglądanie internetu. Jeśli uda się zidentyfikować taki segment, tylko zobaczy on prośbę o aplikację (tak zwany „PWA jako aplikacja zastępcza”).
PWA jako główna aplikacja do zainstalowania
Gdy aplikacja PWA spełnia kryteria możliwości zainstalowania, większość przeglądarek wyświetla informację, że można ją zainstalować. Na przykład Chrome w wersji na komputer pokazuje na pasku adresu ikonę do zainstalowania, a na komórce – minipasek informacyjny:
W niektórych przypadkach może to wystarczyć, ale jeśli zależy Ci na zwiększeniu liczby instalacji PWA, zdecydowanie zalecamy przesłuchanie BeforeInstallPromptEvent
i postępowanie zgodnie z wzorcami promowania aplikacji PWA.
Zapobieganie rywalizacji własnej aplikacji internetowej z aplikacją na daną platformę
W niektórych przypadkach możesz promować instalację aplikacji na danej platformie zamiast progresywnej aplikacji internetowej. W takim przypadku nadal zalecamy jednak udostępnienie mechanizmu umożliwiającego użytkownikom instalację tej aplikacji. Ta opcja umożliwia użytkownikom, którzy nie mogą lub nie chcą zainstalować aplikacji na danej platformie, korzystanie z podobnej wersji.
Pierwszym krokiem do wdrożenia tej strategii jest zdefiniowanie heurystyki, która określa, kiedy użytkownikowi ma się wyświetlić promocja zachęcająca do zainstalowania PWA.
Przykład: użytkownik PWA to użytkownik, który zobaczył prośbę o zainstalowanie aplikacji na danej platformie, ale jej nie zainstalował. Taki użytkownik wrócił do witryny co najmniej 5 razy lub kliknął baner aplikacji, ale nadal korzystał z witryny.
Następnie heurystykę można zaimplementować w następujący sposób:
- Pokaż baner promujący instalację aplikacji na danej platformie.
- Jeśli użytkownik zamknie baner, ustaw plik cookie z tymi informacjami (np.
document.cookie = "app-install-banner=dismissed"
). - Użyj innego pliku cookie do śledzenia liczby wizyt użytkowników w witrynie (np.
document.cookie = "user-visits=1"
). - Utwórz funkcję (np.
isPWAUser()
), która będzie wykorzystywać informacje zapisane wcześniej w plikach cookie razem z interfejsem APIgetInstalledRelatedApps()
do określenia, czy użytkownik jest uznawany za „użytkownika PWA”. - Gdy użytkownik wykona istotne działanie, wywołaj
isPWAUser()
. Jeśli funkcja zwróci wartość true i poprzednio zapisano prompt instalacji PWA, możesz wyświetlić przycisk instalacji PWA.
Promowanie instalacji PWA w sklepie z aplikacjami
Aplikacje na potrzeby sklepów z aplikacjami mogą być tworzone przy użyciu różnych technologii, w tym technik PWA. W artykule Włączanie aplikacji PWA w środowiskach natywnych znajdziesz podsumowanie technologii, które można do tego celu wykorzystać.
W tej sekcji podzielimy aplikacje w sklepie na 2 grupy:
- Aplikacje dostępne na określonych platformach: takie aplikacje są w większości tworzone za pomocą kodu przeznaczonego na daną platformę. Ich rozmiar zależy od platformy, ale zwykle przekracza 10 MB w przypadku Androida i 30 MB w przypadku iOS. Możesz ją promować, jeśli nie masz aplikacji PWA lub jeśli ma ona pełniejszy zestaw funkcji.
- Lekkie aplikacje: te aplikacje można tworzyć przy użyciu kodu specyficznego dla danej platformy, ale zwykle są one tworzone przy użyciu technologii internetowych i opakowane w pakiet dla danej platformy. PWA można też przesłać do sklepów. (Zostało to omówione w dalszej części tego artykułu). Niektóre firmy decydują się na udostępnianie wersji „lite”, a inne stosują to podejście również w przypadku swoich flagowych (podstawowych) aplikacji.
Promowanie uproszczonych aplikacji
Według badania Google Play za każdym razem, gdy rozmiar pliku APK zwiększa się o 6 MB, współczynnik konwersji instalacji maleje o 1%. Oznacza to, że współczynnik pełnych obejrzeń 10 MB może być o około 30% wyższy niż w przypadku aplikacji o wielkości 100 MB.
Aby rozwiązać ten problem, niektóre firmy wykorzystują aplikacje PWA, aby udostępniać prostą wersję aplikacji w Sklepie Play przy użyciu Trusted Web Activities (TWA). TWA otaczają PWA komponentem podobnym do WebView, a wynikająca z tego aplikacja ma zwykle rozmiar zaledwie kilku megabajtów.
Oyo, jedna z największych indyjskich firm z branży hotelarskiej, stworzyła wersję Lite swojej aplikacji i udostępniła ją w Sklepie Play za pomocą TWA. W chwili napisania tego artykułu aplikacja Oyo miała zaledwie 850 KB, czyli 7% rozmiaru aplikacji na Androida. Po zainstalowaniu nie da się jej odróżnić od aplikacji na Androida:
Firma Oyo zachowała w sklepie zarówno flagowe, jak i „lite” wersje aplikacji, zapewniając użytkownikom wybór.
Wygodne korzystanie z internetu
Logiczne jest, że użytkownicy słabszych urządzeń chętniej pobierają lekkie wersje aplikacji niż użytkownicy telefonów z wysokimi parametrami. W związku z tym, jeśli można zidentyfikować urządzenie użytkownika, można potraktować priorytetowo prostszy baner promujący instalację aplikacji, a nie cięższa wersja aplikacji na danej platformie.
W internecie można uzyskiwać sygnały z urządzenia i przyporządkowywać je w przybliżeniu do kategorii urządzeń (np. „wysokie”, „średnie” czy „niskie”). Informacje te można uzyskać na różne sposoby, korzystając z interfejsów API JavaScript lub wskazówek dla klientów.
Używanie JavaScriptu
Korzystając z właściwości JavaScript, takich jak navigator.hardwareConcurrency, navigator.deviceMemory i navigator.connection, możesz uzyskać informacje odpowiednio o procesorze, pamięci i stanie sieci urządzenia. Na przykład:
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
Korzystanie ze wskazówek dotyczących klienta
Sygnały z urządzenia można też wnioskować w nagłówkach żądań HTTP za pomocą wskazówek dotyczących klientów. Oto jak zaimplementować poprzedni kod dotyczący pamięci urządzenia z podpowiedziami klienta:
Najpierw poinformuj przeglądarkę, że chcesz otrzymywać wskazówki dotyczące pamięci urządzenia w nagłówku odpowiedzi HTTP dla dowolnego żądania własnego:
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory
Następnie w nagłówku żądań HTTP zaczniesz otrzymywać informacje Device-Memory
:
GET /main.js HTTP/1.1
Device-Memory: 0.5
Możesz wykorzystać te informacje w backendach, aby przechowywać plik cookie z kategorią urządzenia użytkownika:
app.get('/route', (req, res) => {
// Determine device category
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';
// Set cookie
res.setCookie('Device-Category', deviceCategory);
…
});
Na koniec utwórz własną logikę, aby zmapować te informacje na kategorie urządzeń i wyświetlać odpowiednie prośby o instalację aplikacji w każdym przypadku:
if (isDeviceMidOrLowEnd()) {
// show "Lite app" install banner or PWA A2HS prompt
} else {
// show "Core app" install banner
}
Podsumowanie
Możliwość umieszczenia ikony na ekranie głównym użytkownika to jedna z najciekawszych funkcji aplikacji. Biorąc pod uwagę, że dotychczas było to możliwe tylko w przypadku aplikacji instalowanych ze sklepów z aplikacjami, firmy mogą sądzić, że wyświetlenie banera instalacji w sklepie z aplikacjami wystarczy, aby przekonać użytkowników do instalacji. Obecnie istnieje więcej opcji umożliwiających użytkownikom instalację aplikacji, w tym udostępnianie w sklepach aplikacji o lekkiej konstrukcji oraz umożliwienie użytkownikom dodawania aplikacji PWA do ekranu głównego poprzez wyświetlanie im odpowiedniego promptu bezpośrednio w witrynie.