Co to jest PWA? Łatwe wyjaśnienie dla osób nie będących technikami

Powinieneś wiedzieć z góry, że ten post jest napisany z punktu widzenia marketera. (Cóż, umiem czytać i pisać trochę HTML i CSS, do pewnego stopnia rozumiem Javascript, ale to nie czyni mnie technikiem).

Co to jest PWA?

PWA (Progressive Web A pps ) umożliwia przeglądarce internetowej wygląd i działanie natywnej aplikacji mobilnej (tj. aplikacji pobranych ze sklepów iOS i Android). Te natywne aplikacje są zoptymalizowane pod kątem płynnej obsługi mobilnej, a jednocześnie posiadają unikalne funkcje, takie jak powiadomienia web push. Technologia PWA wykorzystuje możliwości przeglądania stron internetowych w przeglądarkach takich jak Chrome i Safari, dzięki czemu jest zbliżona do aplikacji natywnej. W rezultacie zwiększa to ruch i zaangażowanie w sieci.

Termin ten został po raz pierwszy wprowadzony przez Google w 2015 roku. Część „postępowa”, według Pete'a LePage – Google Developer Advocate, można wyjaśnić jako „ ponieważ użytkownik stopniowo buduje relację z aplikacją, z czasem staje się ona coraz silniejsza ”.

Czy PWA to to samo co strona internetowa?

Tak, progresywne aplikacje internetowe to strony internetowe.

Jednak dzięki nowoczesnej technologii internetowej po prostu wyglądają i działają jak aplikacja. Oznacza to, że użytkownicy będą przeglądać progresywne aplikacje internetowe w przeglądarce za pomocą adresu URL, tak samo jak każdą witrynę internetową, ale zaraz po przejściu do PWA mają doświadczenie korzystania z „aplikacji” bezpośrednio w przeglądarce, bez konieczności Ściągnij i zainstaluj.

Bycie „aplikacją” nie oznacza, że ​​PWA ogranicza się do urządzeń mobilnych. Można je również zaimplementować na komputerze stacjonarnym. W rzeczywistości są szanse, że często odwiedzałeś PWA, nawet nie zdając sobie z tego sprawy. Jeśli kiedykolwiek przeglądałeś Instagram, Pinterest lub Tinder na swoim laptopie, to gratulacje! Napotkałeś w sieci jednych z najbardziej udanych użytkowników PWA.

Rzućmy okiem na przykład strony internetowej PWA, ponieważ może ona pomóc w znacznie łatwiejszym zrozumieniu PWA.

Przykład PWA

Witryna eCommerce G-SP to PWA. Gdy odwiedzasz witrynę na urządzeniu mobilnym, możesz dodać adres URL witryny do ekranu głównego telefonu.

Następnie, za każdym razem, gdy chcesz ponownie odwiedzić witrynę, jest ona tam z ikoną na ekranie głównym, tak jak inne aplikacje, takie jak Facebook czy Linkedin.

Otwierając aplikację internetową G-SP z ekranu głównego, możesz zobaczyć, że witryna jest teraz na pełnym ekranie bez paska wyszukiwania przeglądarki. Ponadto na dole znajduje się menu nawigacyjne przypominające aplikację. Co więcej, przewijanie i stukanie jest tak gładkie jak masło, co nie przypomina niektórych przeglądarek internetowych, które mogłeś mieć wcześniej.

 Rekomendowane lektury:
- Studium przypadku G-SP PWA: transformacja dla najwyższej klasy mobilnego doświadczenia
- 3 najczęstsze przypadki użycia PWA

Wskazówki, jak stwierdzić, czy witryna jest PWA

O ile nie jesteś programistą i nie zagłębisz się w kod źródłowy witryny, nie masz pewności, czy dana witryna jest zbudowana w oparciu o technologię PWA.

Biorąc to pod uwagę, istnieje kilka sztuczek, które chociaż nie gwarantują dokładnego wyniku, mogą dać pewne oznaki, że dana witryna jest PWA.

Witryna jednostronicowa

To najprostszy sposób na stwierdzenie, czy strona internetowa może być PWA. Opiera się na naturze PWA: Progressive Web Apps są technicznie witryną jednostronicową. Nie oznacza to, że witryna zbudowana na PWA ma tylko jedną stronę. Oznacza to, że zdarzenie wyświetlenia strony ma miejsce tylko raz, gdy użytkownik początkowo ładuje witrynę. Następnie wszystkie ładowane strony są obsługiwane przez JavaScript. Różni się to od normalnych witryn internetowych, w których każda zmiana strony powoduje ponowne ładowanie strony wraz z całym kodem źródłowym HTML.

Więc jak to działa? Cóż, bardzo proste: spójrz na aktywną kartę w swojej przeglądarce. Jeśli witryna jest PWA, po zmianie stron witryna nie przeładowuje się, co oznacza, że ​​na karcie przeglądarki nie ma animacji „ładowania”.

Możemy powiedzieć, że witryna The New York Times nie jest PWA:

Spójrzmy na naszą stronę internetową SimiCart jako przykład:

Widzisz, co mam na myśli? Strona nie ładuje się ponownie, gdy zmieniasz strony! Technicznie rzecz biorąc, cały czas pozostajesz na jednej „stronie”. Dlatego strony PWA ładują się tak szybko i płynnie. Wszystkie strony są wstępnie ładowane podczas pierwszej wizyty w witrynie i dostarczane później. Nie są zależne od szybkości Twojej sieci i mogą nawet pracować w trybie offline!

Pracownicy usług

Nie, to nie są ludzie. Service Workers to nazwa technologii stojącej za progresywną aplikacją internetową, która umożliwia jej działanie w trybie offline, powiadomienia push i buforowanie zasobów. Według Google Service Workery są rdzeniem technik PWA. Tak więc, jeśli możemy dowiedzieć się, czy witryna korzysta z technologii Service Workers, możemy stwierdzić, czy witryna może być PWA.

Jeśli używasz przeglądarek opartych na Chrome, możesz to łatwo sprawdzić za pomocą narzędzia Inspector. Kliknij prawym przyciskiem myszy witrynę, którą chcesz sprawdzić, kliknij opcję Sprawdź element. Następnie przejdź do zakładki Aplikacja > Service Workers. Możesz łatwo sprawdzić, czy w tej witrynie znajdują się pracownicy Service Worker.

Ponownie, ta sztuczka daje tylko wskazówkę, że dana witryna jest PWA. Chociaż Service Workers stanowią kluczową część PWA, nie ograniczają się do PWA. Witryny inne niż PWA mogą również korzystać z funkcji Service Workers w celu zwiększenia ich funkcjonalności.

Jeśli chcesz dowiedzieć się więcej o PWA Service Worker, mamy dla Ciebie ekskluzywny artykuł, w którym dowiesz się wszystkiego o tej niesamowitej technologii.

Bezpieczne pochodzenie HTTPS

Możesz jednak dokładnie określić, czy witryna nie jest PWA, patrząc na jej adres URL. Jeśli adres URL witryny zaczyna się od http:// zamiast https:// , nie jest to PWA. Dzieje się tak, ponieważ PWA może działać tylko na stronach internetowych działających w bezpiecznej domenie, którą jest HTTPS .

Jak popularne jest PWA?

Jak sugeruje Google, PWA to „przyszłość aplikacji mobilnej”, PWA zyskuje na popularności, najpierw wśród dużych graczy, potem mniejszych firm i organizacji.

Prowadzi do rywalizacji niemal wszędzie — od platformy Windows po główne sklepy z aplikacjami, takie jak Sklep Google Play

Można zauważyć, że wiele znanych stron internetowych to PWA, takie jak Telegram, AliExpress, FlipBoard, a nawet wersje PWA znanych gier PWA, takich jak 2048 lub Web Flap.

Korzyści PWA: Co potrafią Progressive Web Apps?

W momencie pisania tego artykułu PWA może już robić większość rzeczy, które wcześniej były dostępne wyłącznie w aplikacjach natywnych. Obejmuje to dostęp do funkcji na poziomie urządzenia, takich jak kamera i mikrofon, GPS, tryb offline, dostęp do plików i wiele innych. Aby uzyskać przegląd możliwości PWA, możesz zajrzeć na https://whatpwacando.today/ .

Dlatego aplikacja internetowa jest doskonałym wyborem dla tych, którzy chcą poprawić mobilne doświadczenia swojej marki w Internecie, bez inwestowania w aplikację mobilną.

Przyjrzyjmy się bliżej zaletom PWA w porównaniu z normalną aplikacją mobilną i responsywnymi stronami internetowymi:

PWA vs responsywna strona internetowa

W porównaniu, powiedzmy, do strony internetowej , PWA jest lepsze z następujących powodów:

• Szybkość: przy tej samej zawartości PWA ładuje się szybciej niż zwykłe strony internetowe dzięki technologii Service Workers . Jest szybki przy pierwszym ładowaniu i jeszcze szybszy przy drugim ładowaniu, ponieważ wstępnie buforuje całą zawartość i dostarcza ją w razie potrzeby.
• Tryb offline : Dostępność offline jest również możliwa dzięki technologii Service Workers. Dzięki prawidłowo zintegrowanej obsłudze serwisowej wszystkie treści są wstępnie ładowane przy pierwszej wizycie w PWA, a następnie dostarczane za pomocą JavaScript, dzięki czemu PWA jest nowym podejściem do stron internetowych, których nieprzerwane działanie jest koniecznością . Mamy przewodnik o tym, jak sprawić, by Twoje PWA działało w trybie offline, na wypadek, gdybyś kiedykolwiek go potrzebował.
• Powiadomienia web push: Podobnie jak natywna aplikacja mobilna, PWA może wysyłać powiadomienia push na ekran główny użytkowników bezpośrednio z mobilnych przeglądarek internetowych. Jest to szczególnie przydatne dla sklepów eCommerce w wysyłaniu spersonalizowanych ofert i ofert do swoich klientów. Web push dla PWA Android działa od wieków i na szczęście już niedługo pojawi się w PWA iOS.
• Dodaj do ekranu głównego : Ta funkcja zachęca użytkowników mobilnych do „zainstalowania” PWA. Gdy użytkownik zaakceptuje monit, PWA zostanie dodane do jego mobilnego ekranu głównego i będzie działać jak każda inna zainstalowana aplikacja. Oto nasz przewodnik po PWA Dodaj do ekranu głównego. Nie przegap tego!

Stary komunikat „Dodaj do ekranu głównego” w Chrome będzie wyglądał mniej więcej tak:

 >> Polecana literatura: Pełne porównanie PWA vs Responsive Website

PWA a aplikacja natywna

PWA jest nie tylko lepsze niż strony internetowe, ale także marki wybierają teraz PWA zamiast natywnych aplikacji ze względu na następujące korzyści, jakie zapewniają PWA:

• Wieloplatformowy : po zbudowaniu PWA można uzyskać do niego dostęp za pośrednictwem dowolnej platformy mobilnej, takiej jak Android, iOS lub Windows, ponieważ PWA jest oparte na przeglądarce, a nie na systemie operacyjnym.
• Aktualne : zmiany wprowadzone w PWA zaczną obowiązywać natychmiast, gdy tylko użytkownicy odświeżą stronę.
• Indeksowalność : Ponieważ PWA jest nadal technicznie stroną internetową, jej zawartość może być indeksowana i wykrywana w wyszukiwarkach takich jak Google. Otwiera to możliwości dla praktyk SEO (Search Engine Optimization), które umożliwiają PWA dotarcie do większej bazy użytkowników w porównaniu do aplikacji natywnej.
• Nie ma potrzeby publikowania : w przypadku aplikacji natywnych proces publikowania w sklepach z aplikacjami może być czasem prawdziwym problemem. Wyobraź sobie, że przesyłasz swoją aplikację do sklepów z aplikacjami, czekając z podekscytowaniem przez 5 dni, tylko po to, by otrzymać odrzucenie z powodu, który wymaga ponownego przeczytania 10 razy i nadal nie wiesz, o czym jest mowa. W niektórych przypadkach Twoja aplikacja może nigdy nie zostać zaakceptowana. (Sklepy erotyczne lub produkty vape, ktoś?). Dzięki PWA nie ma możliwości przesyłania aplikacji. Co za ulga! Jeśli chcesz opublikować swoje PWA w Apple Appstore, Google Play i Microsoft Store, oto jak!
• Niski koszt rozwoju : ponieważ PWA może być raz opracowane, a następnie dostępne dla dowolnych platform mobilnych i przeglądarek, które go obsługują, koszt rozwoju PWA jest stosunkowo niewielki w porównaniu z aplikacjami natywnymi”. Innym powodem jest to, że PWA wykorzystuje języki i technologie programowania, które są powszechniej rozumiane i mają znacznie większą bazę programistów.

 Rekomendowane lektury:
- Progresywna aplikacja internetowa a aplikacja natywna: która bardziej Ci odpowiada?
- Korzyści z PWA dla eCommerce

Wada PWA

Oczywiście wszystko to brzmi zbyt dobrze, aby mogło być prawdziwe; a gdy coś wydaje się zbyt piękne, aby mogło być prawdziwe, ludzie często pytają „OK, w czym tkwi haczyk”.

PWA, pomimo swoich charakterystycznych dla branży cech, nadal ma swoje wady:

• Osiągalność

Biorąc pod uwagę, że technologia jest wciąż nowa i w ogóle, nie ma aktualnego rynku aplikacji dla PWA, co z kolei zmniejsza w pewien sposób jego zdolność dotarcia do szerszego grona odbiorców. Istnieją jednak ruchy znanych firm, takich jak Microsoft, które włączają PWA do Microsoft Store, dzięki czemu przyszłość wszystkich rzeczy PWA w Windows 10 nie wydaje się tak daleko idąca.

• Komunikacja z innymi zainstalowanymi aplikacjami :

Ponieważ PWA jest nadal zasadniczo i zasadniczo stroną internetową podobną do aplikacji, może być ograniczana na wiele sposobów. Największym ograniczeniem może być ograniczenie komunikacji między aplikacjami , co może stanowić problem dla programistów.

FAQ

Do czego służy PWA?

Aplikacja internetowa, która jest szybka, niezawodna i przyjemna w użyciu, może służyć do wielu celów. Na przykład Tik Tok, PWA Aliexpressa, zachęcają ludzi do zapoznania się z witrynami, a tym samym zachęcają ich do pobrania ich natywnych aplikacji. Spotify wykorzystuje PWA do dalszej optymalizacji wydajności i responsywności swojej strony internetowej, oferując w ten sposób swoim użytkownikom inną opcję poza pobraniem aplikacji. Gry takie jak pacman czy 2048 również korzystają z PWA, aby dotrzeć do większej liczby użytkowników sieci.

Jaka jest różnica między PWA a zwykłą aplikacją?

Z technicznego punktu widzenia natywna aplikacja musi zostać pobrana z jej sklepu z aplikacjami, podczas gdy możesz uzyskać dostęp do PWA przez przeglądarkę internetową. Z biznesowego punktu widzenia PWA może być bardziej przyjazne dla SEO, tańsze i szybsze w rozwoju. Tymczasem aplikacja natywna jest nadal najlepsza w przypadku skomplikowanych projektów mobilnych, a także może zwiększyć wiarygodność marki.

Czy PWA działa tylko na urządzeniach mobilnych?

Nie, PWA działa zarówno na komputerze stacjonarnym, telefonie komórkowym, jak i tablecie.

Jaki jest język programowania PWA?

PWA jest zbudowany z popularnych języków programowania i technologii internetowych, w tym HTML, CSS, Javascript i WebAssembly.

Wniosek

„Czy PWA zastąpi aplikacje natywne?”

Myślimy, że nie.

Już.

W czwartym kwartale 2019 r. w Google Play jest prawie 3 miliony aplikacji, a w Apple App Store ponad 2 miliony (Statista, 2019). Ta liczba wciąż rośnie i nie wygląda na to, żeby wszystkie te aplikacje zostały w najbliższym czasie zastąpione. Przyzwyczajenie użytkownika to rzecz i niełatwo ją zmienić.

Biorąc to pod uwagę, progresywne aplikacje internetowe mają ogromny potencjał. W SimiCart wierzymy, że progresywne aplikacje internetowe to przyszłość. Dzięki szybkości, elastyczności układu i możliwościom funkcji, PWA ma zastąpić witryny na komputery stacjonarne, witryny mobilne, natywne aplikacje mobilne, a nawet natywne aplikacje Windows. Tak, dobrze słyszeliście, aplikacje Windows . W samym tylko świecie e-commerce, Progressive Web App jest obecnie rozwiązaniem dla właścicieli sklepów, którzy chcą lekkiego, responsywnego i angażującego doświadczenia dla kupujących online.

W rzeczywistości statystyki pokazują, że 1-miesięczne opóźnienie we wdrożeniu PWA może skutkować nawet 1,4 miliona dolarów utraty przychodów i kolejnymi 6,8 milionami dolarów, jeśli marki zdecydują się opóźnić to o sześć miesięcy.

Dla właścicieli sklepów e-commerce szukających wszechstronnego idealnego rozwiązania Magento PWA , tutaj w SimiCart oferujemy kompletny pakiet dla Ciebie i Twojego sklepu.