Dziś krótko o modnym zagadnieniu – Progressive Web Apps. Czym to jest? Skąd się wzięło? Czemu jest fajne, a może fajne nie jest?
FAKT 1:
Coraz więcej ludzi korzysta z tabletów, smartfonów – najogólniej mówiąc internetu w formie mobilnej. Przyczyny są jasne, wiemy, że taka tendencja na pewno będzie się utrzymywać długi czas. Stąd się biorą te tryliardy apek na Google Play.
FAKT 2:
A teraz przyznajcie się, z ilu apek regularnie korzystacie? No właśnie. Ja policzę na palcach jednej ręki regularnie odpalane aplikacje, dwóch rąk – od potrzeby do potrzeby. Zauważamy wzrastające tempo pojawiania się nowych aplikacji przy jednoczesnym mniejszym zainteresowaniu na ściąganie jakichkolwiek apek.
PROBLEM:
Rynek mobilny jest mega istotny w biznesie. Obecne strony internetowe z definicji muszą być responsywne. Nie ma żadnego 'ale’. Biznes chcąc dostosować się do klimatu zaczął produkować tony aplikacji mobilnych, jednak to rozwiązanie okazuje się ślepą uliczką. Niezwykle ciężko jest przebić się do ludzi z nowym mobilnym produktem, wybić ponad morze innych aplikacji, koniec końców – zarobić na siebie.
ROZWIĄZANIE:
I tu dochodzimy do sedna. Google wymyśliło rozwiązanie problemu – Progressive Web Apps, czyli tzw. aplikacje progresywne. Super brzmi, pewnie ładnie wygląda w CV, ale co to jest?
“A Progressive Web App uses modern web capabilities to deliver an app-like user experience.” – author Google
Po polsku – wyobraźcie sobie, że korzystacie ze swoich aplikacji mobilnych, ale w przeglądarce. PWA to hybryda, combo tego, co dobre w przeglądarkach z tym, co dobre w aplikacjach mobilnych.
Uwaga!
- Działasz w przeglądarce, choć tego na pierwszy rzut oka nie widzisz, bo…
- Nie widzisz adresu URL, czujesz ten mobilny UX, pełne RWD.
- Masz normalny skrót na pulpicie.
- Offline też możesz jakoś zadziałać, choć oczywiście w ograniczonym zakresie.
- Aplikacja działa Ci płynnie i szybko.
- Aplikacja działa tak samo w każdej cywilizowanej przeglądarce (Chrome/Opera/Firefox).
- Aplikacja jest bezpieczna – wymagany jest protokół HTTPS.
- Aplikacja wysyła Ci powiadomienia PUSH, nawet wtedy, kiedy strona jest zamknięta.
Ot tym są właśnie aplikacje progresywne. Taka magia!
Powyżej wymieniłam tylko kilka głównych cech PWA. Jeśli chcecie poznać wszystkie wymagania stawiane tym aplikacjom – kliknijcie TUTAJ. Pod tym linkiem znajdziecie długą checklistę PWA od autora pana Google.
Oczywiście to, czy możesz skorzystać ze wszystkich dobroci PWA, zależy od przeglądarki, w której ją uruchamiasz. Obecnie technologia obsługiwana jest przez Chrome, Operę oraz Firefoxa.
PRZYKŁAD
Trochę aplikacji typu PWA znajdziecie TUTAJ.
Na przykład wchodzicie sobie legalnie na stronkę http://pokedex.org
Jeśli wejdziecie na tą stronę 2 razy w ciągu 5 minut, pojawi się Wam komunikat o możliwości dodania aplikacji do home screen (tzw. web app install banner). Możecie też w menu wybrać takową opcję.
Po dodaniu na naszym home screen pojawia się taka super ikonka. Klikając na nią wchodzimy niby do przeglądarki, jednak nasz widok troszkę różni się od poprzedniego:
Co do działania offline – jakoś nie mogłam wymusić na aplikacji pokazania komunikatu o braku dostępu do internetu. Niemniej jednak apka działała normalnie – uwierzcie mi na słowo albo sami sprawdźcie
JAK TO DZIAŁA?
Krótko i zwięźle o teorii działania PWA:
Od razu przy pierwszym wejściu na stronę PWA instaluje się Service Worker. On z kolei zapisuje stronę (a raczej jej „skorupkę”) w pamięci podręcznej przeglądarki. Stąd bierze się szybkie działanie tego potwora (strona przy kolejnych wejściach nie musi na nowo zaciągać się z internetu). Więcej o cache w PWA TUTAJ. Po dodaniu strony do ekranu głównego, tworzy się skrót do strony na pulpicie, który wygląda identycznie jak skróty do standardowych aplikacji. Dzięki ustawieniom w Web App Manifest po otworzeniu strony ze skrótu aplikacja wygląda jak każda inna – bez paska URL. Nie wiesz, że jesteś w przeglądarce.
W skrócie, technicznie, PWA korzysta z:
- Service Workers
Czyli proxy między siecią a przeglądarką. Z technicznego punktu widzenia to plik JS, który sobie działa w tle. Kontroluje zapytania – przechwytuje wszystkie żądania HTTP i potrafi odpowiednio obsłużyć niepowodzenia (praca offline). Od autora zależą jego konkretne funkcje. W aplikacjach PWA service worker umożliwia notyfikacje push, synchronizację aplikacji w tle. Dzięki temu nasza strona jest cały czas aktualna lub, w wersji offline, jest zgodna z ostatnią aktualizacją. Co więcej, właśnie ta technologia odpowiada też za zapisywanie strony w pamięci podręcznej przeglądarki. Dobre, przystępne artykuły o działaniu SW znajdziesz TUTAJ i TUTAJ.
Plik JSON, który definiuje sposób wyświetlania się aplikacji użytkownikowi. Odpowiada np. za skrót na home screen, ikonę, początkową orientację, startowy URL, nazwę apki, ukrywanie paska URL (full screen mode), definiuje splash screen. Sprawia, że strona wygląda jak aplikacja.
Koncepcja projektowania aplikacji. Polega na tym, aby podczas pierwszego ładowania aplikacji ściągnąć podstawową „skorupkę” aplikacji (podstawowy CSS, HTML, JS wymagany do uruchomienia UI). Następnie zapisuje się tę skorupkę za pomocą Service Worker do cache przeglądarki. Na końcu ściąga content, treść strony. Ona też updatuje się dynamicznie w zależności od tego, co robi użytkownik. W przypadku pracy offline user widzi tylko skorupkę, bez treści. Najważniejsze, że widzi cokolwiek.
ZASTOSOWANIE
- Strony, które wymagają częstych aktualizacji (np. portale informacyjne).
- Strony, na których przyda się funkcja notyfikacji push (np. sklepy internetowe i opcje śledzenia promocji).
- Jakakolwiek apka, w której chcemy, aby użytkownicy do niej często wracali.
PODSUMOWANIE
Myślę, że koncepcja PWA jest przyszłością mobilnego świata. Jednocześnie sam mechanizm budowania takich aplikacji nie wydaje się idealny, raczej nie jest też ostatecznym rozwiązaniem wszelakich bólów internetu. Pracuję teraz nad PWA, pewnie niedługo podzielę się z Wami kodem oraz głębszymi refleksami nad apką.
Tona źródeł z dodatkowymi informacjami na temat PWA: Progressive Web Apps Directory: The Best Collection of Resources.
Warto odwiedzić też Smashing Magazine KLIK!. Mega artykuły pełne teorii oraz kodu: część pierwsza KLIK!, część druga KLIK!. Oczywiście link do strony PWA autora pana Google też musi być: KLIK!. Sporo mięsistej teorii: KLIK!, KLIK!. Artykuł w formie wywiadu, a raczej dialogu o tym, co nas cieszy, a co boli w PWA: KLIK!. Niesamowity przewodnik po PWA od A do Z: KLIK!. Statystyki: KLIK!. Kilka super przykładów PWA: KLIK!. PWA: Everything You Need to Know.
Na blogu piecioshka.pl pojawił się artykuł, w którym Piotr Kowalski przerabia swoją stronę na aplikację typu PWA – KLIK! – polecam!
Warto też znać narzędzie PWABuilder
