PWA vs. AMP: co jest lepsze i czym się od siebie różnią?

Około dekadę po wprowadzeniu pierwszego iPhone'a sieć mobilna wreszcie nadąża za stylem życia swoich użytkowników. Uszczypnięcie i powiększenie zostały usunięte przez responsywne strony. AMP i natywne aplikacje walczą z długimi czasami ładowania…

Ale nadal istnieje główny problem w przypadku internetu mobilnego: zaangażowanie. 1000 najlepszych witryn mobilnych dociera do 4 razy więcej osób niż 1000 najlepszych aplikacji natywnych. Jednak te witryny angażują użytkowników średnio 20 razy krócej niż aplikacje mobilne.

Wygląda na to, że mobilne strony internetowe mogą przyciągać odwiedzających, ale nie zatrzymują ich. Jedną z nowszych technologii rozwiązujących ten problem są progresywne aplikacje internetowe.

Co to są progresywne aplikacje internetowe?

Progresywne aplikacje internetowe to mobilne witryny internetowe zaprojektowane tak, aby wyglądały, działały i działały tak, jak robią to natywne aplikacje mobilne. Użytkownicy napotykają je w przeglądarce, tak jak w każdej witrynie mobilnej. Po wejściu w interakcję z tą witryną użytkownik jest proszony o zainstalowanie aplikacji internetowej na swoim urządzeniu. Jeśli zdecydują się zainstalować, aplikacja zostanie pobrana na urządzenie w taki sam sposób, jak natywna aplikacja.

Termin „progresywne aplikacje internetowe” został ukuty przez Google w 2015 roku. Firma twierdzi, że progresywne aplikacje internetowe spełniają trzy kryteria:

• Niezawodny — ładuj natychmiast i nigdy nie pokazuj downazaura, nawet w niepewnych warunkach sieciowych.
• Szybko – szybko reaguj na interakcje użytkownika dzięki jedwabiście płynnym animacjom i bez szarpnięć podczas przewijania.
• Angażowanie — poczuj się jak naturalna aplikacja na urządzeniu, zapewniająca wciągające wrażenia użytkownika.

Po spełnieniu tych wymagań mobilna aplikacja internetowa może być oferowana użytkownikom do pobrania. Zanim zagłębimy się w progresywne aplikacje internetowe, wróćmy na chwilę do powierzchni i zdefiniujmy aplikacje natywne oraz inną technologię przyspieszającą internet mobilny, Accelerated Mobile Pages (AMP).

Co to jest aplikacja natywna?

Aplikacje natywne są instalowane za pośrednictwem platformy handlowej, takiej jak App Store lub Google Play i są wyświetlane jako ikony na ekranie głównym urządzenia. Zostały zaprojektowane specjalnie dla konkretnego urządzenia i mogą korzystać ze wszystkich jego funkcji, takich jak GPS, aparat, lista kontaktów i inne. Są to aplikacje, które prawdopodobnie znajdują się obecnie na Twoim urządzeniu, takie jak Mapy Google, Gmail lub Instagram.

Co to jest AMP?

Projekt przyspieszonych stron mobilnych typu open source (w skrócie AMP) umożliwia programistom tworzenie stron internetowych, które ładują się niemal natychmiast, za pomocą unikalnego języka kodowania. Ten język jest uproszczoną wersją HTML i CSS, która ogranicza użycie JavaScript. Te strony są hostowane w sieci CDN, która dostarcza buforowaną wersję strony, gdy jest ona odwiedzana przez użytkownika.

Progresywne aplikacje internetowe a aplikacje natywne

Aplikacje natywne oferują natychmiastowe i bezproblemowe wrażenia użytkownika i są obsługiwane przez duże sklepy, takie jak App Store i Google Play, dlaczego więc wybierać progresywną aplikację internetową zamiast tradycyjnej wersji natywnej? W artykule dla Forbesa Andrew Gazdecki przedstawia wyjaśnienie na wysokim poziomie:

Witryny mobilne są szybkie i łatwe do uzyskania, ale zazwyczaj są mniej przyjemne z punktu widzenia użytkownika. Aplikacje natywne zapewniają najlepsze wrażenia użytkownika, ale są ograniczone do niektórych urządzeń i mają wysokie bariery do przyjęcia. Aplikacje natywne wymagają pobrania, co oznacza najpierw wygenerowanie znacznego poparcia ze strony konsumentów i utratę korzyści z zachowań impulsywnych. Pomiędzy tymi opcjami znajduje się najnowsze rozwiązanie mobilne: PWA.

Aby uzyskać dokładniejsze wyjaśnienie, spójrzmy na niektóre z największych różnic między aplikacjami natywnymi a progresywnymi aplikacjami internetowymi:

• Wykorzystanie funkcji: Obecnie aplikacje internetowe mogą korzystać z funkcji urządzenia, ale aplikacje natywne mogą to robić w większym stopniu. Rzeczy takie jak GPS, powiadomienia push i gesty są łatwiej dostępne w natywnej aplikacji.
• Ograniczenia treści: aby Twoja aplikacja mogła konkurować w Google Play lub App Store, musisz podporządkować się regułom rynku. Ograniczenia dotyczące treści i opłaty utrudniają niektórym witrynom tworzenie udanych aplikacji natywnych. Jednak w przypadku aplikacji internetowych nie są nakładane ani ograniczenia dotyczące treści, ani opłaty, co ułatwia każdemu tworzenie aplikacji, niezależnie od rodzaju zawartości.
• Łączność offline: tutaj przewagę mają aplikacje natywne, które oferują pełniejsze buforowanie niż progresywne aplikacje internetowe wbudowane w HTML5. Jeśli Twoja aplikacja musi działać w trybie offline, obecnie lepszym wyborem jest natywna.
• Instalacja: Instalacja aplikacji natywnej wymaga podjęcia znaczących działań w imieniu użytkownika. Muszą otworzyć rynek i wyszukać aplikację, a następnie pobrać. Musi być poważny zamiar. W przypadku instalacji progresywnej aplikacji internetowej jest znacznie mniej tarcia. Dodanie go do urządzenia przypomina tworzenie zakładki na ekranie głównym. Łatwiej jest zainstalować progresywną aplikację internetową, ale proces jest znacznie mniej znany, co może utrudniać wczesne wdrożenie.

• Szybkość: Obecnie progresywne aplikacje internetowe pozostają w tyle za aplikacjami natywnymi. Jednak ciągle zamykają lukę. Jest to szczególnie prawdziwe, gdy weźmiesz pod uwagę następne porównanie.

Progresywne aplikacje internetowe a AMP

Ludzie tacy jak Gazdecki wierzą, że progresywne aplikacje internetowe w końcu zastąpią aplikacje natywne, ale co z AMP? Gdzie tu wkraczają przyspieszone strony mobilne i czy jest miejsce na jedno i drugie? Kilka kluczowych różnic między tymi dwoma:

• Wykrywalność: AMP wygrywa tę bitwę. AMP korzysta z karuzeli w wynikach wyszukiwania Google, w której progresywne aplikacje internetowe nie mają większego wpływu na wykrywalność w wyszukiwarkach.
• Zaangażowanie: progresywne aplikacje internetowe nie są ograniczone do używania AMP HTML lub CSS, więc mogą zawierać znacznie bardziej angażujące treści niż AMP. Nic interaktywnego, które wymaga JavaScript, nie może zostać utworzone za pomocą platformy AMP. W przypadku AMP zawartość dynamiczna jest poza tabelą.
• Szybkość: Przewaga tutaj idzie na AMP z tego samego powodu, dla którego progresywne aplikacje internetowe zdobywają zaangażowanie. AMP może obsługiwać tylko lekkie treści, ale to skraca czas ładowania.

W Smashing Magazine Paul Bakaus dobrze podsumowuje kompromis między tymi dwoma formatami:

Aby zapewnić niezawodną szybkość działania, podczas wdrażania stron AMP musisz pogodzić się z pewnymi ograniczeniami. AMP nie jest przydatny, gdy potrzebujesz bardzo dynamicznych funkcji, takich jak powiadomienia wypychane lub płatności internetowe, lub czegokolwiek wymagającego dodatkowego JavaScript.

Ponadto, ponieważ strony AMP są zwykle obsługiwane z pamięci podręcznej AMP, nie uzyskasz największych korzyści z progresywnej aplikacji internetowej przy pierwszym kliknięciu, ponieważ Twój własny Service Worker nie może działać. Z drugiej strony, progresywna aplikacja internetowa nigdy nie może być tak szybka jak AMP przy pierwszym kliknięciu, ponieważ platformy mogą bezpiecznie i tanio wstępnie renderować strony AMP – funkcja, która również ułatwia osadzanie (np. w przeglądarce wbudowanej).

Ale czy w końcu naprawdę musimy wybierać jedno, a nie drugie?

Współpraca nad konkurencją

Możesz użyć AMP wyłącznie do stworzenia szybkiego, ale prostego doświadczenia. Możesz polegać na progresywnej aplikacji internetowej, aby stworzyć dynamiczne, ale wolniejsze środowisko użytkownika. Możesz też szybko zacząć i pozostać szybkim, włączając oba te elementy do swojego projektu internetowego.

Obecnie coraz powszechniejsze stają się zastosowania AMP wraz z progresywnymi aplikacjami internetowymi, a programiści wykorzystują oba te sposoby na trzy sposoby.

1. AMP jako progresywna aplikacja internetowa

Jeśli Twoje treści są głównie statyczne i możesz zadowolić się ograniczoną funkcjonalnością AMP, ta opcja umożliwia tworzenie błyskawicznych doświadczeń jako progresywnej aplikacji internetowej. AMP na przykład jest zbudowany w ten sposób — progresywna aplikacja internetowa całkowicie naładowana AMP. Posiada pracownika serwisu, który umożliwia dostęp w trybie offline, a także manifest, który wyświetla baner „Dodaj do ekranu głównego”.

2. AMP do progresywnej aplikacji internetowej

Innym sposobem na jednoczesne używanie AMP i progresywnej aplikacji internetowej jest myślenie o stronie AMP jako zaczepie do Twojej witryny. Łapie użytkownika natychmiastowym obciążeniem, a następnie wciąga go do progresywnej aplikacji internetowej. Pozwala to połączyć szybko ładujące się strony AMP z bardziej dynamicznym PWA niż pierwsza opcja.

3. AMP w progresywnej aplikacji internetowej

Podobnie jak w przypadku AMP vs. PWA, nie musi to być wszystko albo nic. Nie musisz budować wszystkich swoich stron za pomocą AMP; nie musisz również oddzielać AMP i PWA jako haczyka i pręta. Teraz możesz w rzeczywistości AMP tylko niewielką podsekcję pojedynczej strony, zmniejszając w ten sposób jej rozmiar i skracając czas ładowania bez całkowitego kompromisu w postaci funkcji dynamicznej.

Wiąże się to z użyciem innej formy AMP o nazwie „Shadow AMP”, która umożliwia zagnieżdżanie AMP w obszarze strony internetowej. Wynikiem jest AMP w powłoce progresywnej aplikacji internetowej. Aby zobaczyć to w akcji, sprawdź demo stworzone przez Google o nazwie ShadowReader:

Gotowy do stworzenia własnej progresywnej aplikacji internetowej?

Tworzenie szybkiego środowiska przypominającego natywną aplikację z możliwością wyszukiwania w sieci zaczyna się tutaj, gdzie można poznać wszystkie pola, które należy zaznaczyć, aby spełnić kryteria Google dotyczące aplikacji PWA. Aby uzyskać więcej informacji na temat jednoczesnego korzystania z AMP i PWA, sprawdź:

• Ta rozmowa od Bena Morssa
• Ta rozmowa od Erica Lindleya

Kiedy będziesz gotowy, zacznij korzystać z narzędzia do tworzenia stron docelowych AMP po kliknięciu w Instapage, aby zapewnić jak najszybsze wrażenia użytkownika.