Progresywne aplikacje internetowe (PWA): czym są, za i przeciw oraz główne przykłady na rynku

Żyjemy w coraz szybszym, dynamicznym, ciągle zmieniającym się świecie. Przyrostowe innowacje, które mają wpływ na ludzi, następują po sobie, z coraz wyraźniejszym naciskiem na:

wydajność, pomyśl o coraz potężniejszych urządzeniach, których używamy na co dzień lub zadaniach, które pozwalają nam wykonywać szybciej;
doświadczenie, aby wyeliminować wszelkie tarcia w korzystaniu z oprogramowania/sprzętu;
inteligencję, z algorytmami, które teraz działają w perspektywie predykcyjnej.

To właśnie w tym kierunku, skupiając się przede wszystkim na wydajności i User Experience dla użytkownika końcowego, idzie rozwój Progressive Web App (PWA), rozwiązania, które chce połączyć to, co najlepsze w natywnych aplikacjach i technologii Web.

A Progressive Web App (PWA) to aplikacja, która wykorzystuje nowoczesne możliwości Web, aby zaoferować użytkownikom bardzo podobne (jeśli nie lepsze) doświadczenie do natywnej aplikacji.

W przeciwieństwie do tradycyjnych aplikacji, progresywne aplikacje webowe są hybrydą pomiędzy zwykłymi stronami internetowymi a aplikacjami mobilnymi. Termin “progresywny” odnosi się do faktu, że wprowadzają one nowe funkcje i z punktu widzenia doświadczenia użytkownika są początkowo postrzegane jako zwykłe strony internetowe, ale stopniowo zachowują się bardziej jak aplikacje mobilne, między innymi wieloplatformowe.

Pros i minusy Progressive Web App
Ważność Manifestu i Service Workers
Jakie są najczęściej używane technologie dla PWA?
Jak wybrać między PWA a rozwiązaniem natywnym
Różnice w procesie instalacji: PWA vs aplikacja natywna
Główne przykłady Progressive Web App
Czy przyszłość jest “progresywna”?

Pros i minusy Progressive Web App

Główne cechy to:

Progresywne – Działają dla każdego użytkownika, niezależnie od wybranej przeglądarki, ponieważ są zbudowane u podstaw z zasadami progresywnego ulepszania.
Responsywne – Dostosowują się do różnych rozmiarów ekranu: desktop, mobile, tablet, czy wymiarów, które mogą być dostępne w późniejszym czasie.
App-like – Zachowują się z użytkownikiem tak, jakby były natywnymi aplikacjami, pod względem interakcji i nawigacji.
Aktualne – Informacje są zawsze aktualne dzięki procesowi aktualizacji danych oferowanemu przez pracowników serwisu.
Secure – Eksponowane za pośrednictwem protokołu HTTPS, aby uniemożliwić wyświetlanie informacji lub zmianę zawartości przez połączenie.
Searchable – Są identyfikowane jako “aplikacje” i są indeksowane przez wyszukiwarki.
Reactivable – Ułatwiają ponowną aktywację aplikacji dzięki możliwościom takim jak powiadomienia internetowe.
Installable – Pozwalają użytkownikowi “zapisać” aplikacje, które uważa za najbardziej przydatne z odpowiednią ikoną na ekranie swojego terminala mobilnego (ekran główny) bez konieczności stawiania czoła wszystkim krokom i problemom związanym z korzystaniem ze sklepu z aplikacjami.
Linkable – Łatwo udostępniane za pośrednictwem adresu URL bez skomplikowanych instalacji.
Offline – Po raz kolejny chodzi o to, aby postawić użytkownika przed wszystkim, unikając zwykłego komunikatu o błędzie w przypadku słabego połączenia lub jego braku. PWA opierają się na dwóch cechach szczególnych: przede wszystkim na “szkielecie” aplikacji, który przypomina strukturę strony, nawet jeśli jej zawartość nie odpowiada, a jego elementy obejmują nagłówek, układ strony, a także ilustrację, która sygnalizuje, że strona się ładuje.

Słabe strony dotyczą:

obsługi systemu iOS od wersji 11.3;
większe wykorzystanie baterii urządzenia;
nie wszystkie urządzenia obsługują pełny zakres funkcji PWA (ta sama mowa dla systemów operacyjnych iOS i Android);
nie jest możliwe ustanowienie silnego ponownego zaangażowania dla użytkowników iOS (schemat URL, standardowe powiadomienia internetowe);
wsparcie dla wykonania offline jest jednak ograniczone;
brak obecności na sklepach (brak możliwości pozyskiwania ruchu z tego kanału);
brak “organu” kontroli (jak sklepy) i procesu akceptacji;
ograniczony dostęp do niektórych komponentów sprzętowych urządzeń;
niewielka elastyczność w zakresie treści “specjalnych” dla użytkowników (np. programy lojalnościowe, lojalnościowe itp.).

Ważność Manifestu i Service Workers

Nowymi funkcjami nowoczesnych przeglądarek, które pozwalają PWA zaoferować to, co najlepsze, są “manifest” i “service workers”.

Manifest
Jest to prosty plik JSON, który definiuje podstawowe parametry PWA, aby kontrolować, jak aplikacja powinna wyglądać dla użytkownika i określić jej wygląd przy uruchomieniu: ikony, inne podstawowe cechy, takie jak kolory, czcionki, orientacja ekranu i możliwość zainstalowania na ekranie głównym.

Service workers
Są one prawdziwym kluczem do zaawansowanych doświadczeń, jakie może zaoferować PWA. Service worker to skrypt, który przeglądarka uruchamia w tle, oddzielony od strony internetowej, aby korzystać z funkcji, które nie wymagają strony internetowej ani interakcji użytkownika.

Już dziś SW zawierają takie funkcje jak powiadomienia push i synchronizację w tle. W przyszłości będą wspierać takie funkcje jak synchronizacja okresowa czy geofencing. Główną funkcją jest zdolność do przechwytywania i zarządzania żądaniami sieciowymi, w tym programowe zarządzanie pamięcią podręczną odpowiedzi. Jest to API, które wspiera doświadczenia offline, dając deweloperom pełną kontrolę nad doświadczeniami.

Dodając wsparcie dla service workers w najnowszej wersji iOS, Apple otworzyło drzwi dla PWA, aby dotrzeć, we wszystkich intencjach i celach, do całego rynku mobilnego.

Jakie są najczęściej używane technologie dla PWA?

Istnieje kilka technologii do tworzenia Progressive Web App, głównie opartych na JavaScript, o różnych cechach.

Wśród głównych mamy:

React
Potężna biblioteka JavaScript do budowania dynamicznych i nowoczesnych interfejsów użytkownika
Polymer
Połączenie komponentów, narzędzi i modeli zaprojektowanych do tworzenia PWA
Angular
Szablon JavaScript do tworzenia dynamicznych aplikacji internetowych, który używa HTML jako języka szablonów
Ionic
Szablon JavaScript do tworzenia potężnych aplikacji na wielu platform przy użyciu podstawowego kodu
Accelerated Mobile Pages (AMP)
Projekt open source mający na celu poprawę wydajności stron internetowych

Jak wybrać między PWA a rozwiązaniem natywnym

Nadchodzi moment wyboru, jakie rozwiązanie przyjąć?

Preferowane jest wybranie rozwoju PWA, gdy:

Aplikacja musi być łatwo dystrybuowana do jeszcze szerszej bazy użytkowników
Dostępny budżet nie jest wysoki
Do dyspozycji jest mało czasu na go-live
Właściwe indeksowanie w wyszukiwarkach jest ważne
Kompatybilność międzyplatformowa jest wymagana
Więcej aktualizacji jest potrzebnych w krótkim czasie

Przeciwnie, preferuje się rozwój aplikacji natywnej, gdy:

Niezbędne jest poruszanie się po sklepach
Szybkość i responsywność są kluczowymi punktami dla sukcesu aplikacji
Aplikacja wymaga ważnego wykorzystania funkcji sprzętowych urządzenia
Model biznesowy jest oparty, na przykład, na koszcie za pobranie i / lub IAP (In App Purchase)
Aplikacja musi być zintegrowana z innymi aplikacjami firm trzecich

Różnice w procesie instalacji: PWA vs aplikacja natywna

Ogólny proces instalacji aplikacji natywnych przebiega zgodnie z tym przepływem:

Dostęp do sklepu referencyjnego (App Store lub Google Play)
Wyszukiwanie aplikacji
Kliknięcie na “Install”
Akceptacja różnych autoryzacji
Otworzenie i uruchomienie aplikacji
Korzystanie z aplikacji

W porównaniu, instalacja PWA obejmuje:

Wizytę na stronie
Dodanie do ekranu głównego urządzenia (opcjonalnie)
Otworzenie aplikacji
Korzystanie z aplikacji

Główne przykłady Progressive Web App

Jest już wiele przykładów “wyróżnionych” PWA, z których użytkownicy korzystają na swoich urządzeniach, a wśród głównych podajemy:

Aby wiedzieć więcej:
Addy Osmani on Medium > A Pinterest Progressive Web App Performance Case Study

Instagram

Obecne PWA jest bardzo podobne do aplikacji natywnej i posiada wszystkie główne funkcje interakcji, od powiadomień po możliwość przeglądania Stories.

Google Maps

Więcej:
The Next Web > Lekkie Maps Go Google’a to tylko Progressive Web App

Tinder

Więcej:
Addy Osmani on Medium > A Progressive Tinder Web App Performance Case Study

Twitter Lite

Aby dowiedzieć się więcej:
Twitter Blog >Jak zbudowaliśmy Twitter Lite
Google Developers > Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage
Paul Armstrong on Medium > Twitter Lite and High Performance React Progressive Web Apps at Scale

YouPorn

Maternidad y todo