Główne logo strony

Wstęp do Progressive Web Apps (PWA)

📅
🏷️JavaScriptPWA

Sprawdź kompletną ścieżkę nauki frontendu.

Progressive Web Apps (PWA) jest jednym z najnowszych oraz jednym z najpopularniejszych tematów w kontekście tworzenia aplikacji mobilnych. Czym więc jest i dlaczego warto znać to zagadnienie. Omówimy sobie wszystko dokładnie w dzisiejszym wpisie. Można go traktować jako wstęp do Progressive Web Apps dla osób które jeszcze nie spotkały się z tym zagadnieniem.

Czym jest PWA?

Może nieco pokrętnie, ale zaczniemy od tego czym PWA nie jest. Nie jest to żadna nowa technologia, albo framework, którego musielibyśmy nauczyć się w celu jego zastosowania. PWA jest zbiorem dobrych praktyk, których przestrzeganie spowoduje, że nasza aplikacja będzie „dostosowywała się” do urządzenia użytkownika. Tym dopasowanie są np. push notyfikacje, możliwość pracy offline, itp.

W idealnym przypadku użytkownik aplikacji nie powinien widzieć różnicy w tym, czy otworzył naszą aplikacje jako natywną aplikację stworzoną pod dany system operacyjny czy jako aplikację PWA.

Aplikacja Progressive Web Apps jest stroną internetową, napisaną przy użyciu wielkiej trójki – HTML, JavaScript oraz CSS. Działa na zarówno w przeglądarkach (dostosowując swój wygląd oraz układ do wielkości ekranu – responsywność) oraz niczym zainstalowana aplikacja (push notyfikacje, praca offline, dostęp z ikony na pulpicie, brak paska adresu, tryb pełnoekranowy). Wszystko to możliwe z wykorzystaniem jedynie technologii frontend-owych!

Po co nam PWA?

Zasady PWA powstały, aby rozwiązać jak najwięcej współczesnych problemów dotyczących natywnych aplikacji. Do niektórych z nich należą:

Alternatywy dla PWA

Aplikacje natywne

Przychodzącą pierwszą do głowy oraz najbardziej oczywistą opcją są aplikacje natywne, czyli pisane pod konkretną platformę. Chcąc tworzyć software działający na wszystkich najpopularniejszych urządzeniach mobilnych, musimy znać odpowiednio technologie: Objective-C albo Swift dla iOS, Java dla Androida oraz C# dla Windows Phone (wiem, wiem… jednak dalej są na rynku 🙂 ) oraz oczywiście JavaScript dla aplikacji działających w przeglądarce.

Jak nie trudno się domyśleć, największym problem jest tutaj mnogość technologii. Chcąc dotrzeć do naszych użytkowników na wszystkich platformach, musimy de facto stworzyć oraz utrzymywać kilka mocno różniących się od siebie projektów. Do tego dbać o ich spójność a co za tym idzie poświęcać na to mnóstwo czasu i zasobów.

Aplikacje hybrydowe – „write once, run anywhere”

Aplikacje hybrydowe, podobnie jak aplikacje PWA, są tworzone przy użyciu stosu HTML-JS-CSS, jednak są one umieszczane w sklepach z aplikacjami. Jest to możliwe dzięki wykorzystaniu frameworków, które odpowiednio „pakują” aplikację i wysyłają je do App Store’ów. Przykładami takich frameworków są Ionic lub Flutter. W tym przypadku to co najczęściej widzimy na ekranie naszego urządzenia jest strona internetowa wyświetlona przy użyciu WebView.

Minusem takiego rozwiązania jest konieczność stworzenia naszej aplikacji tak, aby działała „satysfakcjonująco” dobrze ma wszystkich platformach. Do tego jesteśmy zależni od frameworka działającego pomiędzy naszą aplikacją a produktem docelowym na specyficzną platformę. W przypadku bardziej rozbudowanych aplikacji ich wydajność również nie jest zbyt wysoka. Pamiętać należy również o tym, iż taka aplikacja musi przejść weryfikację sklepu, aby mogła się w nim pojawić.

React Native – „learn once, write anywhere”

W tym przypadku aplikacje również tworzone są przy użyciu standardowego stosu front-end’owego oraz stworzona aplikacja trafia do App Store’a. Tworzymy tutaj jednak jedną aplikację per platforma. Czyli podobnie jak w przypadku aplikacji natywnych. Z tą różnicą, iż korzystamy cały czas z tej samej technologii. Wydajność takich aplikacji jest niemal taka sama jak aplikacji natywnych (piszemy w końcu pod konkretną platformą). W dalszym ciągu mamy jednak kilka projektów do zarządzania.

PWA – najnowszy gracz w świecie mobilnym

Najważniejszą różnicą między wszystkimi wymienionymi sposobami tworzenia aplikacji a PWA jest fakt, iż aplikacje PWA nie pojawiają się w sklepie danej platformy. Początkowo może to brzmieć jak coś negatywnego – przecież wszystkie nasze aplikacje ściągamy z App Store. Jednak po dokładniejszej analizie możemy dojść do nieco innych wniosków:

Benefity

Zróbmy krótkie podsumowanie tego, czemu jako developerzy powinniśmy zainteresować się PWA:

Kluczowe założenia

Na samym początku tego artykułu napisałem, że PWA jest zbiorem dobrych praktyk. Teraz, gdy mamy już większe zrozumienie tego czym są aplikacje PWA, poznajmy jej kluczowe założenia:

Jedną z najważniejszych rzeczy z powyższej listy jest możliwość pracy offline. Jako, że technologią umożliwiającą stronie internetowej pracę offline jest tzw. Service Worker, implikuje to stwierdzenie, że Service Worker jest obowiązkową częścią każdej aplikacji PWA.

Na temat Service Workers powstanie oddzielny, szczegółowy wpis, dlatego przedstawię tutaj jedynie kilka kluczowych zagadnień dotyczących tej technologii.

Uwaga!

Nie należy mylić Service Workers z Web Workers. Mają one dwa, zupełnie inne zastosowania.

Service Worker jest plikiem JavaScript, który pełni rolę pośrednika (proxy) pomiędzy aplikacją a siecią. Dzięki temu mamy możliwość zapisywania (cache’owania) zawartości aplikacji (dostęp offline) jak również przyśpieszamy renderowanie. Service Worker działa w tle naszej aplikacji i jest niezależny od głównej logiki oraz nie wymaga żadnych elementów UI.

Service Worker nie jest dostępny podczas pierwszego odwiedzenia strony internetowej. Wchodząc po raz pierwszy na określoną stronę w technologi PWA, nie zobaczymy od razu okna z propozycją instalacji. Dzieje się tak, ponieważ podczas pierwszego uruchomienia strony Service Worker musi się zainstalować i dopiero kolejne przerenderowanie strony odpali nam Service Worker’a.

Drugą obowiązkową rzeczą o której musimy pamiętać podczas tworzenia PWA jest app manifest. Jest to zwykły plik .json w którym umieszczamy najważniejsze informacje na temat naszej aplikacji. Informacje te są wykorzystywane przez urządzenie użytkownika w celu poprawnego renderowania naszej aplikacji na ekranie. Plik ten zawiera informacje takie jak:

Przykładowo nasz plik może wyglądać następująco:

{
  "name": "Perfect App",
  "short_name": "Perfect",
  "description": "Perfect Progressive Web App",
  "icons": [
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "orientation": "portrait",
  "display": "standalone",
  "background_color": "#FFFFFF",
  "theme_color": "#000000"
}

Bariery i wyzwania

Mimo że PWA, czyli Progressive Web Apps, oferują wiele zalet, jak lepsza wydajność, oszczędność danych, czy dostęp offline, towarzyszą im też pewne bariery i wyzwania, które mogą wpływać na ich rozwój i adaptację. Niektóre z najbardziej znaczących przeszkód omówiono poniżej.

Niespójność między platformami i przeglądarkami

Pierwszą i być może najbardziej oczywistą przeszkodą dla PWA jest różnica w obsłudze technologii PWA przez różne przeglądarki i systemy operacyjne. Na przykład, Safari na iOS obsługuje tylko podstawowy zestaw funkcji PWA, podczas gdy Chrome na Androidzie obsługuje praktycznie wszystko. W rezultacie, tworzenie PWA, które działa jednolicie na wszystkich platformach, może być trudne.

Brak pełnego dostępu do API urządzenia

Chociaż PWA zyskały dostęp do wielu funkcji urządzeń, takich jak notyfikacje push, są nadal ograniczenia dotyczące pełnego dostępu do API urządzenia. To może utrudniać tworzenie aplikacji, które w pełni wykorzystują możliwości urządzenia, takie jak interfejsy Bluetooth czy NFC.

Trudności z odkrywalnością

Tradycyjne aplikacje mobilne są łatwe do znalezienia i pobrania z dedykowanych sklepów z aplikacjami, takich jak Google Play czy App Store. PWA nie mają takiej widoczności, co sprawia, że mogą być trudniejsze do odkrycia dla użytkowników. Co więcej, niektóre sklepy z aplikacjami, takie jak App Store, mają restrykcyjne polityki dotyczące PWA.

Aktualizacje i utrzymanie

Ponieważ PWA są z natury rozproszone, aktualizacje i utrzymanie mogą być trudniejsze w porównaniu do tradycyjnych aplikacji mobilnych. Dla przykładu, w przypadku problemów z bezpieczeństwem, aktualizacja PWA może wymagać więcej czasu i zasobów.

Przekonanie użytkowników

Wiele osób jest przyzwyczajonych do korzystania z tradycyjnych aplikacji mobilnych i może nie być świadomych zalet PWA. Może to stanowić barierę dla adopcji PWA, zwłaszcza dla firm, które muszą przekonać użytkowników do przejścia na nową platformę.

Podsumowanie

Mam nadzieję, że udało mi się w tym wpisie wyjaśnić wszystkim zainteresowanym czym jest PWA i jakimi zasadami się kieruje. Jako,, że jest to tylko wstęp do Progressive Web Apps – wpis ten zawiera informacje czysto teoretyczne. Już niedługo na łamach frontstack.pl pojawią się kolejne wpisy związane z PWA, przede wszystkim wpis poświęcony Service Workers oraz tutorial obrazujący jak zbudować w pełni działającą aplikację PWA.