co to jest progresywna aplikacja internetowa (PWA)? Po co ci taki?
minęły lata od początku ery smartfona. Wraz z nim przyszła era natywnych aplikacji. Aplikacje nadal odgrywają ogromną rolę w naszym codziennym życiu, a wielu właścicieli firm zadawało sobie wiele razy pytanie: czy powinniśmy mieć aplikację? Oczywiście jedyną odpowiedzią na to pytanie jest-to zależy. Budowanie i utrzymywanie natywnej aplikacji jest uciążliwe i często dość kosztowne. Na szczęście jest inna opcja. Ta opcja łączy radość natywnej aplikacji z technologią, której używamy w sieci: progressive web app, czyli PWA.
co to jest PWA?
PWA oznacza progressive web app. Jest to aplikacja zbudowana z technologii internetowych, które wszyscy znamy i kochamy, takich jak HTML, CSS i JavaScript, ale z wyczuciem i funkcjonalnością, która konkuruje z rzeczywistą natywną aplikacją. Dzięki kilku inteligentnym dodatkom możesz zmienić prawie każdą stronę w progresywną aplikację internetową. Oznacza to, że można zbudować PWA dość szybko, w odniesieniu do natywnej aplikacji, która jest dość trudna do opracowania. Ponadto możesz oferować wszystkie funkcje aplikacji natywnych, takie jak powiadomienia push, wsparcie offline i wiele innych.
wiele witryn, które znajdziesz w Internecie, jest w rzeczywistości progresywną aplikacją internetową. Weź twitter.com na przykład. Jeśli odwiedzasz tę witrynę na smartfonie, możesz ją zainstalować na ekranie głównym. Teraz, otwierając zapisaną witrynę Twitter, zauważysz, że wygląda i działa tak samo jak natywna aplikacja. Nie ma okna przeglądarki ani nic. Nie ma różnicy w uruchamianiu go z iPhone ’ a lub smartfona z Androidem. Po prostu zaloguj się i możesz już iść. To duża zaleta budowania aplikacji internetowej z myślą o PWA.
PWAs zyskują na popularności. Wiele dużych witryn to PWAs, jak Starbucks.com, Pinterest.com, Washingtonpost.com oraz Uber.com są faktycznie instalowane na ekranie głównym i oferują porównywalne wrażenia z ich natywnymi aplikacjami.
Jaka jest różnica między natywną aplikacją a PWA?
natywna aplikacja, taka jak ta pobrana ze sklepu Apple App Store lub Google Play Store, jest często zbudowana w języku programowania specyficznym dla tej platformy. Więc dla aplikacji na iOS, to byłoby Swift, a dla aplikacji na Androida, Java. Jeśli chcesz zbudować aplikację na te platformy, musisz znać technologię. Tak, są skróty, ale te mają swoje ograniczenia. Jeśli chcesz mieć aplikację na wszystkich platformach mobilnych, musisz znać wszystkie różne technologie. Nie ma łatwego sposobu, aby go zbudować i opublikować we wszystkich sklepach.
oczywiście istnieją sposoby, aby uzyskać to, co najlepsze z obu światów. Na przykład postępowa aplikacja internetowa. To działa w przeglądarce i — po zapisaniu na ekranie głównym-działa jak natywna aplikacja. Uzyskuje nawet dostęp do podstawowego sprzętu i oprogramowania, do których przeglądarka nie może uzyskać dostępu ze względów bezpieczeństwa. Jeśli PWA działa świetnie, użytkownicy nigdy nie będą wiedzieć, że używają aplikacji internetowej zamiast natywnej.
oczywiście są pewne zastrzeżenia. Chociaż przeglądarki szybko przyjęły tę technologię, nadal istnieją pewne ograniczenia. Na iOS potrzebna technologia działa w Safari. Apple nie chce jeszcze wszystkiego wspierać, co sprawia, że jest to trochę uciążliwe, aby wszędzie uzyskać takie same wrażenia.
jakie są korzyści z PWA?
głównym powodem, dla którego wszyscy ścigają aplikacje, jest to, że oferują większe zaangażowanie. Użytkownicy, którzy instalują Twoją aplikację, są twoimi największymi fanami i są bardziej skłonni przekształcić ich użycie w sprzedaż lub rejestrację. Dzięki powiadomieniom push znacznie łatwiej jest nawiązać kontakt z użytkownikami. Aplikacje mogą oferować doskonałe wrażenia, które mogą zrobić dobrze dla marki.
w tym artykule omówiliśmy niektóre plusy PWAs, ale oto krótki przegląd:
- nie musisz przechodzić przez ten proces, aby dostać się do różnych sklepów z aplikacjami
- możesz budować PWAs za pomocą popularnych technologii internetowych
- są one często tańsze w budowie
- ponieważ zmieniasz swoją witrynę w aplikację, będziesz miał mniej baz kodu do utrzymania
- PWAs są responsywne i działają z wieloma różnymi rozmiarami ekranu
- PWAs są płynne, szybkie i lekkie
- nie musisz rozdawać dużych kawałki pieniędzy do Google i Apple
- działają offline, w przeciwieństwie do zwykłej strony
- PWA są wykrywalne przez wyszukiwarki (które mają dużo większe odbiorców niż sklepy z aplikacjami. Ponadto, jeśli chcesz, możesz nadal dystrybuować swoje PWA za pośrednictwem sklepów z aplikacjami)
- możesz użyć powiadomień push, aby ponownie zaangażować użytkowników
- instalacja PWA może prowadzić do większego zaangażowania
mimo to, natywne aplikacje czasami wygrywają. PWAs uzyskać coraz głębszy dostęp do systemu operacyjnego smartfona, ale natywna aplikacja może jeszcze głębiej. Poza tym są granice możliwości PWA. Na przykład PWAs nie są najlepszym wyborem, gdy chcesz tworzyć gry o wysokiej wydajności.
Ogólnie rzecz biorąc, wiele sensu ma myślenie o posiadaniu PWA w strategii mobilnej. Ale główne pytanie, które powinieneś sobie zadać, brzmi: czy moja publiczność tego chce?
dla kogo to?
Czy każdy powinien po prostu zbudować PWA i z tym skończyć? Nie, rozważ swoją firmę i-co ważniejsze-grupę docelową. Czy oni w ogóle używają aplikacji? Czy nie jest to zbyt skomplikowany sposób dotarcia do tego, co chcesz osiągnąć? Ponownie, jak wszystko, musisz zbadać potrzeby swoich odbiorców. Zadaj sobie pytanie, co chcesz, aby ta technologia zrobiła? Gdzie są Twoi użytkownicy? Czy mają dobre połączenie danych i solidny sprzęt? Jak i gdzie korzystają z Twoich treści? A czy uważasz, że aplikacja może pomóc im lepiej wykonywać swoją pracę?
PWAs są zajebiste i ich implementacja wcale nie musi być taka trudna. Ale to, że to łatwe, nie znaczy, że powinieneś to robić. Jeśli twoja publiczność nie ma takiej potrzeby, po co ją budujesz?
jakie są obawy SEO PWA?
PWA jest z natury webcentryczny. Powstał z Internetu i został opracowany z myślą o wyszukiwarkach, aby ułatwić odkrywanie. Oczywiście możesz stworzyć progresywną aplikację internetową z każdej starej witryny i nie trzeba wiele, aby to zrobić. Jednak wiele PWA używać JavaScript do budowania bardziej złożonych funkcjonalności i podczas gdy Wyszukiwarki stały się apt w renderowaniu JavaScript, to nadal może być powodem do niepokoju.
konfigurując PWA, musisz upewnić się, że Twój JavaScript jest dostępny. Nie blokuj plików dla botów i upewnij się, że linki są dostępne. Aby usprawnić proces renderowania, możesz sprawić, że Twój framework JavaScript będzie używał renderowania po stronie serwera.
przekształcenie Twojej witryny w PWA nie oznacza bezpośredniej poprawy SEO tej witryny. Jeśli warto zmienić swoją witrynę w PWA, zrób to, ale nie rób tego Dla żadnych postrzeganych korzyści SEO. Jeśli masz świetne PWA, oferujesz swoim użytkownikom fantastyczne wrażenia użytkownika, które mogą sprawić, że będziesz jednym z konkurencji. W związku z tym dobrze jest przyjrzeć się im w swojej mobilnej strategii SEO.
jakie są trzy główne elementy składowe?
nie trzeba wiele, aby skonfigurować PWA. Są trzy rzeczy, które musisz podać, zanim Twoja witryna zamieni się w ważny PWA.
- bezpieczne połączenie (HTTPS): PWAs działają tylko na zaufanych połączeniach, musisz je obsługiwać przez bezpieczne połączenie. Jest to nie tylko ze względów bezpieczeństwa, ale także bardzo ważny czynnik zaufania dla użytkowników.
- Service worker: Service worker to fragment skryptu, który działa w tle. Pomaga to określić, jak obsługiwać żądania sieciowe dla Twojego PWA, umożliwiając bardziej złożoną pracę.
- plik manifestu: ten plik JSON zawiera informacje o tym, jak powinien wyglądać i działać Twój PWA. Tutaj określasz nazwę, opis, ikony, kolory itp.
oto przykładowy manifest z Google:
nie wygląda zbyt mocno, prawda? Kilka ciekawych rzeczy na tej liście:
-
start-url
: to określa, gdzie aplikacja powinna się uruchomić. Lepiej pozwolić użytkownikom wylądować na konkretnej stronie dla Ciebie PWA. -
display
: pomaga to określić, jaki typ interfejsu przeglądarki chcesz wyświetlić. Opcje tofullscreen
standalone
minimal-ui
I standardowy interfejsbrowser
.
te trzy rzeczy wymienione powyżej są minimalnymi wymaganiami dla uruchomienia PWA. Możesz rozszerzyć funkcjonalność za pomocą JavaScript (frameworków).
Jak założyć PWA?
istnieje wiele zasobów, aby spróbować swoich sił w budowaniu prostego PWA. Pozwala to poczuć proces. Google ma doskonały, łatwy do naśladowania samouczek na PWAS w Internecie.dev site. Mozilla ma wiele dokumentacji na temat tworzenia progresywnych aplikacji internetowych. Microsoft ma również bogate dokumenty programistyczne dotyczące budowania PWAs. Microsoft zbudował nawet narzędzie o nazwie PWABuilder, które pomoże Ci zmienić witrynę w PWA. Oczywiście istnieją wtyczki WordPress, które pomagają tworzyć PWA swojej witryny. Ponadto Google pracuje nad wprowadzeniem podstawowej obsługi PWAs do rdzenia WordPress.
zaangażuj swoich użytkowników Dzięki progresywnej aplikacji internetowej
Progresywne aplikacje internetowe mogą być doskonałym dodatkiem do mobilnego zestawu narzędzi. Dobrze zrobione, są szybkie, działają w trybie offline i działają jak natywna aplikacja. Podsumowując, mogą zaoferować użytkownikom niesamowite wrażenia użytkownika. Zaangażowani użytkownicy to zadowoleni użytkownicy, prawda?