W skrócie – czym jest technologia PWA?

Progressive Web Apps (PWA) to nic innego jak aplikacje webowe, lecz zbudowane (oczywiście w technologiach webowych) w taki sposób, by przypominały swą funkcjonalnością i wyglądem multiplatformowe aplikacje natywne, które mogą być również używane jak zwykłe aplikacje webowe – w kartach przeglądarek. To aplikacje potrafiące w pełni wykorzystać możliwości współczesnych przeglądarek, np. dzięki cache’owaniu (czyli przechowywaniu części danych w pamięci podręcznej) potrafią po części działać bez połączenia z internetem. Potrafią także korzystać z czujników czy też aparatu urządzenia mobilnego lub dodatkowo mogą wysyłać powiadomienia push. Aplikacja zgodna z PWA, powinna prawidłowo zadziałać na urządzeniu z różnymi rozmiarami ekranów, jak i różnymi systemami operacyjnymi, jedynym warunkiem jest posiadanie aktualnej wersji jednej z popularnych przeglądarek internetowych.

Wykres pochodzenie ruchu w internecie Desktop vs Mobile 2009-2020

Dzięki masowemu wykorzystywaniu smartfonów i tabletów, do roku 2016 obserwowano w internecie znaczny wzrost ruchu pochodzącego z urządzeń mobilnych. Dodatkowo, przez ostatnie lata dotarliśmy do granicy, gdzie już większość ruchu generowana jest właśnie z urządzeń mobilnych, a nie laptopów czy komputerów stacjonarnych. W związku ze zmianami przyzwyczajeń użytkowników, firma Google stworzyła i zaprezentowała pojęcie PWA.
W rzeczywistości pomysł PWA wcale nie zrodził się w Google, lecz pomysłodawcą tej idei był Steve Jobs, który już w 2007 r. przedstawił światu koncept aplikacji webowej wyglądającej jak zwykłe aplikacje instalowane na urządzeniu mobilnym. 

Cechy aplikacji zgodnych z PWA wg Google

  • Fast & Reliable – aplikacja powinna być zarówno szybka jak i niezawodna. Musi zatem być na tyle zoptymalizowana, by działała jak aplikacja natywna i nawet przy słabych połączeniach internetowych, użytkownik nie powinien odczuwać problemów z powolną pracą lub wczytywaniem, a w przypadku chwilowego braku internetu powinna przynajmniej w ograniczonym stopniu działać bezustannie, tak samo jak inne zainstalowane aplikacje natywne. 
  • Installable – oznacza to, że strona internetowa powinna normalnie działać w kartach przeglądarki, ale musi także mieć opcję instalacji na urządzeniach, tak jak aplikacje mobilne. Zainstalowana aplikacja PWA, musi więc zachowywać się jak inne natywne aplikacje. Na przykład posiadać skrót i uruchamiać się z pulpitu urządzenia, działać we własnym oknie aplikacji, bez widocznego interfejsu przeglądarki internetowej (np. paska zakładek czy paska adresu).
  • Mobile & Desktop –  aplikacje zgodne z PWA muszą być zgodne z technikami RWD (Responsive Web Desing) oraz muszą działać na różnych rozmiarach ekranów, ale także być kompatybilne z różnymi systemami.

Progressive Web Apps z perspektywy użytkownika

Szybkość, wszechstronność i wygoda

screen - jak chcesz otworzyć ten plikJeżeli spojrzymy na PWA z perspektywy użytkownika, widzimy wiele zalet. Wg Google, aplikacje takie powinny być ładowane w tle, więc w praktyce widoki ładowane są nawet poniżej 1 sekundy; nie powinniśmy w takich aplikacjach odnaleźć ciężkich i długo ładujących się skryptów. PWA tworzone są zazwyczaj zgodnie z podejściem Mobile First, pobierają małą ilość danych – tak więc sprawdzą się również przy wolniejszych połączeniach internetowych. Wygoda pod względem uruchamiania – możliwość instalacji i używania tak samo jak innych natywnych pełnoekranowych aplikacji, lecz bez potrzeby aktualizacji. Otrzymywanie powiadomień push, dostęp do lokalizacji czy aparatu urządzenia – także jest jak najbardziej możliwe. Wszystko po to, aby doświadczenia użytkownika związane z korzystaniem z aplikacji były jak najlepsze.  

Przyszłość PWA – najbliższe zmiany

Microsoft wychodząc naprzeciw proponuje wprowadzić kilka istotnych zmian w Chromium, by uczynić aplikacje PWA jeszcze bardziej podobnymi aplikacjom natywnym.

Tworzenie skojarzeń domyślnych aplikacji

Zarówno na Windowsie, jak i na Androidzie, można spotkać się z sytuacją, iż po kliknięciu np. w dany plik system zapyta nas jaką aplikację ma teraz otworzyć. Wyświetli nam się wtedy lista skojarzonych i proponowanych programów. Obecnie, nie jest możliwe dodanie takich skojarzeń z aplikacjami PWA i taką właśnie zmianę proponuje wprowadzić Microsoft.

Kolejną ciekawą propozycją jest obsłużenie automatycznego startu aplikacji – za zgodą użytkownika – wraz ze startem systemu.
Więcej na ten temat można przeczytać na githubie: Run on OS Login | URL Protocol Handler.

AVOCADO Packing jako aplikacja PWA

Jeden z naszych systemów przeznaczony do kompleksowej obsługi procesów magazynowych (system typu WMS) – AVOCADO Packing – również jest aplikacją zgodną z koncepcją PWA.

AVOCADO Packing posiada wersję desktopową do zarządzania oraz wersję mobilną jako panel operatora magazynu – działające na różnych urządzeniach szybko i niezawodnie.
Operatorzy pracujący z naszymi systemami, w bardzo łatwy sposób obsługują realizację, np. dokumentów wydania czy też przyjęcia, dodatkowo mogą równolegle realizować kilka dokumentów wydania dzięki dokumentom kompletacji. Avocado Packing w połączeniu z Avocado Shipping oraz systemem typu ERP pomaga zautomatyzować procesy, zaczynając od regularnego pobierania dokumentów z systemów ERP, kończąc na generowaniu etykiet wysyłkowych, przy tym wszystkim narzucając operatorom marszrutę, która wyznacza optymalną ścieżkę pobrań towarów z magazynu.  

Oprócz możliwości instalacji, pracy na różnych ekranach oraz systemach, szybkości i niezawodności, nasz system ma także dostęp do aparatu urządzenia (np. w celu dodania zdjęć przyjmowanego na magazyn towaru lub też w przypadku konieczności dodania zdjęcia uszkodzonego towaru) oraz dostęp do skanerów kodów kreskowych (w smartphone’ach posiadających czytnik kodów kreskowych, np. „Zebra”).

AVOCADO Packing w wersji mobile


Więcej o systemie AVOCADO Packing przeczytasz tutaj.

Autor: Adrian Suder, Full-stack Developer  YOSI.PL/AVOCADO Soft
Źródła:
https://web.dev/what-are-pwas/
https://divante.com/pwabook/chapter/02-the-history-of-pwas.html
https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0
https://www.e-point.pl/
https://github.com/MicrosoftEdge/MSEdgeExplainers/