Technologie i narzędzia dla PWA

W poprzednim artykule na temat PWA przedstawiliśmy zalety i wady tego rozwiązania. Nadszedł więc czas, żeby bliżej przyjrzeć się najpopularniejszym technologiom, w których tworzone są aplikacje progresywne.

24 kwietnia 2019

PWA

Nowoczesne strony internetowe tworzone są przy użyciu frameworków i bibliotek JavaScript takich jak Angular, React.js czy Vue.js. Rozwiązania te są także wykorzystywane przy budowaniu PWA, dlatego pokrótce opiszę każde z nich.

Angular

to framework OpenSource ułatwiający budowanie aplikacji typu SPA i PWA, wspierany i rozwijany przez Google. Jest to popularny sposób do tworzenia aplikacji działających w każdej przeglądarce na urządzeniu mobilnym i komputerze. Angular to przepisanie w języku TypeScript najlepszych części AngularJS – pierwotnej wersji, która powstała w 2009 roku. Jest to najpotężniejszy framework, który jednocześnie może zostać uznany za zbyt złożony, jeśli chcemy zbudować prostą aplikację progresywną.

React.js

to biblioteka JavaScript stworzona i rozwijana przez programistów Facebooka. Jedną z cech wyróżniających Reacta jest język JSX (JavaScript XML), czyli nakładka na JavaScript pozwalająca na umieszczanie kodu HTML w pliku JavaScript. React to zdecydowanie jedno z najpopularniejszych rozwiązań w pracy front-end developera.

Do tworzenia PWA, godny polecenia jest także generator stron statycznych Gatsby.js. Jest to framework zbudowany w oparciu o bibliotekę React.js oraz GraphQL. Będzie doskonałym narzędziem dla deweloperów korzystających z Reacta, które przyspieszy ich pracę. W wersji produkcyjnej Gatsby.js tworzy czyste pliki HTML, co umożliwia szybkie i właściwe pozycjonowanie strony. Posiada wiele gotowych rozwiązań i pluginów. Zmienienie strony statycznej w dostępną offline aplikację PWA wymaga tylko jednego pluginu i jest bardzo proste .

Vue.js

to zdobywający coraz większą popularność framework JavaScript. Programistów, szczególnie tych, którzy dopiero uczą się i poznają poszczególne technologie, do tego rozwiązania przyciąga prostota i tzw. niski próg wejścia w stosunku do Reacta czy Angulara oraz to, że Vue.js będzie odpowiedni zarówno dla prostych, jak i bardziej skomplikowanych i rozbudowanych aplikacji internetowych.

Do wyboru mamy także:

Polymer

czyli bibliotekę JavaScript stworzoną przez Google, zbudowaną w oparciu o Web Components API. Dostarcza zestaw narzędzi, który ma na celu szybsze i łatwiejsze tworzenie komponentów. W odniesieniu do PWA, Polymer umożliwia szybkie tworzenie aplikacji i ominięcie niestandardowej konfiguracji. Często stosowana jest do tworzenia prototypów - można skorzystać z szablonu dostarczonego przez Polymer, aby skonfigurować projekt.

Knockout

czyli bibliotekę JavaScript, która świetnie nadaje się do obsługi powiązań MVVM między HTML i JavaScript. Jej główną zaletą jest to, że mało waży, a mimo to zapewnia dużą funkcjonalność. Będzie dobrym wyborem, jeśli potrzebujemy lekkiej, ale funkcjonalnej aplikacji PWA. Bibliotek ta często używana do mniejszych projektów.

Webpack

czyli narzędzie niezbędne do tworzenia niestandardowych aplikacji progresywnych. Jest to tzw. bundler, który umożliwia pakowanie zasobów, które dzięki temu będą ładowane znacznie szybciej. Webpack usprawnia zarządzanie zależnościami - wychwytuje je i tworzy dla nich statycznie “paczki” z kodem, które są potem ładowane. Webpack może dołączać różne formaty, np. grafiki JPG, PNG, pliki CSS itd., odpowiednio konwertując je w taki sposób, aby były traktowane jako obiekty JavaScript.

Lighthouse

czyli narzędzie Google do monitorowania wydajności PWA. Jest to wtyczka do Chrome, dzięki której możemy przeprowadzać testy i zbadać takie zagadnienia jak m.in. czy aplikacja działa offline lub przy słabym połączeniu z internetem, jaką posiada szybkość ładowania, czy połączenie sieciowe jest bezpieczne, czy użytkownik jest poproszony o dodanie aplikacji do ekranu głównego.

Bez względu na to, które z rozwiązań wybierzemy, do stworzenia aplikacji PWA potrzebne będą także:

manifest.json

Web App Manifest, czyli plik, który zawiera informacje o aplikacji, takie jak nazwa, ikonki (np. ikonka, która będzie widoczna po przypisaniu do ekranu głównego) czy ukrycie paska URL i przycisków nawigacyjnych przeglądarki.

Service Worker

mechanizm wprowadzony w przeglądarkach, pośredniczący między aplikacją a przeglądarką, dzięki któremu strona działa w trybie offline. Umożliwia przechowywanie żądań sieciowych, aktualizowanie zasobów na serwerze oraz zapisywanie plików aplikacji do cache. Mechanizm ten pozwala też na implementację push notifications.

HTTPS

ze względów bezpieczeństwa wszystkie aplikacje PWA muszą korzystać z protokołu HTTPS.

Mówiąc o PWA, trzeba także wspomnieć o konieczności zwrócenia uwagi na responsywność budowanej aplikacji - konieczne jest dostosowywanie do ekranu użytkownika, niezależnie od urządzenia, z którego korzysta. Przed rozpoczęciem pracy nad własną aplikacją PWA warto także zapoznać się z Checklistą PWA stworzoną przez Google, zawierającą wszystkie wymagania stawiane aplikacjom tego typu: https://developers.google.com/web/progressive-web-apps/checklist.

Bazując na nowoczesnych technologiach oraz pamiętając o takich elementach jak plik manifestu, Service Worker i HTTPS możemy stworzyć aplikację progresywną, która sprosta oczekiwaniom użytkowników. Z powyższych narzędzi możemy wybrać stack technologiczny dostosowany do naszych potrzeb.