Progressive Web Apps a Accelerated Mobile Pages – czym się różnią?
Nie da się ukryć, że z roku na rok liczba mobilnych użytkowników rośnie. W samej Polsce na chwilę obecną (czyli w 2020 roku) znajdują się niemal 23 miliony posiadaczy mobilnego internetu.
Również na świecie liczby te są imponujące. Oto jak w 2019 prezentowały się dane o konsumentach mobilnego internetu:
Jak widać, liczby te są imponujące. Patrząc na tak dużą bazę potencjalnych odbiorców, warto dopasować swoją stronę do wymogów urządzeń mobilnych. Poniżej omówimy 2 z nich: Progressive Web App i Accelerated Mobile Pages.
PWA, czyli Progressive Web App.
Najłatwiej opisać Progressive Web App jako połączenie strony internetowej i aplikacji. Ta specyficzna aplikacja/strona, może, ale nie musi, naśladować zachowanie natywnej mobilnej aplikacji. Jednocześnie PWA doskonale działa w trybie offline – dzięki plikowi JavaScript, “Service Worker” (więcej o nim w dalszej części). Użytkownicy takiej aplikacji są w stanie umieścić skrót do niej na ekranie głównym lub pulpicie.
Niewątpliwym plusem PWA jest dostępność. Mogą być instalowane niemal niezależnie od systemu operacyjnego. Odciąża to developerów, którzy nie muszą tworzyć odrębnych aplikacji. Warto dodać, że nie trzeba pisać strony od zera czy rezygnować z używanego wcześniej frameworka. Dzięki temu PWA można wdrożyć na już działające strony jak i na zupełnie nowe.
Trochę historii Progressive Web App
Za ojca PWA uważa się samego Steve’a Jobsa. Już w 2007 roku, prezentująć pierwszy model iPhone’a Jobs mówił o tym, by programiści pisali aplikacje na iPhone’a używając standardowych technologii internetowych. Pomysł się jednak wówczas nie przyjął i dopiero w 2015 termin “Progressive Web App” został przedstawiony przez Frances Berriman i inżyniera Google Chrome, Alexa Russella.
Wymagania Progressive Web App
- obsługiwanie bezpiecznego połączenia HTTPS – niezbędny jest certyfikat SSL na danej domenie,
- responsywność. PWA w głównej mierze są skierowane do urządzeń mobilnych, dlatego to niezbędna cecha przy tworzeniu takiej aplikacji,
- posiadanie pliku Web App Manifest, czyli prostego pliku w formacie JSON. Informuje on przeglądarkę jak dana aplikacja powinna się zachowywać po zainstalowaniu,
- każda strona musi posiadać swój własny adres url,
- service worker, czyli plik JavaScript z instrukcjami jak PWA ma działać w trybie offline i online,
- strona powinna osiągnąć co najmniej 75% w narzędziu https://developers.google.com/web/tools/lighthouse. Większość stron powinna bez problemu spełnić wszystkie wymagania. Jednak jeśli tak nie będzie, błędy można łatwo naprawić – wszystkie są czytelnie i prosto opisane.
Service Worker
To kluczowy element aplikacji mobilnych, które chcą działać jako PWA. Pozwala on na rozszerzenie funkcjonalności aplikacji o funkcje dostępne w natywnych aplikacjach mobilnych. Działa on w tle, czyli wykonuje zaprogramowane operacje nawet po wyłączeniu aplikacji. Service Worker można określić jako pośrednika między aplikacją a siecią. Daje to możliwość cache’owania elementów, np. grafiki czy plików HTML, do wykorzystania ich podczas pracy offline jak i przyspieszenia działania aplikacji.
Dzięki temu, że Service Worker działa w osobnym wątku, nie ma on dostępu do elementów elementów DOM*, localStorage* i AJAX*.
Service Worker jest dostępny jedynie przy połączeniu HTTPS – wyjątkiem jest localhost.
Współpraca z przeglądarkami
Google – Chrome i Android
Już w 2015 roku dodawanie skrótu do witryny zgodnej z PWA zostało zaimplementowane w Chrome 42, a ulepszone w Chrome 57. Wersja 4.1+ Androida również wspiera pełną obsługę PWA.
Microsoft- Windows, Edge i Visual Studio
W 2017 roku Microsoft wprowadził PWA Builder. Skanuje on witryny i tworzy pełny manifest, śledzi także specyfikacje by upewnić się, że manifesty są zawsze aktualne.
Inne rozwiązanie do obsługi PWA to Sonarwhal. To w pełni dostosowywalne narzędzie open source do debugowania, a także skaner witryny do sprawdzania dostępności, wydajności i zabezpieczeń składników aplikacji PWA.
Także przeglądarka od Microsoftu, Edge, oferuje rozwiązania do PWA. Zestaw DevTools zapewnia inspekcję i debugowanie podstawowych technologii PWA, m.in usługowego procesu roboczego, interfejsu API pamięci podręcznej i IndexedDB.
Rozszerzenie VS Code programu Visual Studio dodaje fragmenty kodu i schemat JSON manifest.json do tworzenia PWA.
Apple – Safari i iOS
Od wersji 11.3 iOSa Web App Manifest i Service Worker są już dostępne. Nadal jednak brakuje kompatybilności ze starszymi urządzeniami.
Kompatybilność z frameworkami i bibliotekami JavaScript
PWA będzie dobrym rozwiązaniem przy aplikacjach napisanych z użyciem JavaScript, a także z różnymi bibliotekami czy frameworkami.
- Angular – wystarczy dodać parametr -service-worker, a także utworzyć plik manifest.json i podłączyć go w plikach HTML oraz w angular.json.
- React – wpisanie create-react-app automatycznie utworzy manifest.json i service-worker
- Vue.js – podczas tworzenia aplikacji z vue-cli istnieje opcja zaznaczenia stworzenia PWA. Gotowy service-worker i manifest.json można edytować wedle uznania
Plusy Progressive Web App
- Działanie w trybie offline
- PWA zapewnia programistom wspólny code-base. Tworząc PWA powstaje jedna aplikacja, która działa na wszystkich platformach :
- Desktop,
- iOS,
- Android.
- Różnice architektoniczne pomiędzy nimi nie zezwalają na współdzielenie kodu. Jednak w przypadku PWA funkcjonuje jedna platforma, czyli WEB. Pod nią pisany jest jeden, współdzielony kod.
- Również aktualizacje są znacznie ułatwione przy PWA. Jedyne co trzeba zrobić, to wgrać nowe pliki na serwer. Tylko tyle. Użytkownik uruchamiając aplikację otrzyma jej najnowszą wersję.
- W przyszłości PWA mogą być także źródłem oszczędności. Na chwilę obecną PWA nie jest w pełni przystosowane do zastąpienia aplikacji natywnych – to jednak może się jeszcze zmienić. Być może ograniczy to ilość pracy dla Android i iOS deweloperów?
AMP – Accelerated Mobile Pages
W 2015 roku Google Search Console pojawiła się opcja umożliwiająca włączenie przyspieszenie stron mobilnych – czyli właśnie AMP.
Accelerated Mobile Pages to technologia open source, opisująca sposób budowania stron internetowych opartych na statycznych treściach – czyli takich które mają się szybko renderować. Zastosowanie AMP ma zmniejszyć współczynnik odrzuceń spowodowany wolnym wczytywaniem się stron i treści, zarówno na komputerach jak i urządzeniach mobilnych.
Główne założenie AMP to ograniczenie użycia kodu JavaScript – to właśnie on odpowiada za największe spowolnienia ładowania strony. Uwagę za to skupiono na CSS i Web Components (czyli zestaw API przeglądarki, który umożliwia tworzenie niestandardowych elementów HTML).
Accelerated Mobile Pages – z czego się składa
Na AMP składają się 3 komponenty:
- AMP HTML – zbiór poleceń dla kodu HTML, co umożliwia tworzenie bogatych treści z wykorzystaniem podstawowego kodu i dostępnych rozszerzeń.
- AMP JavaScript – biblioteki JavaScript które zarządzają ładowaniem zawartości strony.
- AMP Cache – usługi hostingu walidacji stron AMP.
Jak działa AMP?
AMP działa niemal tak samo, jak każda inna strona oparta o HTML. Różnica polega na pewnych restrykcjach wybranych elementów kodu.
Plik HTML danej strony musi zawierać wszystkie zewnętrzne elementy. Muszą się także znaleźć znaczniki <amp-img>.
Jak bardzo jest więc skuteczne zastosowanie AMP? Google chwali się, że strony korzystające z tego rozwiązania ładuję od 15 do 85% szybciej niż strony bez AMP.
AMP działa poprzez wykorzystanie różnorakich elementów technicznych dostarczanych przez przeglądarki i serwery dzięki czemu zwiększa się szybkość ładowania stron co polepsza odczucia użytkowników.
Strony korzystające z AMP mogą być zapisane w chmurze bądź cache podmiotu trzeciego – np cache Google.
Google AMP Cache
Cache dla większości stron AMP jest dostarczany przez Google. W marcu 2017 do projektu dołączyło Cloudflare.
Google AMP Cache to dostępne dla każdego dokumenty AMP pochodzące z sieci.
By skorzystać z tej funkcji, dany adres URL AMP musi zostać otwarty z pamięci podręcznej, wykorzystując format URL pamięci podręcznej AMP. Gdy użytkownik zyskuje dostęp do tych treści z pamięci podręcznej, są one automatycznie aktualizowane, a nowa wersja jest udostępniana kolejnemu użytkownikowi.
Elementy adresu URL pamięci podręcznej AMP:
- Nazwa subdomeny – będą one zrozumiałe dla człowieka, gdy umożliwią to limity znaków i specyfikacje techniczne. Google AMP każdą subdomenę stworzy w oparciu o 4 kroki:
- Konwersja domeny z Punycode na UTF-8.
- Zamienienie każdego łącznika dwoma łącznikami, czyli “-” na “–”.
- Zamienienie każdej kropki na łącznik, czyli “.” na “-”.
- Konwersja na Punycode.
- Typ treści – dla dokumentu HTML AMP używa się treści typu “c”, dla obrazu “i”, a d;a czcionki “r”. Jeśli zasoby nie są zgodne z typami treści, Google zwraca błąd 404.
- Opcjonalny parametr “s” – gdy jest używany, usługa pobiera treści z pierwotnej lokalizacji, wykorzystująć TLS (Transport Layer Security).
- URI – Uniform Resource Identifier, czyli standard internetowy umożliwiający proste identyfikowanie zasobów sieciowych. Nie można w nim umieścić “http://” ani “https://”.
Pomimo, iż w większości przypadków nazwa subdomeny dla adresu URL przeprowadzona według powyższych kroków będzie zrozumiała dla człowieka, czasem może się zdarzyć wyjątek. By uniknąć takiej sytuacji, najlepszym wyjściem przy aplikacjach w wersjach produkcyjnych jest korzystanie z interfejsu Google AMP Cache URL API.
Warto dodać, że można też korzystać z interaktywnego narzędzia Using the Google AMP Cache na stronie amp.dev – będzie to najlepsze rozwiązanie dla rozwiązań nie przeznaczonych do produkcji.
Jak wygląda aktualizacja Google AMP Cache?
Gdy zostaje przesłane żądanie dokumentu AMP, pamięć podręczna automatycznie wysyła żądanie aktualizacji. Po zapisaniu treści w pamięci podręcznej następny użytkownik otrzymuje najnowszą wersję.
Pamięć podręczna działa zgodnie z modelem stale-while-revalidate, czyli nieaktualnym w czasie rewalidacji. Korzysta on z nagłówków pamięci podręcznej, takich jak Max-Age. Pomagają w określeniu, czy żądany dokument lub dane są nieaktualne. Gdy zostaje przesłane żądanie takiego zasobu, pobierana jest nowa kopia – a kolejny użytkownik otrzyma aktualną wersję.
By zmniejszyć obciążenie stron Google AMP Cache za aktualne uznaje każdy:
- dokument przez co najmniej 15 sekund,
- zasób przez co najmniej minutę.
Należy mieć jednak na uwadze, że wartości mogą zostać w przyszłości zmienione.
Jak wygląda optymalizacja i modyfikacja pamięci podręcznej?
Google AMP Cache korzysta z kilku sposobów optymalizacji i modyfikacji:
- sprawdza, czy treści są w formacie AMP i czy spełniają wszystkie warunki związane z wydajnością,
- w pamięci podręcznej zapisuje grafiki i czcionki, ale nie dokumenty AMP,
- ogranicza maksymalne wymiary grafik,
- przeprowadza transformacje, aby poprawić wydajność dostarczania grafik wykorzystujących tag amp-img:
- usuwa niewidoczne lub trudne do zauważenia dane,
- przeprowadza konwersję obrazów na mniejsze i lepiej dostosowane do komórek, np. konwersja PNG, JPEG i GIF na WebP,
- jeśli żądanie zawiera nagłówek Save-Data, jakość obrazu jest zmniejszana,
- generuje wersję obrazka o innych rozmiarach i dodaje atrybut srcset, by przesyłać obrazy o wielkości, która nie spowolni działania przeglądarki.
- korzysta z protokołów internetowych – SPDY i HTTP/2 oraz przesyła dane bezpiecznym kanałem – HTTPS,
- sanityzuje dokumenty AMP, aby zapobiec atakom XSS bazujących na niepoprawnie zamkniętych komentarzach czy tagach HTML.
Jak wygląda sanityzacja kodu HTML?
Wszystkie dokumenty są przepisywane, aby unormować analizę kodu, wykonując niektóre czynności:
- usuwa wszystkie komentarze HTML,
- nazwy atrybutów i tagów zapisywane są małymi literami,
- umieszcza w cudzysłowie wartości atrybutów i zapisuje je ze zmianą znaczenia,
- poza pustymi elementami HTML5 wszystkie tagi są zamykane,
- usuwane są białe znaki w tagach,
- stosowane są elementy zmieniające znaczenie znaków,
- upraszcza się zakodowane znaki tekstowe używając równoznacznych znaków UTF-8,
- elementy które mogą pojawić wyłącznie w sekcji body, pojawiają się tylko tam,
- aby linki wychodzące po przesłaniu dokumentu z Google AMP Cache nadal działały, zmieniane są na bezwzględne.
Wtyczka AMP for WordPress
Użytkownicy korzystający z WordPressa mogą sięgnąć po wtyczkę AMP for WordPress. Do pobrania tutaj: https://pl.wordpress.org/plugins/amp/. Więcej informacji znajdziesz na oficjalniej stronie: https://amp-wp.org/.
Podsumowanie różnic pomiędzy Progressive Web Apps a Accelerated Mobile Pages
Progressive Web App to połączenie strony internetowej i aplikacji. Może ona, ale nie musi, naśladować zachowanie natywnej mobilnej aplikacji. Jednocześnie PWA działa w trybie offline. Użytkownicy takiej aplikacji są w stanie umieścić na ekranie głównym lub pulpicie skrót do niej.
Z kolei Accelerated Mobile Pages to technologia która opisuje sposób budowania stron internetowych opartych na statycznych treściach. Celem AMP jest natychmiastowe wyświetlenie treści użytkownikom a przez to zmniejszenie współczynnika odrzuceń spowodowanym zbyt wolnym wczytywaniem treści.
SŁOWNICZEK
elementy DOM – Document Object Model, DOM (Model obiektowy dokumentu). DOM łączy stronę ze skryptami lub językami programowania API (interfejs programistyczny aplikacji) dla dokumentów HTML i XML. Odpowiada za:
- reprezentację struktury dokumentu
- omówienie, jak z poziomu skryptu odnosić się do struktury dokumentu.
localStorage – umożliwia dostęp do lokalnego obiektu Storage. Dane tu przechowywane nie mają daty ważności.
AJAX – technika tworzenia aplikacji internetowych, w których interakcja użytkownika z serwerem odbywa się bez przeładowywania całego dokumentu, w sposób asynchroniczny. Ma to umożliwiać bardziej dynamiczną interakcję z użytkownikiem niż w tradycyjnym modelu, w którym każde żądanie nowych danych wiąże się z przesłaniem całej strony HTML.
Jestem pracownikiem działu marketingu i grafikiem w MSERWIS.pl i Domeny.tv. Odpowiadam za tworzenie treści wizualnych wspierających działania marketingowe firmy. Projektuję grafiki do materiałów marketingowych i redaguję teksty zarówno w języku polskim, jak i angielskim.
Współpracuję z zespołem marketingu, aby zaprojektować odpowiednie treści wizualne, które są zgodne z tożsamością naszych marek. Posiadam wysokie umiejętności projektowania graficznego i jestem na bieżąco z trendami i technologiami w branży, żeby zapewnić firmie skuteczność i trafność działań marketingowych
Polub nas na Facebooku
Komentarze