Co to są progresywne aplikacje internetowe i jak działają?

Progresywne aplikacje internetowelub PWA, to nowe modne hasło w świecie tworzenia stron internetowych. Są bardzo podobne do zwykłej aplikacji mobilnej, ale są przeznaczone do użytku na urządzeniu mobilnym lub komputerze stacjonarnym. W tym blogu wyjaśniono, czym jest progresywna aplikacja internetowa, czym różni się od zwykłej aplikacji internetowej i nie tylko.

W ciągu ostatnich kilku lat Google próbował przyspieszyć internet mobilny, aby zapewnić użytkownikom lepsze doświadczenia. Pierwszym krokiem w tej podróży było uruchomienie przyspieszone strony mobilne.

Chociaż te „uproszczone” mobilne strony internetowe były szybkie, wydawcy napotkali przeszkodę związaną z konfiguracją analityki, atrybucji i monetyzacji za pomocą reklam displayowych.

Mimo ciągłych udoskonaleń AMP, aby uczynić go bardziej przyjaznym wydawcom, Google uruchomiło zupełnie inną platformę dla wydawców internetowych, zwaną Progresywne aplikacje internetowe (PWA).

Wykazano, że PWA są niezwykle korzystne, m.in badania z odkrycia Simicarta że po zainstalowaniu PWA średni czas spędzony na miejscu wzrasta o 119%. Co więcej, średni czas spędzony na czytaniu strony wzrasta o 68.8%.

W tym poście wyjaśnimy znaczenie PWA, sposób działania tych aplikacji, ich zalety, czym różnią się od aplikacji AMP i natywnych oraz możliwości monetyzacji.

Co to jest progresywna aplikacja internetowa?

Progresywne aplikacje internetowe to zwykłe strony internetowe lub witryny internetowe, które wyglądać, czuć i zachowywać się lubić natywna wersja mobilna aplikacje na wiele sposobów. „Aplikacja PWA pozwala zainstalować aplikację z poziomu okna przeglądarki, jest dostępna na telefonie jak aplikacja natywna i działa w trybie offline, tak jak aplikacja natywna” – mówi Shruti Kapoor, inżynier oprogramowania w PayPal.

Powodem, dla którego te aplikacje nazywane są „progresywnymi”, jest to, że UX poprawia się w zależności od dostępnej technologii urządzenia i przeglądarki.

Możesz więc załadować PWA na podstawowy telefon i nadal będzie działać. Jednak jego funkcjonalność i komfort użytkowania ulegną poprawie w miarę przejścia na nowsze smartfony z najnowszym sprzętem.

Dzięki temu wydawcy mogą tworzyć skalowalne rozwiązania dla sieci bez konieczności inwestowania dużych środków w tradycyjną aplikację mobilną.

Według programistów Google następujące cechy definiują PWA:

• Progresywny: Działa dla każdego użytkownika, niezależnie od wybranej przeglądarki.
  
• Czuły: Pasuje do dowolnej obudowy: komputera stacjonarnego, telefonu komórkowego, tabletu lub formularzy, które dopiero się pojawią.
  
• Niezależna łączność: Pracownicy usług umożliwiają pracę w trybie offline lub w sieciach o niskiej jakości.
  
• Podobny do aplikacji: Poczuj się jak aplikacja dla użytkownika z interakcjami i nawigacją w stylu aplikacji.
  
• Świeży: Zawsze aktualna dzięki procesowi aktualizacji Service Worker.
  
• Bezpieczne: udostępniane za pośrednictwem protokołu HTTPS, aby zapobiec szpiegowaniu i zapewnić, że treść nie została naruszona.
  
• Wykrywalny: Można je zidentyfikować jako „aplikacje” dzięki manifestom W3C i zakresowi rejestracji pracowników usług, co pozwala wyszukiwarkom je znaleźć.
  
• Możliwość ponownego zaangażowania: Ułatw ponowne zaangażowanie dzięki funkcjom takim jak powiadomienia push.
  
• Możliwość instalacji: Pozwól użytkownikom „zachować” aplikacje, które uznają za najbardziej przydatne, na ekranie głównym, bez konieczności korzystania ze sklepu z aplikacjami.
  
• Linkowalny: Łatwe udostępnianie za pośrednictwem adresu URL i nie wymaga skomplikowanej instalacji.

To wszystko, czego potrzebujesz, jeśli chodzi o progresywną aplikację internetową. Przyjrzyjmy się teraz, jak to działa.

Jak działają progresywne aplikacje internetowe?

Progressive Web Apps wykorzystują nowe funkcje obsługiwane przez nowoczesne przeglądarki, m.in manifesty aplikacji internetowej oraz pracownicy usługowi. Dowolna witryna/aplikacja musi spełniać cztery minimalne warunki aby została sklasyfikowana jako progresywna aplikacja internetowa.

1. A manifest internetowy udostępnia metainformacje o aplikacji (takie jak jej nazwa, autor, ikona i opis) w pliku tekstowym JSON. Wydawcy mogą sami napisać manifest internetowy lub wygenerować plik za pomocą generatora manifestu aplikacji internetowej.
   
2. Service worker to kod JavaScript działający jak serwer proxy znajdujący się pomiędzy aplikacją, przeglądarką i siecią. Służą do zapewnienia efektywnego działania w trybie offline poprzez przechwytywanie żądań sieciowych i buforowanie informacji w tle.
   
3. Ikona pełni funkcję ikony aplikacji, gdy użytkownik przechowuje PWA w szufladzie aplikacji. Każdy obraz JPEG o rozmiarze 512 × 512 pikseli będzie działał dobrze.
   
4. Musisz udostępnić aplikację przez a bezpieczne połączenie HTTPS. Większość dostawców usług hostingowych za dodatkową opłatą dołączy certyfikat HTTPS. Możesz także zabezpieczyć je od zewnętrznego dostawcy. Posiadanie bezpiecznej strony internetowej jest również lepsze dla Twojej marki.

Jaka jest różnica między progresywnymi aplikacjami internetowymi a aplikacjami natywnymi

Istnieje wiele różnic między tymi dwoma. Poniżej wymieniliśmy kilka najważniejszych.

Koszty:

Spośród wielu progresywnych funkcji aplikacji internetowych, jedną z największych zalet jest opłacalność.

Istnieje znacząca różnica w kosztach pomiędzy tymi dwoma rozwiązaniami. Projektując aplikacje natywne, musisz dobrze znać wymagany język. Nie wspominając o tym, że musisz tworzyć aplikacje dla obu systemów operacyjnych – Androida i IOS.

Z drugiej strony, tworzenie progresywnych aplikacji internetowych jest znacznie tańsze. Nie musisz uczyć się żadnych języków programowania i nie potrzebujesz żadnych dodatkowych zasobów, aby utrzymywać lub aktualizować każdą wersję aplikacji.

W przeciwieństwie do aplikacji natywnych, progresywne aplikacje internetowe to świetny sposób na zaoszczędzenie czasu i pieniędzy podczas tworzenia i aktualizowania aplikacji. Możesz mieć jedną bazę kodu dla różnych platform, co oznacza, że ​​nie musisz się martwić o tworzenie oddzielnych wersji dla każdej platformy.

Odkrywczość

Ponieważ progresywne aplikacje internetowe są budowane przy użyciu technologii internetowych, takich jak HTML, Javascript, .CSS itp., mogą być indeksowane przez wyszukiwarki. Działają jak strona internetowa, co oznacza, że ​​mogą być również umieszczane w wyszukiwarkach przy zastosowaniu odpowiednich technik optymalizacji wyszukiwarek.

Aplikacje natywne działają inaczej. Są one ogólnie zaprojektowane dla systemów Android i IOS i można je oceniać tylko w dedykowanych sklepach – Play Store i App Store.

Bezpieczeństwo

Jeśli chodzi o bezpieczeństwo, aplikacje PWA są bezpieczniejsze niż tradycyjne aplikacje internetowe, ponieważ muszą działać pod protokołem HTTPS, protokołem bezpieczeństwa, który chroni przed ingerencją w wymianę między klientem a serwerem.

Natywna aplikacja umożliwia zastosowanie wielu zabezpieczeń, takich jak uwierzytelnianie wieloskładnikowe i przypinanie certyfikatów.

Zalety progresywnych aplikacji internetowych

Progresywne aplikacje internetowe mają wiele wyraźnych zalet w porównaniu ze zwykłymi witrynami internetowymi. Podobnie jak aplikacje dowiedzieć się więcej o użytkowniku przy każdej wizycie, nawet jeśli nie są zalogowani.

Jeśli więc ktoś odwiedzi witrynę kilka razy, aplikacja może to zrobić wywołać monit o pobranie lub powiadomienie internetowe. Co więcej, można uzyskać do nich dostęp online i mogą one dynamicznie aktualizować treść, zapewniając bardziej płynną obsługę użytkownika.

Co ważniejsze od tego wszystkiego, Progresywne aplikacje internetowe są szybki. „Nasze badania wykazały, że rozwiązania PWA zapewniają od dwóch do czterech razy większą prędkość strony, zapewniając zaangażowanie i konwersję ciężko zarobionych użytkowników” – mówi Igor Faletsky, dyrektor generalny Mobify. „Progresywne aplikacje internetowe umożliwiają korzystanie z aplikacji w zasięgu sieci.

Doświadczenie użytkownika jest wciągające i ładuje się natychmiast, nawet w złych warunkach sieciowych. Pomyśl o tym jak o aplikacji mobilnej, ale bez konieczności przechodzenia do aplikacji lub Sklepu Play.

Progresywne aplikacje internetowe mają dał świetne rezultaty dla setek wydawców internetowych i dostawców handlu elektronicznego. Weźmy przykład Pinteresta, który w zeszłym roku przekształcił swoją stronę internetową w progresywną aplikację internetową.

Od tego czasu w witrynie zaobserwowano 60% wzrost podstawowych wskaźników zaangażowania, 50% wzrost liczby kliknięć reklam i 44% wzrost przychodów z reklam.

Większość zalet PWA jest taka sama jak w przypadku aplikacji: szybsze, lepsze doświadczenie użytkownika i większa sztywność użytkownika.

Teraz, gdy już wiesz, czym są PWA i jak działają, porównajmy je z AMP.

PWA i AMP mają pewne podobieństwa, ale istnieją między nimi także pewne kluczowe różnice.

Przyjrzyjmy się, czym one są, aby lepiej zrozumieć, jak działa każdy z nich.

PWA a AMP: jaka jest różnica?

Progresywne aplikacje internetowe są w rzeczywistości pochodna projektu Accelerate Mobile Pages. Podczas gdy AMP służy do skracania czasu ładowania strony na urządzeniach mobilnych, PWA ładują się równie szybko, ale z dodatkową funkcjonalnością. Trwają prace rozwojowe nad obydwoma frameworkami, więc wybór jednego staje się kwestią przypadku użycia i preferencji.

Wydawcy zakładają, że AMP ma przewagę w SEO. Ale Graeme Caldwell w Zaawansowany blog z rankingami internetowymi wyjaśnia, że ​​PWA nie są w żadnej niekorzystnej sytuacji. „Nie tak dawno temu aplikacje internetowe po stronie klienta były koszmarem SEO.

Dziś firmy mogą bezpiecznie korzystać z progresywnych aplikacji internetowych i innych aplikacji internetowych JavaScript bez negatywnego wpływu na SEO” – mówi.

Zarabianie na progresywnych aplikacjach internetowych

W tym miejscu progresywne aplikacje internetowe mają niewielką przewagę nad przyspieszonymi stronami mobilnymi, aczkolwiek przy wyższym początkowym koszcie konfiguracji.

AMP to ambitny projekt, który spełnił swoją podstawową obietnicę polegającą na szybszym ładowaniu mobilnych stron internetowych. Jednak z trudem spełniała oczekiwania wydawców, takie jak opcje monetyzacji i przychody z reklam.

„Na PWA można zarabiać w takim samym stopniu, jak progresywne strony internetowe i aplikacje natywne. Tak naprawdę Twoje przychody mogą być nawet wyższe ze względu na fakt, że nie ma obowiązku płacenia prowizji od sprzedaży zewnętrznym graczom (w przypadku aplikacji natywnych. W przypadku aplikacji natywnych będzie to App Store lub Google Play) całej sprzedaży)” – pisze Aleksandra Soroka na portalu Blog GoodBarber.

Załóżmy, że reklama jest Twoją wybraną metodą zarabiania. W takim przypadku dostępne są wszystkie opcje, co oznacza, że ​​możesz współpracować z zewnętrzną siecią reklamową i tworzyć własne wewnętrzne kampanie reklamowe, jeśli masz własne partnerstwa lub umowy.

Progresywne aplikacje internetowe dobrze nadają się do monetyzacji, ponieważ generowanie przychodów za pomocą „aplikacji” jest rozwiązanym problemem. Podobnie jak aplikacje, PWA oferują wiele miejsc do wyświetlania reklam, różne formaty reklam i połączenia z kilkoma sieciami reklamowymi. Dwa z najpopularniejszych formatów obejmują banery reklamowe i reklamy pełnoekranowe.

Możesz wyświetlać reklamy w widoku głównym, widoku listy i widoku wyświetlacza swojego PWA. Łatwa integracja z popularnymi technologiami reklamowymi, takimi jak DFP jest dodatkową zaletą.

Jak tworzyć progresywne aplikacje internetowe?

Rozpoczęcie pracy z PWA jest łatwe – wystarczy kilka kluczowych składników i gotowe! Ten mały samouczek dotyczący progresywnych aplikacji pomoże Ci poznać wymagania wstępne dotyczące programowania PWA.

Narzędzia

Istnieje wiele różnych technologii, które można wykorzystać do opracowania PWA. Ale najpopularniejszą i najbardziej znaną opcją jest AngularJS. Oprócz tego możesz także używać ReactJS i Polymer.

HTTPS

Drugim krokiem jest zabezpieczenie Twojej aplikacji progresywnej. W tym celu zaleca się hostowanie witryny internetowej na serwerze z połączeniem HTTPS. Zapewnia to prywatność danych Twoich użytkowników. Daje Twojej witrynie dodatkowy stopień bezpieczeństwa.

Powłoka aplikacji

Powłoka aplikacji to coś, co użytkownik widzi jako pierwszy po otwarciu aplikacji. Innymi słowy, jest to początkowe wrażenie, jakie robi Twoja aplikacja.

Powłoka wyznacza etap doświadczenia użytkownika z aplikacją, zapewniając punkt wyjścia do nawigacji i interakcji z aplikacją.

Plik manifestu

Ten plik JSON jest generowany w konkretnym celu – aby zawierać wszystkie informacje, które kontrolują wygląd i działanie Twojego PWA.

W tym pliku będziesz mógł określić takie rzeczy, jak nazwa, opis, ikona, kolory i wiele funkcji Twojej progresywnej aplikacji internetowej.

Dzięki temu masz pełną kontrolę nad wyglądem i zachowaniem aplikacji, ułatwiając tworzenie unikalnych i spersonalizowanych doświadczeń dla użytkowników.

Pracownicy usługowi

Jedną z podstawowych technologii umożliwiających PWA jest wykorzystanie pracowników usług.

Service Workers pozwalają Twojej aplikacji działać w trybie offline i obsługiwać zaawansowane funkcje, buforując zasoby i zarządzając operacjami w tle. Co więcej, może wykonywać zadania nawet wtedy, gdy Twoja progresywna aplikacja internetowa jest nieaktywna.

Ostatnie słowa

Powinno być oczywiste, że progresywne aplikacje internetowe są przyszłością. W ciągu ostatnich kilku miesięcy byliśmy świadkami wielu zapowiedzi i zmian, które są naprawdę ekscytujące.

Google podejmuje kroki, aby uczynić PWA pierwszym wyborem dla programistów, a Microsoft poszedł w jego ślady, ogłaszając progresywne aplikacje internetowe dla systemu Windows. Jesteśmy bardzo podekscytowani perspektywą rozwoju PWA.

Mamy nadzieję, że blog pomógł Ci zrozumieć, czym jest progresywna aplikacja internetowa, jak działa, progresywne aplikacje internetowe i natywne aplikacje internetowe itp. Dziękujemy za przeczytanie.

Często zadawane pytania – Progressive Web Apps