Progressive Web Apps czy PWA zyskują coraz większą popularność ze względu na swoją aktualną funkcjonalność.Dzięki najnowocześniejszej technologii poprawia jakość obsługi klienta i przynosi firmie większe przychody.Dlatego wiele firm zastosowało tę platformę w sklepach internetowych, aby wykorzystać zalety PWA.Szczególnie wiele firm wybiera progresywne aplikacje internetowe na Magento.Następnie przekażemy Ci szczegółową listę kontrolną dotyczącą studia Magento PWA, aby pomóc Ci się do niego przyzwyczaić.
Przegląd studia PWA
Co to jest progresywna aplikacja internetowa?
Progresywna aplikacja internetowa wygląda i działa jak aplikacja natywna, ale działa bezpośrednio w przeglądarkach mobilnych.Nie ma potrzeby pobierania czegokolwiek z App Store.Zamiast tego klienci natychmiast uzyskują w swoich przeglądarkach środowisko podobne do aplikacji.
Funkcja progresywnej aplikacji internetowej
Możliwość pracy offline:Service workers – za tę funkcję odpowiada technologia.Dzięki temu aplikacja może przechowywać rzeczy w trybie offline i elastycznie zarządzać żądaniami sieci w celu ich pobrania.W rezultacie prowadzi to do zminimalizowania ilości danych, których potrzebujemy do uruchomienia aplikacji.
Wykrywalność i łatwa instalacja:PWA to strona internetowa z kilkoma dodatkami, które można znaleźć za pomocą zwykłych wyszukiwarek, takich jak Google lub Bing.Dlatego użytkownicy nie muszą niczego pobierać ze sklepów z aplikacjami.Instalacja PWA jest bardzo prosta, odbywa się w tle podczas pierwszej wizyty.
Wykorzystanie funkcji telefonu:PWA mają wiele możliwości dostępu do funkcji urządzenia na Androidzie i kilka mniej na iOS.Korzystanie z kamer, GPS lub skanerów linii papilarnych w sposób podobny do aplikacji wzbogaca wrażenia użytkownika.
Automatyczne aktualizacje:PWA umożliwia wydawcom natychmiastowe wdrażanie poprawek.Co więcej, pozwala im zachować pełną kontrolę nad treścią.Klienci zawsze korzystają z najnowszej wersji aplikacji.
Bezpieczeństwo:Dzięki zastosowaniu protokołu HTTPS dane są bezpieczne ze względu na szyfrowanie, a przez to trudniejsze do przechwycenia i zmiany.Ponadto użytkownicy postrzegają HTTPS jako gwarancję bezpieczeństwa i niezawodności wydawców.A Google daje dodatkowe punkty w rankingu wyszukiwania za korzystanie z niego.
Poczucie aplikacji:cała idea stojąca za PWA polega na znalezieniu sposobu na połączenie najlepszego możliwego doświadczenia z aplikacją przypominającą aplikację z otwartą naturą sieci.
Zarys Magento PWA Studio
Geneza Magento PWA Studio
Magento udostępniło zestaw narzędzi dla wszystkich handlowców prowadzących sklepy internetowe.Magento PWA Studio to nazwa tego zestawu narzędzi.Zaoszczędzi to sprzedawcom internetowym dużo czasu i pieniędzy na tworzenie natywnych aplikacji dla wszystkich różnych systemów operacyjnych.
Dzięki narzędziom do projektowania stron internetowych przypominających aplikacje Magento, sprzedawcy internetowi mogą zwiększyć swój współczynnik konwersji mobilnej.Jest to wynik poprawy doświadczeń klientów w wielu kanałach.Poza tym Magento PWA pozwala mu zachowywać się jak natywna aplikacja, co zapewnia lepsze wrażenia użytkownika.
Sprzedawcy mogą wykorzystać niesamowicie szybką architekturę frontonu i otwarte internetowe interfejsy API.Pomaga przekształcić ich sklepy w to, co szybko staje się nową normą.
Pakiet budowania PWA
Pakiet Buildpack zawiera niezbędne narzędzia programistyczne oraz kompiluje biblioteki i narzędzia do tworzenia błyskawicznego interfejsu i PWA.Pozwala na zaaranżowanie środowiska lokalnego pod rozwój PWA.
Witryna sklepu PWA
PWA Storefront, znany również jako Venia Storefront, to PWA typu proof-of-concept zbudowane z narzędzi Peregrine i PWA Buildpack.Dowiadując się o Magento PWA Studio i jego możliwościach, witryna sklepu pokazuje przykładowe strony kategorii i szczegóły produktów.
Wędrowiec
Projekt Magento Peregrine, jak wcześniej wspomniano, zawiera zestaw narzędzi i komponentów interfejsu użytkownika do tworzenia Magento PWA.Składniki można łączyć, rozszerzać i mieszać, tworząc wyjątkowe sklepy Magento 2 PWA.
Niektóre wyjątkowe cechy Magento PWA Studio
ReactJS – ReactJS działa bardzo dobrze i zapewnia doskonałe wrażenia zakupowe i deweloperskie.
Alternatywa dla ekranu głównego – Magento PWA zapewnia sklep, który można pobrać na ekranie głównym.Będzie wyglądać i działać jako natywna aplikacja
Działa w trybie offline – aplikacje internetowe PWA mogą działać zarówno w trybie offline, jak i online.
Magento Studio udostępnia narzędzia programistyczne PWA, które są najnowocześniejsze i zawierają dokładną dokumentację.Użytkownicy mogą szybko zaaranżować z nimi własne lokalne środowiska programistyczne PWA.
Łatwe ustawienie
Konfiguracja PWA z zaplecza jest prosta dzięki Magento Studio.Aby pomyślnie uruchomić aplikację, użytkownicy muszą wstawić adres URL instancji Magento do pliku.env.Następnie sklonujesz repozytorium i uruchomisz polecenie.Od samego początku było oczywiste, że łatwość rozwoju jest głównym celem.
WykresQL
Ponieważ GraphQL wykorzystuje deklaratywne pobieranie danych, PWA opracowane w Magento Studio prawie nie powodują nadmiernego pobierania zapytań. Wtedy lepiej jest w stanie pomieścić wielu użytkowników z różnych źródeł.
Społeczność
Magento to dobrze znana platforma eCommerce, która zaowocowała dużą globalną społecznością użytkowników i współpracowników Magento PWA.
Architektura i szkielet pracowni Magento PWA
Studio jest naprawdę proste w konfiguracji i obsłudze, aby uniknąć błędów pojawiających się na początku procesu tworzenia aplikacji.Deweloperzy są natychmiast ostrzegani, gdy coś nie jest odpowiednio zaaranżowane.Oszczędza to czas, jeśli chodzi o wykrywanie i naprawianie błędów, gdy program jest prawie gotowy.
Konstruktor studia Magento PWA jest gotowy do użycia
Nie ma potrzeby instalowania kreatora i spędzania czasu na dostosowywaniu i konfigurowaniu środowiska.Wszystko działa od razu z Magento PWA Studio po instalacji.Wszystko jest skonfigurowane i gotowe do pracy.
Gotowe elementy można dostosować
PWA Studio zawiera dużą liczbę skompletowanych i gotowych do użycia części serwisu.Tworząc swoją stronę internetową, możesz użyć dowolnego lub wszystkich elementów w dowolnej kombinacji.W tym momencie przygotowane elementy mogłyby być wykorzystane dokładnie tak, jak są.Nawet gotowe elementy można modyfikować, aby spełnić potrzeby dewelopera lub konsumenta.
Idealnie prosty routing i buforowanie
Funkcje routingu i buforowania Magento PWA Studio są dodatkowymi zaletami.Routing i buforowanie są wykonywane w taki sam sposób, jak zawsze, bez zmian.Jeśli zastosujesz konwencjonalną technikę routingu i buforowania Magento, nie będziesz musiał uczestniczyć w routingu i buforowaniu.
Magento PWA Studio i wady, które trzeba będzie pokonać
Jedna platforma
Jeśli chcesz posiadać Magento Studio, każdy sklep musi działać na Magento 2.3 i nowszych wersjach.Chociaż nie trzeba się martwić o kompatybilność, jest to dość ograniczone.
Brak kompatybilności
Jeśli chodzi o kompatybilność, funkcja GraphicQL Magento Studios czyni ją nieodpowiednią w stosunku do poprzednich wersji.
Problemy z obsługą iOS
Magento nie obsługuje powiadomień iOS PWA i nie będzie działać z urządzeniami iOS, które nie są połączone z Internetem.
Problemy z walidacją
Podczas tworzenia nowych kont klientów mogą pojawić się wątpliwości dotyczące walidacji.Dotyczy to szczególnie użytkowników iOS podczas konfigurowania hasła.Powiadomienie nie może zostać dostarczone, jeśli wybrane hasło nie spełnia wymagań dotyczących hasła.
Jak zainstalować Magento PWA Studio (z wersją 2 )
Krok 1: Zainstaluj najnowszą wersję Magento
Aby zainstalować Magento PWA Studio, musisz najpierw mieć zainstalowaną wersję Magento 2.3.x.Bez niego nie można zainstalować Magento PWA Studio Project(2.3), ponieważ żadna inna wersja Magento go nie obsługuje.
Krok 2: Zainstaluj NodeJS
Następnie musisz zainstalować NodeJS (wersja >=10.14.1).Jeśli nie znasz tej techniki, użyj polecenia wymienionego poniżej.(Dotyczy to tylko użytkowników Linuksa.)
sudo apt-get install nodejs
Przede wszystkim musisz sprawdzić wersję Node :
node -v
Następnie przejrzyj wersję NPM:
npm -v
Jeśli zainstalowana wersja jest starsza niż pokazana powyżej, użyj poniższego polecenia, aby uaktualnić do najnowszej i stabilnej wersji węzła.
sudo npm cache clean -f
sudo npm install -gn
sudo n stable
Krok 3: Zainstaluj i uruchom Node JS
Po instalacji i uruchomieniu NodeJS, będziesz musiał zainstalować Yarn (Yarn >=1.13.0 ).Uruchom następujące polecenie, aby zainstalować przędzę.(Dotyczy tylko systemu operacyjnego Linux).
sudo npm install yarn -g
Teraz sprawdź wersję włóczki :
yarn -v
Krok 4:
Po zainstalowaniu Yarn sklonuj repozytorium PWA do katalogu deweloperskiego.
Krok 5:
W następstwie tego kroku zainstaluj zależności projektu, uruchamiając następujące polecenie.
yarn install
Krok 6: Utwórz plik .env
Aby utworzyć plik .env, uruchom następujące polecenie z katalogu głównego PWA-
(Dla motywu Venia możesz użyć zainstalowanego przez Ciebie Magento lub domyślnego Magento 2.3.1. Tutaj używamy domyślnego.)
Możesz również utworzyć plik .env i ustawić niestandardową wartość MAGENTO_BACKEND_URL za pomocą następującego polecenia:
Krok 7: Zainstaluj certyfikat SSL
Zainstaluj certyfikat SSL, ponieważ PWA działa na bezpiecznej ścieżce, Możesz uruchomić polecenie create-custom-origin w celu wygenerowania certyfikatu SSL:
Krok 8: Zainstaluj dane próbki Venia
Możesz również zainstalować Venia Sample data, skrypt bash jest już dostępny pod adresem
Aby zainstalować przykładowe dane w Magento, uruchom następujące polecenia:
Zbuduj teraz wszystkie artefakty dla swojego motywu, uruchamiając-
yarn run build
Uruchom serwer, uruchamiając dowolne z następujących poleceń zgodnie z potrzebami z katalogu głównego projektu PWA.
W zakresie rozwoju-
W celu uruchomienia pełnego deweloperskiego PWA Studio
Za budowanie artefaktów i prowadzenie studia PWA do inscenizacji
PWA zostało pomyślnie zainstalowane.Po uruchomieniu powyższych poleceń zobaczysz adres URL, pod którym działa PWA.Następnie wskaże, czy instalacja się powiodła, czy nie
Wniosek
Przeprowadzimy Cię przez ten artykuł z nadzieją, że: masz przegląd studia Magento PWA. Dzięki wielu wspaniałym funkcjom zdecydowanie warto wskoczyć, aby powiększyć swój sklep internetowy. Dzięki temu Twoja firma może sprostać wymaganiom klientów i daje więcej możliwości rozwoju w środowisku internetowym. Jeśli jednak nadal nie masz pewności co do tej technologii, Magesolution chętnie zostanie partnerem wspierającym Twój biznes. Dzięki wielu doświadczeniom w tej dziedzinie jesteśmy pewni, że zapewnimy najlepszą usługę: Magento Progressive Web Application Development.Dlatego jeśli masz jakiekolwiek pytania, skontaktuj się z nami, aby uzyskać więcej informacji.
