Kompleksowy przewodnik po tworzeniu Magento 2 PWA

Magento jest zawsze ulubioną platformą dla firm, aby rozpocząć swój sklep internetowy. Jednak ze względu na przewagę Magento coraz więcej firm wskakuje na ten rynek, aby rozszerzyć swoje możliwości i doświadczenia klientów. Dlatego rynek online staje się dość konkurencyjny. W rezultacie firmy zawsze muszą nadążać za najnowocześniejszą technologią, aby konkurować z konkurencją. Progressive Web Apps lub PWA to jedna z nowoczesnych technologii, którą wiele firm chce zintegrować z tą aplikacją dla sklepów internetowych. A Magento 2 PWA to doskonały wybór. W tym artykule przedstawimy Ci szczegółową listę kontrolną, jak zbudować Magento 2 PWA w najprostszy sposób.

Przede wszystkim musisz wiedzieć o Progressive Web App

Czym właściwie 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.

Niektóre wyjątkowe funkcje progresywnej aplikacji internetowej

Możliwość pracy offline : Service worker – 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 jak w aplikacji : cała idea PWA polega na znalezieniu sposobu na połączenie najlepszego możliwego doświadczenia z aplikacją przypominającą aplikację o otwartej naturze sieci.

Powiadomienia push :   Powiadomienia push, jako część solidnej strategii wiadomości, mogą zainteresować użytkowników i zachęcić ich do otwierania i korzystania z aplikacji.

Czym jest Magento 2 i dlaczego staje się coraz bardziej popularne?

Jak wiesz, Magento to platforma eCommerce typu open source, oferująca zarządzanie zamówieniami, analizę biznesową i wysyłkę. Popularne integracje Magento obejmują pliki ERP, aplikacje finansowe i płatnicze

Co zatem odróżnia Magento 2 od Magento 1? Jakie nowe funkcje wnosi do stołu?

Zacznijmy od niektórych niedociągnięć Magento 1. Platforma została zaprojektowana tak, aby była elastyczna. Jednym z głównych powodów popularności Magento jest właśnie to. Jednak ta elastyczność ma wadę polegającą na tym, że interfejs użytkownika jest bardziej skomplikowany i trudniejszy w użyciu, jeśli programiści nadal pracują na platformie i personalizują ją. Z powodu tych zmian witryna może również działać wolniej.

Magento 1 nie ma funkcji oferowanych przez konkurentów, takich jak responsywność mobilna, oprócz wysokiej krzywej uczenia się i znacznych spowolnień.

Wiele z tych kwestii jest uwzględnionych w Magento 2. Istnieje kilka ważnych rozróżnień:

• Tworzy kopie zapasowe najnowszych wersji PHP, co może spowolnić działanie Twojej witryny.
• Obsługiwane są CSS3, HTML5 i MySQL.
• Szybsze czasy ładowania strony (średnio 20% szybciej) niż Magento 1.
• Czy witryna jest przyjazna dla urządzeń mobilnych?
• Ma bardziej przyjazny dla użytkownika interfejs administratora dla pracowników nietechnicznych.
• Zmniejsza liczbę kroków w procesie kasowym z sześciu w Magento 1 do dwóch w Magento 2.

Ważne jest, aby zrozumieć, że Magento 2 występuje w trzech różnych edycjach.

• Magento 2 Open Source (wcześniej znany jako Magento 2 Open Source): Każdy może pobrać ten produkt za darmo ze strony internetowej Magento. Następnie użytkownik może zainstalować Magento, ale odpowiada za wszystkie opłaty za hosting, wsparcie i rozwój.
• Magento 2 Commerce (on-prem) — ta płatna opcja lokalna obejmuje dodatkowe funkcje i wsparcie. Ze względu na wysoką cenę miesięczną mogą ją przyjąć tylko większe firmy. (Koszty omówiono poniżej.)
• Magento 2 Commerce Cloud — hostowana w chmurze wersja Magento 2 Commerce ma wszystkie możliwości lokalnej wersji Enterprise Edition bez potrzeby samodzielnego hostingu.

Dlaczego stosowanie PWA w Magento 2 stało się ostatnio trendem?

Konsumenci Magento byli bardzo zainteresowani integracją Progressive Web App, zwłaszcza od czasu pojawienia się Magento 2 PWA Studio. Istnieje kilka powodów, dla których warto przełączyć swoją stronę na Magento 2 PWA, które wymieniono poniżej.

Lepsze wrażenia użytkownika na urządzeniach mobilnych

PWA można łatwo pobrać i zainstalować na urządzeniach mobilnych użytkowników, ale to dopiero początek wielkich możliwości. Możesz cieszyć się trybem offline, synchronizacją w tle (odkładaj działania do momentu ustabilizowania połączenia sieciowego) i innymi funkcjami podobnymi do aplikacji.

Niższe koszty rozwoju i konserwacji w porównaniu z aplikacjami natywnymi  

Będziesz musiał stworzyć dwie różne wersje dla aplikacji natywnych (jedną na iOS i jedną na Androida). Powoduje to podwojenie czasu i wysiłku na rozwój i utrzymanie aplikacji. Jednak do skonstruowania aplikacji PWA, która może działać w każdym systemie operacyjnym, wymagana jest pojedyncza baza kodu.

Agnostycyzm wobec urządzeń

Największą zaletą Magento 2 PWA, którą widać, jest agnostyka urządzeń. Szczerze mówiąc oznacza to, że takie programy są kompatybilne z każdym urządzeniem i przeglądarką. Klienci mogą robić zakupy na preferowanych urządzeniach w sklepie internetowym.

Najwyższa pozycja w Google SERP

Aplikacje PWA i strony internetowe mają wiele wspólnych cech. Najwyższe pozycje w wyszukiwarkach, takie jak Google, sprawiają, że są one niezwykle dostępne i można je dostosować do wszystkich użytkowników. Pod tym względem aplikacje Magento PWA mają znaczną przewagę nad aplikacjami natywnymi i hybrydowymi. Z pomocą taktyk SEO, inicjatyw marketingowych i płatnych reklam możesz sprawić, że będą jeszcze bardziej wykrywalne. Tradycyjne aplikacje są reklamowane głównie w sklepach z aplikacjami.

Możliwość łączenia

To kolejna cecha wspólna dla PWA i stron internetowych. Może przechowywać informacje i ponownie ładować swój stan dzięki dostępności ujednoliconego identyfikatora zasobów (URI). Klienci mogą zapisywać linki do Twojego Magento 2 PWA, udostępniać adresy URL, a nawet ponownie ładować te same strony, które zapisali w zakładkach. Aplikacje progresywne działają w tej sytuacji podobnie jak tradycyjne strony internetowe.

Brak aktualizacji po stronie użytkownika

Każdy rozumie potrzebę regularnego aktualizowania aplikacji. Za zainstalowanie tych aktualizacji na swoich urządzeniach odpowiadają użytkownicy końcowi. Nie potrzebujesz autoryzacji użytkownika, aktualizacje Magento PWA mogą być przeprowadzane automatycznie. W rezultacie, niezależnie od tego, czy dokonają aktualizacji, czy nie, użytkownicy otrzymają najbardziej aktualne funkcje.

Praca w trybie offline

Możliwość działania offline to najlepsza cecha Magento 2 PWA. Użytkownicy mogą uzyskać dostęp do treści, które oglądali w Internecie, nawet jeśli nie mają dostępu do Internetu. Jest to możliwe dzięki wbudowanemu mechanizmowi cache, który automatycznie zapisuje informacje o wszystkich przeglądanych stronach.

PWA Magento 2 to doskonałe rozwiązanie, jeśli docelowi odbiorcy mieszkają w kraju ze słabym lub przeciętnym połączeniem internetowym. Ta funkcja minimalizuje również porzucanie katalogu o co najmniej 35%, ponieważ użytkownicy mogą kontynuować zakupy w firmie po przejściu do trybu offline.

Powiadomienia push

Powiadomienia push są teraz dostępne dla wszystkich dzięki progresywnym rozwiązaniom aplikacji. Wcześniej były one dostępne tylko u sprzedawców internetowych, którzy mieli dedykowane aplikacje na smartfony. Według Google 60% użytkowników PWA zezwala tym aplikacjom na wysyłanie powiadomień push. Możesz szybko przekształcić tę funkcję w potężną maszynę do generowania sprzedaży, powiadamiając klientów o specjalnych ofertach i zniżkach świątecznych. Ponadto możesz przypominać im o produktach znajdujących się w ich koszyku i zachęcać do ich zakupu .

Bezpieczeństwo

PWA Magento 2 są całkiem bezpieczne. Protokół HTTPS będzie odpowiedzialny za bezpieczeństwo danych i ochronę przed man-in-the-middle. Zabrania również modyfikacji treści i zakupów.

Brak wymagań dotyczących sklepu z aplikacjami

Dzięki Magento PWA nie musisz spełniać wszystkich standardów Google Play i App Store. Jeśli Twoja aplikacja nie spełnia wymagań, może zostać zablokowana lub usunięta ze sklepu z aplikacjami. Ponadto nie powiadamiają z wyprzedzeniem, co pozostawia niewiele możliwości rozwiązania problemów.

Firmy mogą korzystać z progresywnych aplikacji internetowych, aby ominąć te ograniczenia. Nie musisz przestrzegać żadnych praw ani przepisów, co oznacza, że ​​Twoja aplikacja jest mniej podatna na zablokowanie.

Jak więc efektywnie zbudować Magento 2 PWA?

Właściciele sklepów Magento powinni rozważyć trzy opcje integracji Magento PWA:

Zainstaluj rozszerzenia Magento 2 PWA

Jest to najprostsze podejście do włączenia funkcji Progressive Web App do istniejącej witryny Magento. Możesz teraz wybierać spośród wielu rozszerzeń Magento 2 PWA (zarówno darmowych, jak i premium) z różnych źródeł.

Plusy: Moduły Magento 2 PWA są niedrogie (od 0,00 do 150 USD). Dodatkowo zainstalowanie tych rozszerzeń w Twojej witrynie zajmuje tylko kilka godzin.

Wady: Ogólnie rzecz biorąc, większość rozszerzeń Magento 2 PWA nie jest w stanie zapewnić pełnej funkcjonalności progresywnej aplikacji internetowej. Niektóre moduły mogą tylko „dodawać do ekranu głównego” i dostarczać powiadomienia push, ignorując inne ważne funkcje, takie jak szybkie ładowanie witryny, tryb offline i synchronizacja w tle.

Twoje PWA przy użyciu Magento 2 PWA Studio

Magento 2.3 PWA Studio zostało wydane, aby pomóc nam w opracowaniu, wdrożeniu i utrzymaniu sklepu PWA dla witryn Magento 2.

Plusy: Rozwijanie PWA od podstaw za pomocą Magento 2 PWA Studio jest bardziej dokładnym rozwiązaniem niż korzystanie z dostępnych rozszerzeń Magento 2 PWA. Zastąpi on stary sklep Magento witryną sklepu z progresywną aplikacją internetową (PWA), która jest połączona z Twoim zapleczem za pośrednictwem interfejsu API.

Minusy: Magento 2 PWA Studio to w zasadzie zbiór narzędzi, które pomogą Ci zbudować PWA. Jest jeszcze wiele do zrobienia. Rozważmy sklep Venia (demo PWA Studio), który jest niezwykle prosty i nie ma kilku domyślnych funkcji Magento.

Konwertuj swoją witrynę na PWA za pomocą motywu Magento 2 PWA

Motyw Magento 2 PWA to bogate w funkcje rozwiązanie integrujące PWA zbudowane na Magento 2.3 PWA Studio, ReactJS i GraphQL. Składa się z dwóch części: dużego sklepu PWA i wbudowanego API, które łączy sklep z backendem Magento.

Plusy: Wydaje się, że jest to jak dotąd najbardziej obiecujące podejście do integracji PWA z witryną Magento 2. Po pierwsze, może zapewnić wszystko, czego oczekujemy od PWA: błyskawiczne czasy ładowania (zarówno na komputerach stacjonarnych, jak i urządzeniach mobilnych), skrót na ekranie głównym, stronę powitalną, wyświetlanie pełnoekranowe, niezależność sieci, tło synchronizacja, niskie zużycie danych i łatwa aktualizacja. Po drugie, demo witryny sklepu PWA jest znacznie lepszą wersją domyślnego sklepu Venii, z kompleksowym układem dla wszystkich stron witryny. W rezultacie zaoszczędzi to dużo czasu na rozwoju PWA.

Minusy: Zwykle Magento 2 PWA Theme spełnia wszystkie standardy Progressive Web App i zapewnia przyjemną witrynę sklepową. I wygląda jak zwykły interfejs Magento 2. Jednak nadal będziesz musiał zmienić witrynę sklepową PWA, aby pasowała do Twojego projektu. Musisz też sprawdzić zgodność z nową witryną sklepową i zaktualizować interfejs API, jeśli Twoja witryna ma jakiekolwiek niestandardowe funkcje lub korzysta z rozszerzeń innych firm.

Ile będziesz musiał zapłacić w jedną stronę?

Jak wspomnieliśmy, istnieją trzy metody konwersji stron Magento 2 na PWA, które wiążą się z różnymi kosztami:

Rozszerzenia Magento 2 PWA:  

Musisz zakupić moduł (do 150 USD) i zapłacić za usługę instalacji (lub samodzielnie zainstalować i skonfigurować rozszerzenie).

Studio Magento 2 PWA:

Aby zbudować swoje PWA od podstaw, musisz zatrudnić programistów PWA z rozległą wiedzą zarówno na temat Magento 2, jak i PWA. Korzystając z narzędzi Magento 2 PWA Studio, rozwój Twojego sklepu PWA i nowego API może zająć do 6 miesięcy. Na tę integrację należy odłożyć sporą sumę pieniędzy.

Motyw Magento 2 PWA:

Ponieważ interfejs sklepu i podstawowy interfejs API PWA zostały już ustalone, koszt projektu będzie przede wszystkim zależał od pożądanego poziomu dostosowania. Ten koszt byłby niższy niż drugie rozwiązanie i większy niż pierwszy, ale jest wart twoich pieniędzy.

Wniosek

Przeprowadzimy Cię przez ten artykuł z nadzieją, że: masz przegląd Magento 2 PWA i jak go zbudować. Dzięki mnóstwu oszałamiających funkcji zdecydowanie warto wskoczyć, aby zwiększyć efektywność swojego sklepu internetowego. 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.