Progresywne aplikacje internetowe (PWA): 3 najlepsze studia przypadków

Opublikowany: 2019-06-19

Spis treści

Wyobraź sobie, że właśnie uruchomiłeś swój start-up, a Twoja witryna wygląda świetnie, ale nie masz wystarczającego budżetu na stworzenie aplikacji mobilnej, co może mieć znaczenie dla Twojej strategii biznesowej. Jest to jednak bardzo drogie i nieco ryzykowne. Będziesz też musiał poświęcić dużo czasu na tworzenie aplikacji natywnej, ale nikt nie zna dobrze Twojej marki. Czy ludzie zaufają Twojej aplikacji na tyle, aby pobrać ją z App Store lub Google Play Store?

Co więcej – czy Twoi klienci/czytelnicy będą wystarczająco zdeterminowani, aby podjąć dodatkowe kroki, takie jak zamknięcie witryny, otwarcie Google Play lub App Store, a następnie cierpliwie czekać, aż aplikacja się zainstaluje?

Pamiętaj, że w dzisiejszych czasach ludzie są znacznie bardziej wymagający. Innymi słowy, są też bardzo niecierpliwi – oczekują szybkich rozwiązań . Pobranie takiej aplikacji z zewnętrznego sklepu nie brzmi jak bardzo szybka operacja, a aplikacje natywne nie są dostępne dla każdego użytkownika. Z punktu widzenia User Experience, jest wiele przeszkód dla klienta, zanim osiągnie swój (i twój) cel.

I jeszcze jedno – czy jesteś pewien, że Twoi klienci będą mieli wystarczająco dużo pamięci wewnętrznej, aby pobrać Twoją aplikację?

Zainwestujesz więc dużo pieniędzy w budowę aplikacji mobilnej (zarówno na IOS, jak i Androida) i nie możesz być pewien, że ludzie faktycznie z niej skorzystają. Ach… i nie zapomnij o tych wszystkich ogromnych kwotach budżetu marketingowego, które będziesz musiał przeznaczyć na reklamę i promocję!

Ale czekaj, nie panikuj, na szczęście żyjesz w 2019 roku, kiedy   Progresywne aplikacje internetowe stają się powszechnym rozwiązaniem przy tworzeniu aplikacji mobilnych!

Czy kiedykolwiek słyszałeś o progresywnych aplikacjach internetowych ? Jeśli nie, teraz masz szansę na nadrobienie zaległości w najnowszym trendzie technologicznym lub zostaniesz w tyle! Napisaliśmy już obszerny artykuł wyjaśniający , czym one są i dlaczego warto wybrać tę opcję.

Dziś chcielibyśmy dać Wam inspirację i przedstawić historie sukcesu marek, które już zbudowały Progressive Web Apps.

TRIVAGO

Logo Trivago

Trivago zyskuje dobrą reputację dzięki wyszukiwarce hoteli dostępnej w 33 różnych językach. Na podstawie informacji o hotelu, zdjęć, ocen, recenzji, filtrów i innych funkcji, Trivago pomaga swoim użytkownikom znaleźć najlepszą ofertę.

Problem

Symbol Trivago

Problem w tym, że Trivago odnotowało w ostatnich latach znaczny wzrost użytkowników mobilnych. Marka zdała sobie sprawę, że doświadczenie mobilne staje się coraz ważniejsze dla jej klientów.

Tworzenie rozwiązań mobilnych to jednak nie bułka z masłem, a to oznacza dokonywanie trudnych wyborów. W szczególności firma nie była pewna, czy ludzie zaakceptują koszty pobrania aplikacji mobilnej tylko po to, aby sprawdzić, czy spełnia ich oczekiwania. Zauważyli też, że wiele osób ma problemy z jakością połączenia mobilnego . Z tych powodów Trivago szukało innych możliwości niż aplikacja natywna.

 Zalecana literatura: Progresywne aplikacje internetowe a aplikacje natywne: które lepiej pasują?

Rozwiązanie

Wreszcie odkryli progresywne aplikacje internetowe , których funkcje wydawały się idealnie odpowiadać ich potrzebom. W tamtym czasie szukali rozwiązania, które zapewniłoby im powiadomienia push , tryb offline i skróty na ekranie głównym . A najważniejszym czynnikiem dla Trivago była dostępność tej aplikacji za pośrednictwem standardowej przeglądarki mobilnej .

Progresywna aplikacja internetowa Trivago
Progresywna aplikacja internetowa Trivago

To rozwiązanie PWA pomogło im zbudować aplikację bez konieczności angażowania dużych zespołów programistów. Na początku skupili się na najważniejszych funkcjach, takich jak powiadomienia push, dostęp offline i możliwość dodania aplikacji do ekranu głównego . Oczywiście na początku były trudności. Powiedzieli, że jednym z największych wyzwań było stworzenie intuicyjnego interfejsu użytkownika, ponieważ projektowanie wyglądu mobilnego znacznie różni się od tego na standardowych stronach internetowych. Według Laury Oades, projektantki PWA:

„Na urządzeniach mobilnych pojawia się dodatkowy problem polegający na stworzeniu interfejsu użytkownika, który jest niezależny od platformy i nie jest mylący” oraz „PWA jest w dużej mierze niezbadanym obszarem w projektowaniu i jest prawdziwą okazją dla kreatywnych osób rozwiązujących problemy do zdefiniowania nowego standardu”.

Wyniki

Statystyki Trivago PWA
Źródło: pwastats.com
  • Mobilna strona internetowa Trivago jest dostępna w 33 językach w 55 krajach.
  • Ponad 500 000 osób dodało skrót Trivago do swojego ekranu głównego, a ich zaangażowanie wzrosło o 150% .
  • W porównaniu z poprzednimi witrynami mobilnymi, Progressive Web App przyciągnęła znacznie więcej użytkowników. Przed PWA odnotowano zaledwie 0,8% powtórnych wizyt, teraz liczba ta wzrosła do średnio 2%.
  • Powiadomienia push okazały się doskonałym środkiem komunikacji – pomogły zwiększyć konwersję – liczba kliknięć w PWA na oferty hotelowe wzrosła o 97%.
 Zalecana literatura: 7 najlepszych progresywnych aplikacji internetowych w branży turystycznej

Pinterest

Logo Pinteresta

Pinterest to sieć społecznościowa, która umożliwia użytkownikom dzielenie się wizualnie i odkrywanie nowych zainteresowań poprzez publikowanie (nazywanych „przypinaniem” na Pintereście ) obrazów lub filmów na tablicach własnych lub innych osób (tj. zbiór „szpilek”, zwykle o wspólnym motyw) i przeglądanie tego, co przypięli inni użytkownicy

Problem

Symbol Pinteresta

Po przeanalizowaniu użycia przez nieuwierzytelnionych użytkowników internetu mobilnego zdali sobie sprawę, że ich stare, wolne środowisko internetowe zdołało przekonwertować tylko 1% użytkowników na rejestracje, loginy lub instalacje aplikacji natywnych. Szansa na poprawę tego wskaźnika rozmów była ogromna, co doprowadziło ich do inwestycji w PWA.

Pinterest PWA powstał, ponieważ był skoncentrowany na rozwoju międzynarodowym, co doprowadziło ich do sieci mobilnej.

Rozwiązanie

W ciągu 3 miesięcy Pinterest odbudował swoje środowisko mobilne, używając React, Redux i webpack. Ich przepisanie w internecie mobilnym doprowadziło do kilku pozytywnych ulepszeń w podstawowych wskaźnikach biznesowych.

Progresywna aplikacja internetowa Pinterest
Progresywna aplikacja internetowa Pinterest

Wyniki

Ich przepisanie w sieci mobilnej doprowadziło do kilku ulepszeń wydajności.

Spędzany czas wzrósł o 40% w porównaniu ze starą wersją internetu mobilnego, przychody z reklam generowanych przez użytkowników wzrosły o 44% , a podstawowe zaangażowanie o 60% :

Źródło: Średni
Pinterestowe statystyki PWA
Źródło: pwastats.com

Stare mobilne środowisko internetowe Pinteresta było monolitem — zawierało duże pakiety obciążającego procesor kodu JavaScript, który zwiększał szybkość ładowania i interaktywności stron Pina.

Ich nowe środowisko mobilne to drastyczna poprawa.

Nie tylko podzielili i zmniejszyli setki KB ze swojego JavaScriptu, zmniejszając rozmiar podstawowego pakietu z 650 KB do 150 KB, ale także poprawili kluczowe wskaźniki wydajności. Pierwsza znacząca farba została skrócona z 4,2 do 1,8 s, a czas do interakcji został skrócony z 23 do 5,6 s.

Rozmiar PWA na Pintereście w porównaniu z rozmiarem aplikacji natywnej

Chociaż Pinterest oferuje aplikacje na iOS i Androida, był w stanie zapewnić ten sam podstawowy kanał domowy, co te aplikacje w Internecie, za ułamek początkowego kosztu pobrania — tylko ~150 KB zminimalizowany i spakowany. Kontrastuje to z 9,6 MB wymaganych do zapewnienia tego doświadczenia na Androida i 56 MB na iOS

ŚWIERGOT

Logo na Twitterze

Jak już wiesz, Twitter to platforma mediów społecznościowych, na której ludzie publikują krótkie wiadomości zwane tweetami. Powstał w marcu 2006 roku. Obecnie ma ponad 335 milionów aktywnych użytkowników (lipiec 2018).

Problem

Symbol Twittera

Twitter zauważył, że użytkownicy muszą pokonać wiele przeszkód podczas korzystania z ich mobilnej strony internetowej.

Niektóre z nich działały w wolnych sieciach komórkowych i miały mało miejsca w pamięci urządzeń mobilnych . W rezultacie odwiedzający niechętnie spędzali czas na stronie Twittera lub angażowali się w publikowanie i komentowanie więcej. Twitter chciał znaleźć atrakcyjną alternatywę dla osób, które nie korzystają ze swojej natywnej aplikacji lub nie mają wystarczająco dużo miejsca, aby ją pobrać.

Rozwiązanie

Progresywna aplikacja internetowa na Twitterze
Progresywna aplikacja internetowa na Twitterze

Twitter zdecydował się zbudować progresywną aplikację internetową , ponieważ wydawała się najlepszym połączeniem nowoczesnej strony internetowej i natywnych funkcji. Natychmiastowe ładowanie, mniejsze zużycie danych i duża dostępność to cechy, których szukał Twitter.

Wyniki

Wyniki okazały się bardzo imponujące – liczby mówią same za siebie:

  • 20% spadek współczynnika odrzuceń,
  • 65% wzrost liczby stron na sesję,
  • 75% wzrost wysyłanych tweetów.
Statystyki PWA na Twitterze
Źródło: pwastats.com

Podobnie jak w poprzednich historiach sukcesu, monit „ dodaj do ekranu głównego ​” i powiadomienia push znacznie zwiększyły zaangażowanie użytkownika . Jak donosi to studium przypadku, Twitter zauważył, że 250 000 unikalnych użytkowników dziennie uruchamia Twitter Lite z ekranu głównego średnio 4 razy dziennie. Co więcej, wysyłają ponad 10 milionów powiadomień push dziennie.

Statystyki czasu ładowania Twittera PWA
Źródło: pwastats.com

Zgodnie z intencjami Twittera, PWA zajmuje znacznie mniej miejsca (tylko 600 KB) niż natywna aplikacja na Androida (23,5 MB), więc istnieje większe prawdopodobieństwo, że ludzie będą mieli wystarczająco dużo miejsca w swojej pamięci wewnętrznej, aby ją zaoszczędzić.

Co więcej, Twitter dodał tryb oszczędzania danych , który pomaga użytkownikom kontrolować ilość używanych danych mobilnych. Dzięki tej opcji możesz wybrać, które obrazy lub filmy chcesz w pełni wczytać, a które mogą pozostać tylko jako podgląd.

 Zalecana literatura: PWA SEO: Czy progresywne aplikacje internetowe (PWA) przynoszą korzyści SEO? (Ze statystykami i przykładami)

Postaw na przyszłość stron internetowych

PWA to przyszłość aplikacji mobilnych. Istnieje możliwość, że z czasem zastąpią aplikacje natywne, stając się idealnym połączeniem aplikacji natywnej i strony internetowej. W świecie, w którym szybkość wdrażania nowych technologii jest przewagą konkurencyjną, firmy, które zdołają wykorzystać PWA chwilę wcześniej, mogą znacznie zwiększyć przychody, zwiększyć zaangażowanie użytkowników, jednocześnie wyprzedzając konkurencję.

W przeszłości Apple miało pewne ograniczenia dla progresywnych aplikacji internetowych, jednak obecnie coraz bardziej wspierają one PWA. Dla sprzedawców internetowych szukających wszechstronnego PWA dla witryn Magento eCommerce, tutaj w SimiCart oferujemy kompletny pakiet dla Ciebie i Twojego sklepu.