W przeszłości instalowanie aplikacji było możliwe tylko w kontekście aplikacji na danej platformie. Obecnie nowoczesne aplikacje internetowe oferują możliwość instalacji, która zapewnia taki sam poziom integracji i niezawodności jak aplikacje przeznaczone na konkretne platformy.
Można to osiągnąć na różne sposoby:
- Instalowanie PWA z przeglądarki.
- Instalowanie PWA ze sklepu z aplikacjami.
Posiadanie różnych kanałów dystrybucji to świetny sposób na dotarcie do szerokiego grona użytkowników, ale wybór właściwej strategii promowania instalacji PWA może być trudnym zadaniem.
W tym przewodniku omawiamy sprawdzone metody łączenia różnych opcji instalacji w celu zwiększenia liczby instalacji oraz uniknięcia konkurencji na platformach i kanibalizacji. Obejmuje ona aplikacje PWA instalowane zarówno z przeglądarki, jak i z App Store, a także aplikacje na poszczególne platformy.
Dlaczego warto mieć możliwość zainstalowania swojej aplikacji internetowej?
Zainstalowane progresywne aplikacje internetowe działają w osobnym oknie, a nie na karcie przeglądarki. Użytkownik może je uruchomić na ekranie głównym, w Docku, na pasku zadań lub na półce. Można je wyszukiwać na urządzeniu i przełączać się między nimi za pomocą przełącznika aplikacji, dzięki czemu czujesz się jak część urządzenia, na którym zainstalowano.
Jednak zarówno aplikacja internetowa z możliwością zainstalowania, jak i aplikacja na platformę może być dla użytkowników skomplikowana. Dla niektórych użytkowników aplikacje przeznaczone na określoną platformę mogą być najlepszym wyborem, ale w przypadku innych mogą mieć pewne wady:
- Ograniczenia miejsca na dane: zainstalowanie nowej aplikacji może się wiązać z usunięciem innych użytkowników lub zwolnieniem miejsca przez usunięcie wartościowych treści. Jest to niekorzystne zwłaszcza w przypadku użytkowników urządzeń niskiej jakości.
- Dostępna przepustowość: pobieranie aplikacji może być kosztowne i powolne, zwłaszcza w przypadku wolniejszych połączeń i drogich abonamentów na transmisję danych.
- Wypadki: opuszczenie strony internetowej i przeniesienie do sklepu w celu pobrania aplikacji to kolejne utrudnienia i opóźniają wykonanie działania, które można wykonać bezpośrednio w przeglądarce.
- Cykl aktualizacji: wprowadzanie zmian w aplikacjach na danej platformie może wymagać sprawdzenia aplikacji, co może spowolnić proces wprowadzania zmian i eksperymentów (np. testów A/B).
W niektórych przypadkach odsetek użytkowników, którzy nie pobiorą Twojej aplikacji na danej platformie, może być duży – na przykład przez użytkowników, którzy uważają, że nie będą używać aplikacji zbyt często albo nie potrafią uzasadnić wydania kilku megabajtów miejsca na dane lub megabajtów danych. Rozmiar tego segmentu możesz określić na kilka sposobów, np. korzystając z konfiguracji analityki, by śledzić odsetek użytkowników korzystających tylko z internetu mobilnego.
Jeśli segment jest duży, warto podać alternatywne sposoby instalowania aplikacji.
Zachęcanie do instalacji aplikacji PWA z poziomu przeglądarki
Jeśli masz wysokiej jakości progresywną aplikację internetową, lepiej promować jej instalację zamiast aplikacji przeznaczonej na daną platformę. Przykładem może być sytuacja, gdy aplikacja na tę platformę nie ma funkcji oferowanych przez PWA lub od jakiegoś czasu nie była aktualizowana. Promowanie instalacji aplikacji PWA może też być korzystne, jeśli aplikacja na daną platformę nie została zoptymalizowana pod kątem większych ekranów, np. w ChromeOS.
W przypadku niektórych aplikacji zwiększenie liczby instalacji aplikacji na danej platformie jest kluczowym elementem modelu biznesowego. W takim przypadku korzystne jest promowanie instalacji aplikacji na danej platformie. Niektórzy użytkownicy mogą jednak wygodniej pozostać w internecie. Jeśli uda się go zidentyfikować, prośba PWA będzie wyświetlana tylko użytkownikom (tzw. „PWA jako zastępcza”).
PWA jako główna wersja do zainstalowania
Gdy aplikacja PWA spełnia kryteria instalacji, większość przeglądarek pokazuje, że można ją zainstalować. Na przykład na pasku adresu Chrome na komputerze ma ikonę z możliwością zainstalowania, a na urządzeniu mobilnym – minipasek informacyjny:
W przypadku niektórych rozwiązań może to wystarczyć, ale jeśli Twoim celem jest zwiększenie liczby instalacji PWA, zdecydowanie zalecamy słuchanie BeforeInstallPromptEvent i stosowanie się do wzorców promowania instalacji aplikacji PWA.
Zapobiegaj kanibalizacji odsetka instalacji aplikacji przez PWA
W niektórych przypadkach możesz promować instalację aplikacji na danej platformie zamiast PWA, ale w tym przypadku zalecamy udostępnienie mechanizmu umożliwiającego użytkownikom instalowanie Twojej aplikacji PWA. Dzięki tej opcji zastępczej użytkownicy, którzy nie mogą lub nie chcą zainstalować Twojej aplikacji na danej platformie, mogą zainstalować taką aplikację w podobny sposób.
Pierwszym krokiem w implementacji tej strategii jest zdefiniowanie heurystyki, w której będziesz wyświetlać użytkownikowi promocję instalacji aplikacji PWA.
Przykład: użytkownik PWA to użytkownik, który zobaczył prośbę o zainstalowanie aplikacji na danej platformie i nie zainstalował tej aplikacji. Wrócił do witryny co najmniej 5 razy lub kliknął baner aplikacji, ale nadal korzystał z witryny.
Następnie można zastosować metodę heurystyczną:
- Wyświetlaj baner promujący instalację aplikacji na danej platformie.
- Jeśli użytkownik zamknie baner, utwórz plik cookie z tą informacją (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 używać informacji zapisanych wcześniej w plikach cookie (wraz z interfejsem APIgetInstalledRelatedApps()) do określenia, czy użytkownik jest uważany za „użytkownika PWA”. - Gdy użytkownik wykona istotne działanie, wywołaj funkcję
isPWAUser(). Jeśli funkcja zwraca wartość „true” (prawda), a prośba o zainstalowanie PWA została wcześniej zapisana, możesz wyświetlić przycisk instalacji PWA.
Promowanie instalacji aplikacji PWA z poziomu sklepu z aplikacjami
Aplikacje dla sklepów z aplikacjami można tworzyć przy użyciu różnych technologii, w tym technik PWA. Podsumowanie technologii, które można wykorzystać w ramach tego celu, znajdziesz w sekcji Łączenie PWA ze środowiskami natywnymi.
W tej sekcji podzielimy aplikacje w sklepie na 2 grupy:
- Aplikacje przeznaczone na daną platformę: są one zwykle tworzone za pomocą kodu przeznaczonego na daną platformę. Ich rozmiar zależy od platformy, ale zwykle jest powyżej 10 MB na Androidzie i 30 MB na iOS. Jeśli nie masz PWA lub aplikacja na danej platformie ma pełniejszy zestaw funkcji, możesz promować swoją aplikację na określoną platformę.
- Uproszczone aplikacje: można je również tworzyć za pomocą kodu przeznaczonego na daną platformę, ale zwykle są one tworzone za pomocą technologii internetowej i opakowane w kod dostosowany do danej platformy. Pełne aplikacje PWA można też przesyłać do sklepów. (Zostało to omówione w dalszej części artykułu). Niektóre firmy wolą udostępniać je w wersji uproszczonej, a inne stosują tę metodę również w swoich najważniejszych (głównych) aplikacjach.
Promowanie prostych aplikacji
Według badania Google Play na każde 6 MB zwiększy się rozmiar pliku APK, a współczynnik konwersji instalacji spada o 1%. Oznacza to, że współczynnik ukończenia pobierania aplikacji o wielkości 10 MB może być około 30% wyższy niż w przypadku aplikacji mającej 100 MB.
Aby rozwiązać ten problem, niektóre firmy wykorzystują PWA do udostępniania lekkiej wersji swoich aplikacji w Sklepie Play przy użyciu programu Trusted Web Activities (TWA). TWA opakowują PWA w komponencie przypominającym komponent WebView, a powstała aplikacja ma zwykle rozmiar zaledwie kilku megabajtów.
Oyo, jedna z największych firm turystycznych w Indiach, stworzyła wersję uproszczoną swojej aplikacji i udostępniła ją w Sklepie Play za pomocą aplikacji TWA. W momencie napisania tego artykułu aplikacja Oyo miała rozmiar tylko 850 KB, czyli zaledwie 7% rozmiaru aplikacji na Androida. Po zainstalowaniu aplikacji nie można jej odróżnić od aplikacji na Androida:
Firma Oyo zachowała w sklepie zarówno sztandarową, jak i „lekką” wersję aplikacji, dając użytkownikom możliwość wyboru.
Prostsza obsługa internetu
Użytkownicy urządzeń niskiej jakości intuicyjnie mogą być bardziej skłonni do pobierania lekkich wersji aplikacji niż użytkownicy zaawansowanych telefonów. Jeśli więc można zidentyfikować urządzenie użytkownika, możesz potraktować priorytetowy baner promujący instalację aplikacji niż ciężka wersja aplikacji na danej platformie.
W internecie można uzyskać sygnały z urządzeń i w przybliżeniu przypisać je do kategorii urządzeń (np. „wysokie”, „średnie” lub „niskie”). Informacje te można uzyskać na różne sposoby – za pomocą interfejsów API JavaScript lub wskazówek dla klienta.
Korzystanie z JavaScriptu
Korzystając z właściwości JavaScriptu takich jak navigator.hardwareConcurrency, navigator.deviceMemory i navigator.connection, można uzyskać informacje 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 dla klientów
Sygnały dotyczące urządzeń można też wywnioskować z nagłówków żądań HTTP, korzystając ze wskazówek dla klienta. Oto jak możesz wdrożyć poprzedni kod dla pamięci urządzenia, korzystając ze wskazówek dla klienta:
Najpierw poinformuj przeglądarkę, że chcesz otrzymywać w nagłówku odpowiedzi HTTP wskazówki dotyczące pamięci urządzenia:
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory
Od tego momentu będziesz otrzymywać informacje Device-Memory w nagłówku żądań HTTP:
GET /main.js HTTP/1.1
Device-Memory: 0.5
Możesz wykorzystać te informacje w backendach do przechowywania pliku cookie z określonej kategorii 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 w każdym przypadku wyświetlać odpowiednią prośbę o zainstalowanie aplikacji:
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 w przeszłości było to możliwe tylko w przypadku aplikacji instalowanych ze sklepów z aplikacjami, firmy mogą się wydawać, że pokazanie banera promującego instalacje aplikacji ze sklepu z aplikacjami wystarczy, aby przekonać użytkowników do instalacji aplikacji. Obecnie dostępne są inne opcje umożliwiające użytkownikom instalowanie aplikacji, np. oferowanie prostych aplikacji w sklepach i dodawanie aplikacji PWA do ekranu głównego z prośbą o wykonanie ich bezpośrednio ze strony internetowej.