PWA może zastąpić 80% aplikacji mobilnych

W maju po raz 13. odbyła się konferencja technologiczna Infoshare 2019. W AmberExpo w Gdańsku, na największym tego typu wydarzeniu w Europie Środkowo-Wschodniej, spotkało się kilka tysięcy uczestników, a ponad 200 osób wystąpiło ze swoimi wykładami. Prelegentami byli polscy i światowi eksperci, którzy chętnie dzielili się wiedzą na scenie, jak i poza nią.  

Jako CTO Bulldogjob.pl, przeprowadziłem wywiad na temat aplikacji PWA i ich przyszłości z jednym z prelegentów - Trishulem Goelem z Mozilli.

Trishul jest front-endowcem i zawodowo koduje w JavaScript. Jest ekspertem w tworzeniu rozszerzeń dla przeglądarki. Promuje PWA dla programistów Javascript na rzecz #teamWeb. Możesz go znać z rozszerzenia przeglądarki Measure-it. Tworzy również tutoriale na YouTube, aby pomóc programistom zrozumieć i zacząć korzystać z różnych interfejsów API Webextension.

Adam: Powiesz mi więcej o swojej specjalizacji?

Trishul: Robię wszystko, co można zrobić z Javascriptem. Może to być przeglądarka, aplikacja, coś z Arduino lub Raspberry pi i IoT. Cokolwiek, do czego zaprowadzi mnie Javascript. Właśnie dlatego tu jestem - z powodu PWA. Był to jeden z głównych czynników motywujących korzystanie z Javascriptu na mobile. 

Adam: Aż tak odpowiada Ci JavaScript?

Trishul: Wiesz, jestem super leniwy. Naprawdę nie chcę się uczyć żadnego nowego języka. Trzy lata wstecz, jeśli chciałeś tworzyć jakąkolwiek aplikację na telefon komórkowy, musiałeś nauczyć się Javy, może Kotlina lub jakichś skomplikowanych Androidowych narzędzi. Ale po co, jeśli możesz bezpośrednio używać JavaScriptu? 

Wcześniej programiści robili to za pomocą aplikacji hybrydowych, np. używając Cordovy. To sensowne rozwiązanie, ale wciąż słaba implementacja. W zasadzie używasz przeglądarki, na wierzch której nakładasz swój kod. Zasadniczo to uruchamianie przeglądarki wewnątrz aplikacji, co nie ma sensu. Tak więc to, co odróżnia PWA to połączenie natywnych aplikacji i stron internetowych. PWA to strony internetowe, które “jadły witaminy”.

Adam: Czy czujesz, że PWA jest gotowe przejąć większość mobilnego świata?

Trishul: Być może, ale powiedz mi, ile razy widziałeś coś takiego na komputerze lub telefonie komórkowym: Strona chce wysyłać ci powiadomienia. Zapewne widujesz coś takiego irytująco często. To właśnie PWA, które korzysta z mechanizmu Service Workers, choć nie wykorzystuje go w pełni. Np. PWA można teraz zainstalować. To więcej niż zakładka. Możesz ją dodać do pulpitu jednym kliknięciem i odpali się jak aplikacja. Załaduje całość HTML i Javascriptu i wyświetli ekran startowy. To przeglądarka bez interfejsu. I nie jest uzależniona od sieci.

Adam: Pojawiły się nowe frameworki dla wieloplatformowego rozwoju mobilnego - jak Flutter czy React Native. Jakie są obszary, w których PWA ma nad nimi przewagę?

Trishul: Jako deweloper zadaję sobie zawsze dwa pytania. Pierwsze pytanie brzmi: czy mogę to zbudować? Drugie pytanie jest bardzo ważne i większość ludzi je pomija: Czy powinienem to zbudować? Zależy to od przypadków użycia. Np. jeśli tworzysz naprawdę intensywną graficznie grę, nigdy nie chciałbym, abyś robił to z React Native lub PWA. Chciałbym, aby była to aplikacja natywna, ponieważ wówczas wykorzysta wiele zasobów prawidłowo. Nie do tego służy PWA. Ale wyobraź sobie, że masz sklep internetowy. PWA to najlepsza opcja, jeśli chcesz mieć do tego aplikacje.

Zwykła aplikacja wymaga częstych aktualizacji przez Play Store. PWA nie posiada takiego ograniczenia. Po każdej aktualizacji serwerów, aplikacja będzie się aktualizować w tle po uruchomieniu.

Wyobraź sobie, jak ułatwia to rozwój aplikacji. Poza tym nie chcę utrzymywać osobnych projektów dla każdej platformy. Ten sam kod działa w przeglądarce na komputerze i to samo działa na moim telefonie komórkowym. Zarówno na iOS, jak i Androidzie - wszystko działa płynnie.

Adam:  A czy z Twojego doświadczenia wynika, że faktycznie bez modyfikacji uruchamiasz ten sam kod na komputerach stacjonarnych i urządzeniach mobilnych?

Trishul: W rzeczy samej. Znasz pojęcie “strona responsywna”? To strona internetowa, która reaguje, gdy ją skurczysz, dopasowując ekranu. Tak więc ten sam kod strony internetowej będzie działał na przeglądarce stacjonarnej i mobilnej. PWA jest trochę jak dodatek do takiej strony: mobilna strona internetowa plus niektóre service workery pomogą stworzyć PWA.

Adam: Jakie są kroki, aby przekonwertować stronę responsywną w PWA? Jaka jest najłatwiejsza droga?

Trishul: To zależy od celu, do jakiego dążysz. Znowu posłużę się przykładem sklepu internetowego. Przede wszystkim chcesz się upewnić, że jest on zawsze dostępny, nawet gdy użytkownik nie ma połączenia z siecią. Jeśli otworzysz aplikację Amazon, nawet jeśli nie masz połączenia z Internetem, ekran nie jest pusty. Nowe produkty się nie załadują, ale struktura, menu i kategorie wyświetlą się normalnie. 

Te dane przechowywane są w pamięci podręcznej. Wystarczy, że zainstalujesz service workery i wskażesz, które pliki mają być przechowywane w pamięci podręcznej. Np. pliki JavaScript, CSS i HTML. Można je załadować bezpośrednio z pamięci podręcznej, bez konieczności łączenia się z serwerem. Możesz być połączony z internetem lub nie - nie ma to znaczenia. Twoja aplikacja będzie działać, a dynamiczne żądania - jak zdjęcia i opisy produktów - będą pobierane z serwera.

Adam: Dużo mówisz o zapisywaniu w pamięci podręcznej i service workerach, a wiele osób się takich rzeczy boi. Jak wiemy: "W informatyce są tylko trzy trudne problemy: Unieważnienie pamięci podręcznej, nadawanie nazw rzeczom i błędy Off by one".

Trishul: To akurat najłatwiejsza rzecz, jaką możesz zrobić z service workers. Definiujesz service workerom, który plik chcesz zapisać w pamięci podręcznej, a następnie tworzysz klucz do pamięci podręcznej. Np. Trishul_1. Kiedy service worker się załaduje, i jeśli jest połączony z internetem, sprawdzi, czy na stronie działa inny service worker. Jeśli tak, to dopasuje klucz. Jeśli klucz jest taki sam, to nic nie zrobi. Jeśli klucz jest inny, nadpisze pamięć podręczną nową informacją. To takie proste.

Adam: Czy uważasz, że PWA jest dobrym rozwiązaniem dla większości przypadków?

Trishul: Tak. I kiedy mówię większości, mam na myśli 80% sieci. Mogę podać wiele ciekawych przykładów wykorzystania PWA. Np. udało mi się uruchomić system rozpoznawania mowy w swojej przeglądarce - bez korzystania z żadnego zewnętrznego API, żadnych innych bibliotek czy usług. Z samego poziomu przeglądarki mogę coś przeczytać, mogę coś napisać, mogę korzystać z urządzeń Bluetooth, mogę korzystać z aparatu fotograficznego. Mogę użyć API wibracji. Mam dostęp do wszystkiego.

Adam: Czy uważasz, że API, do których obecnie mamy dostęp, są wystarczające? Czy czegoś im brakuje?

Trishul: Moim zdaniem nie ma takiego słowa jak "wystarczające”. Jednym z głównych ograniczeń, które kiedyś odczuwałem podczas tworzenia PWA, jest to, że nie mogę dzielić się swoimi danymi. W przeszłości, kiedy chciałeś się czymś podzielić, dzieliłeś się linkiem. Skopiuj go i wklej do Telegramu lub WhatsAppa, czy czegokolwiek, z czego korzystasz. Obecnie możemy skorzystać z Web Share API. Mogę zintegrować to API z progresywną aplikacją internetową jednym kliknięciem. Da mi to dostęp do okna dialogowego udostępniania i mogę z nim zrobić co chcę. A więc, dlaczego nie? Powinniśmy zawsze rozwijać nowe przydatne rzeczy.

Adam: O jakich API i funkcjach marzysz?

Trishul: Na obecną chwilę mamy Bluetooth, który działa w Chrome, ale w Firefox już nie. Bardzo bym chciał, żeby działał również i tam. PWA nie są dostępne w Play Store, a szkoda, ponieważ użytkownicy są do Play Store przyzwyczajeni. Jednak Google "zapowiedziało delikatnie", że istnieje możliwość, iż zezwolą na PWA w swoim sklepie - z niecierpliwością wyczekuję tej chwili.

Adam: To może być okazja dla PWA, by naprawdę zabłysnąć.

Trishul: To już się dzieje. Każdego roku na Google I/O demonstrują lub prezentują co najmniej jedną dużą aplikację. W tym roku był to OlaCabs, który jest w zasadzie indyjskim Uberem. Porównali swój rozwój, na przestrzeni gdy korzystali ze zwykłej aplikacji, oraz gdy korzystali z PWA. Okazało się, że PWA radzi sobie o wiele lepiej niż aplikacja. Głównym powodem jest to, że PWA opiera się na bardzo prostej zasadzie. Użyj, a następnie zainstaluj. W przeciwieństwie do natywnej aplikacji - która jest instalowana, a następnie używana. W PWA masz możliwość sprawdzenia, czy wszystko działa prawidłowo już po kilku minutach. Myślisz sobie "Ok, potrzebuję tego", a następnie instalujesz. I to jest wielki sukces.

Adam: Dziękuję za ten wywiad!