Zawartość
- 01. Skrót do aplikacji WebAPK vs Android
- 02. Utwórz niestandardowy baner instalacyjny aplikacji internetowej
- 03. Udostępniaj zawartość ze swojego PWA
- 04. Śledzenie analityczne
- 05. Utwórz zgodny iOS PWA
- 06. Synchronizacja danych w tle
- 07. Sieci społecznościowe i pseudo-przeglądarki
- 08. Przetestuj na urządzeniach z Androidem i emulatorach
- 09. Publikowanie w sklepach
Progresywne aplikacje internetowe (PWA) to nowa granica w elastycznym projektowaniu witryn internetowych i ich popularność rośnie. Obsługa PWA rozpoczęła się od Chrome na Androida i jest teraz dostępna w większości innych przeglądarek na Androida, takich jak Opera, Firefox, Samsung Internet i UCWeb, a także na iPhone'ach i iPadach z iOS 11.3 i Edge dla Windows i Chrome na komputerowych systemach operacyjnych.
Aby pomóc Ci stworzyć dobro doświadczenie użytkownika dla tej rosnącej publiczności zamierzamy podzielić się kilkoma ważnymi sztuczkami i pomysłami. Aby uzyskać więcej porad, zapoznaj się z naszym artykułem na temat jak stworzyć aplikację.
01. Skrót do aplikacji WebAPK vs Android
W 2017 roku Chrome wprowadził nową funkcję dla użytkowników Androida: WebAPK. Teraz, gdy użytkownicy zainstalują PWA (jeśli spełnia wymagania), serwer Google Play utworzy w locie plik APK (pakiet Android, natywny kontener aplikacji) i zainstaluje go na urządzeniu tak, jakby pochodził ze Sklepu Play . Twój użytkownik nie musi włączać niezabezpieczonych źródeł ani zmieniać żadnych innych ustawień.
Po zainstalowaniu PWA pojawi się na ekranie głównym, w launcherze aplikacji, w Ustawieniach oraz jak każda inna pierwszorzędna aplikacja obywatelska w systemie operacyjnym wraz z informacją o baterii i zajętym miejscu w systemie.
Jeśli Twoje PWA nie spełnia wszystkich wymagań, usługa Play nie działa, występuje problem z połączeniem lub używana jest inna przeglądarka Android, taka jak Firefox lub Samsung Internet, zostanie utworzony standardowy skrót do ekranu głównego. Ta ikona będzie oznaczona marką przeglądarki z systemu Android 8+.
WebAPK umożliwia również przyjemną, ale niebezpieczną funkcję, o której musisz wiedzieć: PWA będzie właścicielem domeny i ścieżki w granicach systemu operacyjnego Android. Na podstawie atrybutu zakresu z manifestu aplikacji sieci Web każdy link otrzymany przez użytkownika do tego zakresu będzie przekazywany do aplikacji pełnoekranowej, a nie przeglądarki, co oznacza, że musisz zwracać uwagę na używane adresy URL.
Załóżmy, że masz aplikację PWA obsługującą użytkowników mobilnych i znajduje się ona w folderze głównym Twojej domeny. Gdy aplikacja zostanie zainstalowana przez WebAPK, cała domena będzie teraz własnością PWA. Jeśli masz ankietę pod adresem / sondaż, którą udostępniasz za pośrednictwem Facebooka, lub plik PDF z warunkami, które wyślesz pocztą e-mail do swoich użytkowników pod adresem /terms.pdf, system operacyjny otworzy PWA, a nie przeglądarkę po kliknięciu tych linków. Ważne jest, aby sprawdzić, czy Twój system routingu PWA wie o tych adresach URL i jak je obsługiwać, a jeśli nie, to otworzyć je w przeglądarce w innym zakresie.
02. Utwórz niestandardowy baner instalacyjny aplikacji internetowej
Kilka przeglądarek zaprasza użytkownika do zainstalowania aplikacji PWA, jeśli są spełnione określone warunki, w tym powtarzające się wizyty tego użytkownika w ramach PWA. W tej chwili baner nie zawiera wystarczających informacji, dlaczego użytkownik powinien zaakceptować. Możemy jednak użyć zdarzeń, aby ominąć baner i, co ważniejsze, odroczyć go w celu uzyskania czegoś, co prawdopodobnie wygeneruje akceptację, na przykład ikony instalacji.
Pierwszym krokiem jest anulowanie wyglądu banera i zapisanie obiektu zdarzenia do późniejszego wykorzystania:
// zmienna globalna dla obiektu zdarzenia var installPromptEvent; window.addEventListener (’beforeinstallprompt’, function (event) {event.preventDefault (); installPromptEvent = zdarzenie;});
Następnym krokiem jest zapewnienie interfejsu użytkownika wyjaśniającego zalety instalacji lub przycisku Instaluj. Ten interfejs użytkownika wywoła naszą następną funkcję:
function callInstallPrompt () {// Nie możemy uruchomić okna dialogowego przed zablokowaniem domyślnego okna przeglądarki if (installPromptEvent! == undefined) {installPromptEvent.prompt (); }}
03. Udostępniaj zawartość ze swojego PWA
Gdy aplikacja PWA jest w trybie pełnoekranowym, w przeglądarce nie ma paska adresu URL ani akcji Udostępnij, aby użytkownik mógł udostępniać treści w sieciach społecznościowych. Możemy skorzystać z Web Share API i mieć rezerwę do otwierania natywnych aplikacji społecznościowych.
function share () {var text = 'Dodaj tekst do udostępnienia z adresem URL'; if ('share' w nawigatorze) {navigator.share ({title: document.title, text: text, url: location.href,})} else {// Tutaj używamy WhatsApp API jako rozwiązania zastępczego; pamiętaj, aby zakodować swój tekst dla URI location.href = ’https://api.whatsapp.com/send?text=’ + encodeURIComponent (text + ’-’) + location.href}}
04. Śledzenie analityczne
Kiedy masz PWA, będziesz chciał śledzić jak najwięcej zdarzeń, więc spójrzmy na wszystko, co możemy obecnie zmierzyć. Możesz użyć interfejsów API Google Analytics lub innych narzędzi analitycznych, aby później śledzić te zdarzenia.
window.addEventListener ('appinstalled', function (event) {// Track event: aplikacja została zainstalowana (baner lub instalacja ręczna)}); window.addEventListener ('beforeinstallprompt', function (event) {// Śledź zdarzenie: pojawił się baner aplikacji internetowej event.userChoice.then (function (result) {if (result.outcome === 'accept') {// Śledź zdarzenie: baner aplikacji internetowej został zaakceptowany} else {// Śledź zdarzenie: baner aplikacji internetowej został odrzucony}});});
Kolejnym ważnym zdarzeniem śledzenia jest otwarcie aplikacji na ekranie głównym przez użytkownika. Oznacza to, że użytkownik kliknął ikonę aplikacji lub - w przypadku Androida z obsługą WebAPK - kliknął również link wskazujący zakres PWA.
Najprościej można to zrobić za pomocą atrybutu start_url manifestu, dodając w adresie URL zdarzenie śledzenia, które może być automatycznie używane jako źródło ze skryptu Analytics, na przykład:
start_url: „/? utm_source = standalone & utm_medium = pwa”
Ponadto poniższy skrypt pozostawia wartość logiczną określającą, czy użytkownik jest aktualnie w przeglądarce (prawda), czy w trybie samodzielnej aplikacji (fałsz):
var isPWAinBrowser = true; // zamień standalone na fullscreen lub minimal-ui zgodnie z manifestem if (matchMedia (’(display-mode: standalone)’). match) {// Android i iOS 11.3+ isPWAinBrowser = false; } else if („standalone” w nawigatorze) {// przydatne w iOS 11.3 isPWAinBrowser =! navigator.standalone; }
Następnie, jeśli korzystasz z powiadomień push, możesz śledzić kilka zdarzeń w Service Workerze, takich jak:
self.addEventListener ('push', function (e) {// Śledź zdarzenie: otrzymano wiadomość push}); self.addEventListener ('notificationclick', function (e) {// Śledź zdarzenie: wiadomość Push Kliknięto, możesz przeczytać e.action.id, aby śledzić działania}); self.addEventListener (’notificationclose’, function (e) {// Track event: Push Message Dismissed});
05. Utwórz zgodny iOS PWA
Chociaż wielu uważa, że obsługa PWA wkrótce trafi na iOS 11.3, prawda jest taka, że koncepcja - choć pod inną nazwą - została zaprezentowana przez Steve'a Jobsa ponad dziesięć lat temu na WWDC 07. Dlatego ekran główny obsługiwany przez iOS i aplikacje offline przez jakiś czas, korzystając ze starszych technik. Ale od iOS 11.3 zacznie obsługiwać te same specyfikacje, co Android.
Jeśli nadal chcesz oferować instalację przed iOS 11.3, musisz dodać metatagi lub użyć wypełnienia tego autora utworzonego na https://github.com/firtman/iWAM
Teraz Twoja aplikacja PWA będzie działać w trybie offline i będzie można ją zainstalować na iOS, nawet jeśli nie zdecydujesz się na iOS. Ważne jest, aby zrozumieć pewne różnice, które mogą wpłynąć na wrażenia użytkownika PWA w systemie iOS:
- Ikony w iOS muszą być kwadratowe i nieprzezroczyste, aby uniknąć problemów z interfejsem użytkownika. Nie używaj tej samej ikony, którą masz na Androidzie. Użyj 120x120 i 180x180 dla iPhone'ów.
- Jeśli masz SPA lub łączysz się z innymi stronami w swoim zakresie, zachowaj ostrożność podczas nawigacji, ponieważ użytkownicy iOS nie mają możliwości powrotu ani do przodu, jeśli nie podasz linków nawigacyjnych w swoim interfejsie użytkownika. Gesty przesuwania nie działają w pełnoekranowych PWA.
- Począwszy od pierwszych wersji iOS 11.3, system operacyjny ponownie ładuje PWA przy każdym dostępie do aplikacji, więc jeśli użytkownik musi wyjść z aplikacji, aby wrócić później (na przykład w celu dwukierunkowego procesu uwierzytelniania), pamiętaj o aplikacja będzie domyślnie uruchamiać się od zera.
06. Synchronizacja danych w tle
Pracownicy usług mają oddzielny cykl życia od okna PWA lub karty przeglądarki. Dlatego możesz wykonywać operacje sieciowe w tle, nawet po zamknięciu aplikacji PWA przez użytkownika. Jeśli jest w toku operacja i nie ma dostępnego dostępu do sieci w tym momencie, silnik pozwoli nam przetworzyć w tle, jeśli połączenie zostanie wykryte później.
Interfejs API synchronizacji w tle jest obecnie dostępny tylko w niektórych przeglądarkach, więc musisz podać rezerwę. Chodzi o to, że Twój PWA ustawi flagę ze znacznikiem tekstowym, stwierdzając, że musi wykonać operację synchronizacji w tle.
navigator.serviceWorker.ready.then (function (reg) {reg.sync.register ('myTag')});
Następnie w ServiceWorker słuchamy zdarzenia, a jeśli to etykieta, oczekujemy, że zwrócimy obietnicę. Jeśli obietnica zostanie spełniona, operacja zostanie oznaczona jako zakończona. Jeśli nie, będzie próbować później w tle.
self.addEventListener (’sync’, function (event) {if (event.tag === ’myTag’) {event.waitUntil (doAsyncOperationForMyTag ());}});
07. Sieci społecznościowe i pseudo-przeglądarki
Jeśli Twoi użytkownicy udostępniają zawartość PWA w sieciach społecznościowych lub jeśli używają pseudo przeglądarek (przeglądarek bez własnego silnika, ale korzystających z widoków internetowych), musisz zdawać sobie sprawę z pewnych problemów.
Na przykład Facebook wykorzystuje WebView w aplikacjach na Androida i iOS, aby zaoferować przeglądanie w aplikacji, gdy użytkownicy klikną łącze. Na Androidzie większość WebView nie obsługuje pracowników usług i nie może zainstalować PWA, więc gdy użytkownik otworzy zawartość z Facebooka, PWA będzie działać tak, jakby była niekompatybilną przeglądarką bez żadnych plików w pamięci podręcznej ani szczegółów sesji .
Od iOS 11.3 WebView będzie obsługiwał pracowników usług, ale będzie klonem tego samego PWA, którego użytkownik używał w Safari lub nawet w innych pseudoprzeglądarkach, takich jak Chrome czy Firefox na iOS.
Dlatego też, jeśli renderujesz baner instalacyjny lub okno dialogowe ze wskazówkami dotyczącymi instalacji wyjaśniające wartość instalacji aplikacji, sprawdź, czy znajdujesz się w widoku WebView, ponieważ użytkownik nie będzie mógł wykonać Twoich czynności. Ukryj te informacje lub poproś użytkownika o otwarcie adresu URL w domyślnej przeglądarce. Dotyczy to między innymi Facebooka na Androida, Facebooka na iOS, Chrome na iOS i Firefoksa na iOS. Sprawdzenie na żywo, czy korzystasz z WebView, czy nie, jest trudne, ale dostępne jest narzędzie pomocnicze.
08. Przetestuj na urządzeniach z Androidem i emulatorach
Testowanie procesów Service Worker i manifestu aplikacji sieci Web wymaga protokołu HTTPS, z wyjątkiem hosta lokalnego. Chociaż lokalne testy na komputerach stacjonarnych są początkowo dobre, w pewnym momencie chcemy zobaczyć nasze PWA w akcji na urządzeniach z Androidem. Jak możemy to zrobić? Uzyskiwanie dostępu do serwera deweloperskiego z naszego telefonu lub emulatora Androida nie zadziała, ponieważ nie ma protokołu HTTPS ani lokalnego hosta z punktu widzenia systemu operacyjnego Android.
Rozwiązanie pojawia się wraz z narzędziami dla programistów Chrome. Jeśli przejdziemy do chrome: // sprawdzimy i otworzymy emulator lub prawdziwe urządzenie z podłączonym debugowaniem USB, będziemy mogli włączyć przekierowanie portów. Następnie adres http: // localhost na naszym urządzeniu z Androidem zostanie przekierowany do lokalnego hosta naszego komputera lub dowolnego innego hosta. Dzięki tej sztuczce Android poprawnie wyrenderuje PWA przez niezabezpieczone połączenie. Pamiętaj jednak, że chociaż WebAPK utworzy pakiet i zainstaluje go, może nie działać w trybie autonomicznym.
09. Publikowanie w sklepach
Chociaż podejście PWA nie zaczęło się z myślą o sklepach, niektóre oferty, w tym Twitter Lite i Google Maps Go w Sklepie Play, zaczęły udostępniać PWA w sklepach. Jeśli jest to coś, co Cię interesuje, aby dystrybuować PWA bez pakowania go w Cordova, masz dostępne opcje:
- Sklep Microsoft: Możesz utworzyć PWA dla Windows 10 za pomocą oficjalnego narzędzia z pwabuilder.com
- Sklep Google Play: W chwili pisania tego tekstu, Trusted Web Activities dostępne na Canary Channel umożliwiają stworzenie aplikacji na Androida, która po prostu otwiera posiadane PWA i dystrybuuje je w sklepie, tworząc rozwiązanie podobne do WebAPK. Możesz dowiedzieć się więcej tutaj.
- Apple App Store: obecnie nie ma oficjalnych rozwiązań do dystrybucji PWA, ale WKWebView będzie obsługiwać pracowników usług z iOS 11.3, więc nie będzie trudno stworzyć prostą otokę dla PWA. Pytanie brzmi, czy Apple zatwierdzi to w sklepie? Apple nie chce rozwiązań, które są tylko witrynami internetowymi z opakowaniem.
Artykuł ukazał się pierwotnie w numerze 304 z netto, najlepiej sprzedający się magazyn na świecie dla projektantów i programistów stron internetowych. Kup numer 304 tutaj lub zapisz się tutaj.
