Opublikowano: 12 maja 2020 r.
W przeszłości instalacja aplikacji była możliwa tylko w kontekście aplikacji na konkretne platformy. Obecnie nowoczesne aplikacje internetowe oferują możliwość instalacji i zapewniają taki sam poziom integracji i niezawodności jak aplikacje na konkretne platformy.
Możesz to zrobić na różne sposoby:
- Instalowanie PWA z poziomu przeglądarki.
- Zainstaluj PWA ze sklepu z aplikacjami.
Różne kanały dystrybucji to świetny sposób na dotarcie do szerokiego grona użytkowników. Wybór odpowiedniej strategii promowania instalacji progresywnej aplikacji internetowej może być jednak trudny.
Z tego przewodnika dowiesz się, jak łączyć różne opcje instalacji, aby zwiększyć współczynnik instalacji i uniknąć konkurencji między platformami oraz kanibalizacji. Oferty instalacji obejmują progresywne aplikacje internetowe instalowane zarówno z przeglądarki, jak i z App Store, a także aplikacje na poszczególne platformy.
Dlaczego warto umożliwić instalowanie aplikacji internetowej?
Zainstalowane progresywne aplikacje internetowe działają w osobnym oknie zamiast w karcie przeglądarki. Można je uruchamiać z ekranu głównego, doku, paska zadań lub półki. Można je wyszukiwać na urządzeniu i przełączać się między nimi za pomocą przełącznika aplikacji, dzięki czemu sprawiają wrażenie, jakby były częścią urządzenia, na którym są zainstalowane.
Jednak posiadanie zarówno instalowanej aplikacji internetowej, jak i aplikacji na konkretną platformę może być mylące dla użytkowników. Dla niektórych użytkowników aplikacje na konkretne platformy mogą być najlepszym wyborem, ale dla innych mogą mieć pewne wady:
- Ograniczenia pamięci: zainstalowanie nowej aplikacji może oznaczać konieczność usunięcia innych aplikacji lub zwolnienia miejsca przez usunięcie cennych treści. Jest to szczególnie niekorzystne dla użytkowników urządzeń z niższej półki.
- Dostępna przepustowość: pobieranie aplikacji może być kosztownym i powolnym procesem, zwłaszcza w przypadku użytkowników korzystających z wolnych połączeń i drogich pakietów danych.
- Trudności: 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 poszczególne platformy może wymagać przejścia procesu sprawdzania aplikacji, co może spowolnić zmiany i eksperymenty (np. testy A/B).
W niektórych przypadkach odsetek użytkowników, którzy nie pobiorą aplikacji na konkretną platformę, może być duży. Dotyczy to np. osób, które uważają, że nie będą zbyt często korzystać z aplikacji, lub nie chcą zajmować kilku megabajtów miejsca na dane. Rozmiar tego segmentu możesz określić na kilka sposobów, np. za pomocą konfiguracji Analytics, która śledzi odsetek użytkowników korzystających tylko z przeglądarki mobilnej.
Jeśli rozmiar tego segmentu jest znaczny, oznacza to, że musisz udostępnić alternatywne sposoby instalowania swoich aplikacji.
Promowanie instalacji progresywnej aplikacji internetowej w przeglądarce
Jeśli masz wysokiej jakości aplikację PWA, możesz promować jej instalację zamiast aplikacji na konkretną platformę. Na przykład jeśli w aplikacji na konkretną platformę brakuje funkcji oferowanych przez aplikację PWA lub jeśli nie była ona od jakiegoś czasu aktualizowana. Może to być też przydatne w przypadku promowania instalacji PWA, jeśli aplikacja na konkretną platformę nie została zoptymalizowana pod kątem większych ekranów, np. w ChromeOS.
W przypadku niektórych aplikacji promowanie instalacji na konkretnych platformach jest kluczowym elementem modelu biznesowego. W takim przypadku promowanie instalacji aplikacji na konkretnej platformie ma sens biznesowy. Niektórzy użytkownicy mogą jednak woleć korzystać z aplikacji w internecie. Jeśli ten segment można zidentyfikować, prośba o zainstalowanie aplikacji PWA może być wyświetlana tylko tym użytkownikom. Nazywamy to PWA jako rozwiązanie zastępcze.
PWA jako podstawowa możliwość instalacji
Gdy PWA spełnia kryteria możliwości zainstalowania, większość przeglądarek wyświetla informację o tym, że można ją zainstalować. Na przykład Chrome na komputerze wyświetla ikonę instalacji na pasku adresu, a na urządzeniach mobilnych – mini-pasek informacyjny:
Chociaż w niektórych przypadkach może to wystarczyć, jeśli Twoim celem jest zwiększenie liczby instalacji progresywnej aplikacji internetowej, zdecydowanie zalecamy nasłuchiwanie zdarzenia BeforeInstallPromptEvent i stosowanie wzorców promowania instalacji progresywnej aplikacji internetowej.
Zapobieganie rywalizacji progresywnej aplikacji internetowej z aplikacją na konkretną platformę
W niektórych przypadkach możesz promować instalację aplikacji na konkretną platformę zamiast progresywnej aplikacji internetowej. Nadal zalecamy jednak udostępnienie mechanizmu, który umożliwi użytkownikom zainstalowanie progresywnej aplikacji internetowej. Ta opcja zastępcza umożliwia użytkownikom, którzy nie mogą (lub nie chcą) zainstalować aplikacji na konkretną platformę, uzyskanie podobnego efektu.
Pierwszym krokiem w realizacji tej strategii jest określenie heurystyki, która będzie decydować o tym, kiedy wyświetlać użytkownikowi promocję instalacji progresywnej aplikacji internetowej.
Użytkownik PWA to np. osoba, która widziała prośbę o zainstalowanie aplikacji na konkretną platformę, ale jej nie zainstalowała. Mogą oni wracać do Twojej witryny 5 razy lub więcej, klikać baner aplikacji, ale nadal korzystać z witryny.
Heurystykę można wdrożyć w ten sposób:
- Wyświetl baner instalacji aplikacji na konkretnej 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, aby śledzić liczbę wizyt użytkowników w witrynie (np.
document.cookie = "user-visits=1"). - Napisz funkcję, np.
isPWAUser(), która korzysta z informacji zapisanych wcześniej w plikach cookie oraz z interfejsugetInstalledRelatedApps()API, aby określić, czy użytkownik jest uznawany za użytkownika aplikacji PWA. - Gdy użytkownik wykona istotne działanie, wywołaj funkcję
isPWAUser(). Jeśli funkcja zwróci wartość „true” i wcześniej zapisano prośbę o zainstalowanie aplikacji PWA, możesz wyświetlić przycisk instalacji aplikacji PWA.
Promowanie instalacji aplikacji PWA w sklepie z aplikacjami
Aplikacje w sklepach z aplikacjami można tworzyć za pomocą różnych technologii, w tym technik PWA. W artykule Łączenie PWA ze środowiskami natywnymi znajdziesz podsumowanie technologii, które można w tym celu wykorzystać.
Aplikacje w sklepie można podzielić na 2 grupy:
- Aplikacje na konkretne platformy: te aplikacje są w większości tworzone za pomocą kodu specyficznego dla danej platformy. Rozmiar aplikacji zależy od platformy, ale zwykle przekracza 10 MB na Androidzie i 30 MB na iOS. Możesz promować aplikację na konkretną platformę, jeśli nie masz PWA lub jeśli aplikacja na konkretną platformę ma bardziej kompletny zestaw funkcji.
- Aplikacje o niewielkich rozmiarach: te aplikacje również można tworzyć za pomocą kodu specyficznego dla platformy, ale zwykle są one tworzone przy użyciu technologii internetowych i pakowane w otoczkę specyficzną dla platformy. Pełne aplikacje PWA można też przesyłać do sklepu. Niektóre firmy decydują się na udostępnianie takich aplikacji w wersji „lite”, a inne stosują to podejście również w przypadku swoich głównych aplikacji.
Promowanie aplikacji o niewielkim rozmiarze
Z badań Google Play wynika, że każde zwiększenie rozmiaru pliku APK o 6 MB powoduje spadek współczynnika konwersji instalacji o 1%. Oznacza to, że wskaźnik ukończenia pobierania aplikacji o rozmiarze 10 MB może być o 30% wyższy niż w przypadku aplikacji o rozmiarze 100 MB.
Aby rozwiązać ten problem, niektóre firmy wykorzystują swoje PWA do udostępniania w Sklepie Play lekkiej wersji aplikacji za pomocą zaufanych aktywności w internecie (TWA). Zaufane aplikacje internetowe (TWA) umieszczają progresywną aplikację internetową w komponencie podobnym do widoku internetowego, a rozmiar wynikowej aplikacji wynosi zwykle tylko kilka megabajtów.
Oyo, jedna z największych firm hotelarskich w Indiach, stworzyła lekką wersję swojej aplikacji i udostępniła ją w Sklepie Play za pomocą zaufanej aplikacji internetowej. W maju 2020 r. aplikacja Oyo miała tylko 850 KB, czyli zaledwie 7% rozmiaru aplikacji na Androida. Po zainstalowaniu nie różni się od aplikacji na Androida:
Firma Oyo zachowała w sklepie zarówno flagową, jak i „lżejszą” wersję aplikacji, dając użytkownikom wybór.
Zapewnianie lekkiego interfejsu internetowego
Użytkownicy słabszych urządzeń mogą być bardziej skłonni do pobierania lekkich wersji aplikacji niż użytkownicy telefonów z wyższej półki. Jeśli więc można zidentyfikować urządzenie użytkownika, możesz wyświetlać baner instalacji lekkiej aplikacji zamiast banera instalacji cięższej wersji aplikacji na konkretną platformę.
W internecie można uzyskać sygnały z urządzeń i w przybliżeniu przypisać je do kategorii urządzeń (np. „wysoka”, „średnia” lub „niska”). Te informacje możesz uzyskać na różne sposoby, korzystając z interfejsów API JavaScript lub wskazówek klienta.
Używanie JavaScriptu
Właściwości JavaScriptu, takie jak navigator.hardwareConcurrency, navigator.deviceMemory i navigator.connection, umożliwiają uzyskiwanie informacji o stanie procesora, pamięci i sieci urządzenia. Na przykład:
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
Korzystanie ze wskazówek dotyczących klienta
Sygnały dotyczące urządzenia można też wywnioskować z nagłówków żądań HTTP za pomocą wskazówek klienta. Oto jak możesz zastosować poprzedni kod dotyczący pamięci urządzenia za pomocą wskazówek klienta.
Poinformuj przeglądarkę, że chcesz otrzymywać wskazówki dotyczące pamięci urządzenia w nagłówku odpowiedzi HTTP na każde żądanie własne:
HTTP/1.1 200 OK Content-Type: text/html Accept-CH: Device-MemoryW nagłówku żądania HTTP zaczniesz otrzymywać informacje
Device-Memory:GET /main.js HTTP/1.1 Device-Memory: 0.5Użyj tych informacji w backendach, aby zapisać 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); … });Utwórz własną logikę mapowania tych informacji na kategorie urządzeń i w każdym przypadku wyświetl odpowiedni monit o zainstalowanie aplikacji:
if (isDeviceMidOrLowEnd()) { // show "Lite app" install banner or PWA A2HS prompt } else { // show "Core app" install banner }
Umożliwianie użytkownikom instalowania aplikacji niezależnie od platformy
Możliwość umieszczenia ikony na ekranie głównym użytkownika jest jedną z najbardziej angażujących funkcji aplikacji. W przeszłości było to możliwe tylko w przypadku aplikacji zainstalowanych ze sklepów z aplikacjami, więc firmy mogą uważać, że wyświetlenie banera instalacji aplikacji ze sklepu wystarczy, aby przekonać użytkowników do zainstalowania ich aplikacji.
Istnieje więcej opcji umożliwiających użytkownikom instalowanie aplikacji, w tym oferowanie w sklepach uproszczonych wersji aplikacji i umożliwianie użytkownikom dodawania aplikacji PWA do ekranu głównego poprzez wyświetlanie im prośby o zrobienie tego bezpośrednio w witrynie.