Rozpoczynamy serię na temat Progressive Web Apps (w skrócie PWA, a po polsku moglibyśmy to nazwać Progresywnymi Aplikacjami Internetowymi). Dziś lekki początek, skupiający się na teorii, wprowadzeniu do tematu oraz porównaniu różnych rodzajów aplikacji. Zapraszam do czytania.
Definicja Progressive Web App
W skrócie, poprzez "Progressive Web App" możemy rozumieć cechy stron internetowych, które pod względem doświadczeń użytkownika (UX), jak i interfejsu (UI), upodabniają je do zwykłych (natywnych) aplikacji. Do instalacji tradycyjnych aplikacji są przyzwyczajeni użytkownicy komputerów czy telefonów, a z których korzystania niekoniecznie potrzebują połączenia internetowego. Co więcej, w skład tego terminu wchodzą także różne technologie i funkcje, dzięki którym możemy lepiej wykorzystać możliwości urządzeń (np. kamery, powiadomień push, czy obsługa płatności). Warto podkreślić, że w tym przypadku pod słowem "aplikacja" kryje się nic innego, jak strona internetowa. Nazywamy ją w ten sposób, ponieważ swoim działaniem i wyglądem ma przypominać zwykłe aplikacje, choć stoją za tym także inne powody (o tym później).
Jeśli chcecie się dowiedzieć, jakie możliwości mają obecne przeglądarki i w jaki sposób można z nich skorzystać w swoich aplikacjach, odwiedźcie tę stronę: What Web Can Do Today
Oczywiście warto przed implementacją sprawdzić, jak wielu użytkowników będzie miało możliwość skorzystać z takich funkcji: Can I Use
Jednym z najważniejszych elementów PWA jest możliwość instalacji aplikacji poprzez przeglądarkę, co jest możliwe dzięki spełnieniu trzech warunków: zabezpieczenie komunikacji na stronie przez HTTPS, stworzeniu pliku webmanifest (artykuł na ten temat możecie przeczytać tutaj: Web App Manifest), a także zarejestrowaniu Service Workera. Dzięki temu ostatniemu możemy także wprowadzić możliwość uruchomienia aplikacji bez dostępu do internetu, cache'ując za jego pomocą zasoby aplikacji (a jeśli aplikacja koniecznie potrzebuje połączenia internetowego, powinna pokazać odpowiedni komunikat przy jego braku).
Jednym z najwcześniejszych i często podawanych przykładów gotowej PWA jest mobilny Twitter. Kiedy wejdziemy na stronę (https://mobile.twitter.com), powinniśmy w menu swojej przeglądarki mieć opcję "Zainstaluj aplikację Twitter..." lub "Dodaj do ekranu głównego", natomiast w najnowszych wersjach przeglądarki Chrome w pasku adresu po prawej stronie pojawi się ikona plusa, zachęcająca nas do instalacji.
Tak przykładowo wyglądają opcje zainstalowania PWA w przeglądarce Chrome (wersja 75).
Co więcej, odwiedzając taką stronę przy użyciu przeglądarki mobilnej (też Chrome) możemy otrzymać banner z propozycją zainstalowania aplikacji. Oczywiście stanie się to, jeśli strona spełnia wymagania, aby być "zainstalowana".
Różne rodzaje aplikacji
Głównym założeniem i celem tworzenia aplikacji jest dostarczenie nowych funkcji na urządzeniu użytkownika. Programiści mogą wybierać spośród szerokiej gamy języków i frameworków, aby przystosować ich aplikację do działania na konkretnej platformie. Języki webowe, choć z początku skupiały się na stronach internetowych, obecnie coraz częściej są wykorzystywane do tworzenia aplikacji. Jest to spowodowane między innymi tym, że internet odgrywa coraz większą rolę w życiu ludzi. Korzystają oni z danych przechowywanych w chmurze (czyli po prostu na innych urządzeniach, do których mają dostęp przez sieć), wykonują swoją pracę na tych plikach właśnie przez internet (np. edytując dokumenty na swoim dysku Google), czy grają w gry sieciowe. Dzięki językom webowym mamy możliwość łatwego utworzenia komunikacji klient-serwer, który jest dostępny na niemalże każdej platformie. Takie firmy jak Adobe, Microsoft czy Google starały się to wykorzystać, aby umożliwić tworzenie aplikacji do zainstalowania, które działają poza przeglądarką (choć często na jej silniku). Ich pomysły nie stały się standardami i w niektórych przypadkach zostały one porzucone.
Aplikacje natywne są jednym ze sposobów tworzenia aplikacji, który znany jest już od dawna. Tego typu aplikacje są pisane dla konkretnej platformy czy urządzenia i dzięki temu mogą prowadzić ścisłą interakcję z elementami systemu operacyjnego, mając też dostęp do różnych informacji na temat urządzenia. Dla przykładu, aplikacje natywne na Androida są pisane w języku Java.
Innym podejściem do tworzenia aplikacji, który wykorzystuje w pewnym stopniu języki webowe, są aplikacje hybrydowe. Jest to aplikacja przygotowana podobnie jak natywna, jednak z tą różnicą, że wewnątrz niej znajdziemy specjalną ramkę (nazywaną w Androidzie WebView), która... wyświetla użytkownikowi stronę internetową. Jest to rozwiązanie pozwalające stworzyć aplikację do zainstalowania, która będzie napisana z wykorzystaniem HTML-a, CSS-a i JavaScriptu. Wykonanie takiej aplikacji może być tańsze, ponieważ dzieli kod ze swoim "przeglądarkowym" odpowiednikiem, choć wciąż wymaga pracy z narzędziami do tworzenia aplikacji natywnych i minimalnej znajomości ich obsługi.
Ostatnim i najświeższym sposobem jest Progressive Web Apps, które porzuca tradycyjne podejście do aplikacji i przenosi wszystko na języki webowe, podczas gdy jej instalacją i obsługą zajmuje się przeglądarka internetowa. Coraz to nowsze możliwości JS pozwalają nam na lepszą integrację z systemem operacyjnym, choć wciąż są rzeczy, których aplikacja internetowa nie będzie w stanie obsłużyć. Na przykład nie skorzystamy bezpośrednio z NFC oraz nie otrzymamy dostępu do wiadomości SMS/MMS, gdyż prace nad tymi API są jeszcze w toku. Z kolei w aplikacji natywnej możemy uprawnienia do tych elementów otrzymać, tworząc funkcje je wykorzystujące. Z tego powodu PWA nie zawsze będzie odpowiednim rozwiązaniem. Z pewnością dużym plusem PWA jest to, że jest w wykonaniu jeszcze tańsza i jej kod może dzielić jednocześnie i aplikacja, i strona internetowa, odwiedzana przez użytkownika w przeglądarce.
Historia terminu "Progressive Web App"
Termin "Progressive Web App" po raz pierwszy znalazł się w poście zatytułowanym "Progressive Web Apps: Escaping Tabs Without Losing Our Soul", a opublikowanym 15 czerwca 2015 roku. Jego autor, Alex Russell, jest jednym z developerów przeglądarki Google Chrome. Wraz ze swoją żoną, Frances Berriman, będącą "Head of Product" w Netlify, wpadli na pomysł nazwania istniejącej już wtedy formy aplikacji internetowych, które korzystają z możliwości systemu operacyjnego. "Progressive Web App" odnosi się do różnych cech aplikacji webowej, która upodabnia doświadczenia płynące z korzystania z niej, tak jakby była to natywna aplikacja.
Rok po tym poście Alex opublikował kolejny, nazwany "What, Exactly, Makes Something A Progressive Web App?" (12 września 2016). Skupił się w nim na wspomnianych wymaganiach, które są niezbędne w stworzeniu instalowalnej PWA. Jednym z głównych jest serwowanie aplikacji przez SSL, bez mieszanych treści aktywnych (jeśli wszystko jest w porządku, przeglądarka wyświetla ikonę kłódki w pasku adresu, a sam adres zawiera "https" na początku). Powinniśmy także zadbać o to, żeby zarejestrować w naszej aplikacji Service Workera, nawet jeśli nie będziemy korzystać z jego funkcjonalności (choć powinniśmy, np. dla wyświetlenia odpowiedniego komunikatu przy braku połączenia internetowego). Ostatnim elementem jest wspomniany wcześniej plik manifest, który powinien posiadać podstawowe elementy. Dopiero wtedy będzie możliwe "zainstalowanie" internetowej aplikacji na pulpicie użytkownika, zamiast utworzyć skrót do strony.
Później, odnośnie nazwy terminu "Progressive Web App", głos zabrała Frances Berriman, publikując na swoim blogu post pod tytułem "Naming Progressive Web Apps", 26 czerwca 2017 roku. Zwróciła w nim uwagę na fakt, że nazwanie tego aplikacjami, zamiast stronami (ponieważ, w rzeczy samej, są to po prostu strony internetowe), ma służyć głównie przykuciu uwagi szefów, menadżerów oraz inwestorów, nie programistów. W ten sposób jest łatwiej przekonać ich do produkcji "progresywnej aplikacji", niż "strony internetowej", zamiast tworzyć aplikację natywną na telefon czy komputer.
Podsumowanie
W tym wprowadzeniu postarałem się zapoznać Was z historią nazwy PWA, pokazać, czym taka aplikacja się cechuje, oraz co ją różni od pozostałych typów aplikacji. W przyszłych postach przejdziemy do konkretniejszych i praktyczniejszych elementów PWA, dzięki którym stworzycie swoją własną aplikację.
Proszę, dajcie znać w komentarzach, jak podobał Wam się ten post i w jaki sposób mógłbym go poprawić. Jest to dla mnie ważne, aby przygotowywać dla Was jak najlepsze materiały.
Darmowy ebook o PWAJeśli interesuje Cię temat PWA i chciałbyś dowiedzieć się o tym więcej, zapraszam do zapoznania się z moim ebookiem zawierającym najważniejsze informacje:
"Basics of PWA" eBook
