Co to są progresywne aplikacje internetowe lub PWA w Magento 2?

• Co to znaczy, że Magento staje się platformą progresywnej aplikacji internetowej?
• Jaka będzie struktura kodu PWA w Magento?
• Jaka jest umowa z interfejsami API REST i PWA?

Co to są progresywne aplikacje internetowe?

• Wygląda i zachowuje się jak aplikacja mobilna.
• Brać przewagę z rodzimych mobilnych funkcji urządzenia, bez konieczności użytkownikowi końcowemu do odwiedzenia sklepu z aplikacjami, dokonać zakupu i ściągnąć ją lokalnie .

Dlaczego PWA?

• Szybki
• Bezpieczny (drugi ostatni temat odpowiedzi)
• Czuły
• Kompatybilny z wieloma przeglądarkami
• Tryb offline (sprawdź ostatni temat w odpowiedzi)
• Mobilna „instalacja”
• Udostępniane treści

Ta odpowiedź obejmuje także - Instalacja Magento 2.3 z PWA

Weźmy przykład Flipkart

Flipkart , największa strona e-commerce w Indiach, postanowiła połączyć swoją obecność internetową i natywną aplikację w Progressive Web Application, co spowodowało wzrost konwersji o 70%

Flipkart

Podejście

1. Opracowano Flipkart Lite, progresywną aplikację internetową
2. Dodano pracowników serwisowych dla szybszych czasów ładowania
3. Płynna nawigacja i przewijanie z prędkością 60 klatek / sekundę
4. Utworzono monit „Dodaj do ekranu głównego”, aby zachęcić użytkowników do dodania mobilnej strony internetowej do ekranów głównych

   ---

Wyniki

Nowa progresywna aplikacja internetowa pomaga Flipkart zwiększyć konwersje o 70%

Flipkart działa również w trybie offline

• Pracownicy usług mogą być skryptowani w celu przechwycenia każdego żądania sieciowego i dostarczenia odpowiedzi z pamięci podręcznej, nawet gdy użytkownik jest offline.
• Biblioteka opakowań pracowników usług, która umożliwia stosowanie prostych wzorców, takich jak NetworkFirst, CacheFirstlub NetworkOnly. SW-Toolboxzapewnia LRU pamięć podręczną używaną w aplikacji Flipkart do przechowywania poprzednich wyników wyszukiwania na stronie przeglądania i ostatnich kilku odwiedzonych stronach produktów.
• Przybornik ma również mechanizm unieważniania TTL-based pamięci podręcznej , którego używamy do usuwania nieaktualnych treści. Pracownicy serwisowi zapewniają prymitywne skrypty niskiego poziomu, które to umożliwiają.

ALE ... ALE ... ALE ...

Co to jest Magento PWA Studio?

• • Projekt Magento PWA Studio to zestaw narzędzi programistycznych, które pozwalają na rozwój, wdrażanie i utrzymanie witryny PWA na Magento 2

Projekt Magento PWA Studio zapewnia następujące narzędzia:

---

moduł pwa

• Jego moduły mają takich pomocników, funkcjonalność po stronie serwera i służy jako podstawa dla wszystkich motywów stworzonych przy użyciu Magento PWA Studio.

pwa-buildpack -

• Buildpack to zestaw Webpackwtyczek i narzędzi służących do tworzenia motywów Magento PWA.

• Służy również do konfigurowania i konfigurowania lokalnego środowiska programistycznego dla platformy Magento 2.

Zawiera następujące narzędzia:

• PWADevServer
• Magento Resolver
• Wtyczka Magento Root Components
• magento-layout-loader
• Wtyczka Service Worker

Peregrine - Peregrine to zestawReact componentsstworzony do obsługi Magento specyficzne funkcje, takie jakrouting,root-components, obsługi układu, listy produktów, cen itp wyświetlaczem

Motyw Venia -venia-conceptto motyw demonstracyjny stworzony przez Magento przy użyciu studia Magento PWA. Prezentuje wszystkie aktualnie dostępne funkcje, przepływ pracy i strony

PWA Studio NIE jest

• Nowa wersja Magento

• Wymiana wszystkich front-end

• Aplikacja komputerowa

Narzędzia i biblioteki używane w PWA Studios

Webpack

• Podstawową funkcją pakietu Webpack jest tworzenie jednego lub większej liczby pakietów na podstawie zależności w modułach projektu.

Powłoka aplikacji

• Całkowity rozmiar jest mniejszy
• Żąda obciążenie początkowe trzy pliki: login.html, shell-1234.js,3456.js
• Ładowanie początkowe wymaga załadowania: Shell + Router + content
• Powłoka jest widoczna wcześniej niż przy podejściu do Powłoki strony.

Powłoka strony

• Całkowity rozmiar jest większy (tzn. Zawartość pulpitu nawigacyjnego znajduje się w desce rozdzielczej 1234.js i 4567.js)

• Aplikacja jest dłużej gotowa do pracy offline.

• Żąda obciążenie początkowe tylko dwa pliki: login.html,login-2345.js

• Ładowanie początkowe wymaga załadowania: Shell + content

• shell + contentWidoczne wcześniej niż metody aplikacji powłoki.

Można zastosować podejście hybrydowe, w którym powłoka i treść są oddzielone w dwóch żądaniach (patrz strona administratora jako przykład). Ma to sens, gdy zawartość jest znacznie większa niż powłoka, a powłoka powinna być widoczna wcześniej.

ReactJs

• Biblioteka JavaScript do tworzenia interfejsów użytkownika.

Redux

• Biblioteka JavaScript używana do zarządzania stanem w aplikacji internetowej.

GraphQL

• Język zapytań o dane po stronie klienta i warstwa usługi po stronie serwera.

GraphQL w Magento

Uwierzytelnianie i schemat

Zmniejszenie ilości zapytań Front-end

Renderowanie fazowe

Kompatybilność z przeglądarką pulpitu

• Nieobsługiwane : IE, Safari

Kompatybilność z przeglądarkami mobilnymi

Nieobsługiwane : Android Webview, IE, Safari

PWA są bardziej bezpieczne

• Jako programista internetowy możesz wiedzieć, ile Google zachęca witryny internetowe httpszamiast HTTP. Cyberprzestępcy zawsze znajdują się na szczycie listy twórców stron internetowych i aplikacji.
• W przeszłości HTTPnie był wystarczająco bezpieczny, aby chronić informacje użytkowników.
• Strony internetowe są obecnie programowane HTTPsi łatwo jest uruchomić Progresywną aplikację internetową w bezpiecznym środowisku.
• Podczas wprowadzania danych osobowych w PWA, takich jak dane karty kredytowej lub dane kontaktowe, mogą czuć się bezpiecznie i mieć spokój ducha.

PWA - tryb offline

Offline Wikipedia jest dobrym przykładem PWA, który wykorzystuje model powłoki aplikacji .

• Ładuje się natychmiast przy wielokrotnych wizytach, ale dynamicznie pobiera zawartość za pomocą JS.
• Ta zawartość jest następnie buforowana offline na potrzeby przyszłych wizyt.

Progresywna aplikacja internetowa to bez wątpienia przyszłość tworzenia stron internetowych. W przyszłości witryny handlu elektronicznego, restauracje i źródła medialne zostaną przeniesione z aplikacji natywnej do aplikacji progresywnej. Jednak nadal w początkowej fazie wielu programistów aktywnie szuka sposobów na maksymalne wykorzystanie możliwości oferowanych przez PWA.

Zacznijmy od instalacji Magento 2.3 z PWA

1. Wpisz następujące polecenie w DIR / var / www / html / (m203 to mój katalog Magento 2.3):

composer create-project --repository=https://repo.magento.com/ magento/project-community-edition=2.3.* --stability=beta m203

2. Zainstaluj Magento za pomocą wiersza poleceń:

bin/magento setup:install --base-url=http://localhost/m230 --db-host=localhost --db-name=m230 --db-user=root --db-password=root --backend-frontname=admin --admin-firstname=admin --admin-lastname=admin [email protected] --admin-user=admin --admin-paassword=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1

3. Utwórz podstawowy motyw pwa, który będzie nadrzędny dla motywu PWA Venia.

• Na razie pozwala klonować podstawowe repozytorium motywów pwa. https://github.com/magento-research/theme-frontend-pwa

4. Utwórz katalog app/design/frontend/Magento/pwai skopiuj tutaj wszystkie pliki i katalogi motywu podstawowego.

• Pozwala sprawdzić, czy motyw podstawowy jest dostępny, czy nie.

• Run: php bin/magento setup:upgrade

• I przejdź do Administratora Magento-> Treść-> Motywy

5. Pobierz projekt studia PWA.

6. Przejdź do katalogu głównego instalacji Magento i utwórz folder Pwa dowiązanie symboliczne do katalogu modułu projektu (pwa-studio / packages / pwa-module).

• z tego katalogu uruchomiłem polecenie - / var / www / html / m230

• To jest katalog, w którym moim pobranym źródłem pwa jest / var / www / html / PWA /

ln -s /var/www/html/PWA/pwa-studio-master/packages/pwa-module app/code/Magento/Pwa

7. Połącz także katalog motywów. Przejdź do katalogu głównego instalacji Magento i utwórz folder dowiązania symbolicznego Pwa łączący z katalogiem modułu projektu (pwa-studio / packages / venia-concept).

ln -s /var/www/html/PWA/pwa-studio-master/packages/venia-concept app/design/frontend/Magento/venia

8. Teraz przejdź do katalogu venia-concept swojego projektu pwa-studio, skopiuj .env.distdo nowego .envpliku i zaktualizuj zmienne o adres URL do sklepu programistycznego Magento.

cd /var/www/html/PWA/pwa-studio-master/packages/venia-concept

cp .env.dist .env

9. Zainstaluj motyw Venia i moduł Pwa:

run: php bin/magento setup:upgrade

widzimy, że motyw Venia został pomyślnie zainstalowany.

10. Skonfiguruj motyw Venia z admin->Content->Configuration

11. Przejdź do /var/www/html/PWA/pwa-studio-masterrun path ( ):

npm install

lub

npm install webpack-dev-server -g

12. I wreszcie przejdź do /var/www/html/PWA/pwa-studio-master/packages/venia-concept

npm start

Gratulacje! Skonfigurowałeś środowisko programistyczne dla projektu motywu Venia.

PWA - Progresywna aplikacja internetowa to ogólnie aplikacja internetowa, która jest doświadczeniem użytkownika bogatej sieci. w drodze:

• Niezawodny - ładuj natychmiast, a także dostępny w trybie offline.
• Szybko - w sposób umożliwiający interakcję, w ramach której użytkownik płynnie z nim współdziała, a także bez żadnych przewijanych lub animowanych śmieci.
• Zaangażowanie - jak wskazano powyżej w obu punktach, jeśli aplikacja jest niezawodna i szybka, to oczywiście angażuje więcej wrażeń użytkownika i wydaje się, że jest to naturalna aplikacja.

„Co to znaczy, że Magento staje się platformą progresywnej aplikacji internetowej?”

Podczas gdy magento przygotowuje się do wydania wersji 2.3, zawiera tę funkcję „PWA”, aby usprawnić działanie frontendu w sposób umożliwiający interakcję użytkownika.

Jaka jest umowa z interfejsami API REST i PWA?

Ponieważ magento używa „PWA”, dodaje również „GraphQL API”, aby zapewnić front-endową alternatywę API po stronie programowania REST / SOAP jako „GraphQL”.

Aby uzyskać bardziej szczegółowe informacje na temat „PWA” i nowej funkcji „open-commerce” magento2.3. Możesz odwiedzić oficjalną stronę tego magento .

Progresywny oznacza, że ​​aplikacja ładuje się wraz z wszelkimi istotnymi danymi i zasobami, gdy użytkownik porusza się po Twojej witrynie. Dzięki temu użytkownicy końcowi mogą cieszyć się większą szybkością, użytecznością, obsługą offline i integracją urządzeń.

Internet oznacza, że ​​jest napisany w językach internetowych (HTML, CSS, JavaScript). Umożliwia to utworzenie witryny, która zapewnia więcej funkcji podobnych do aplikacji bez tworzenia aplikacji natywnej ograniczonej do jednej platformy, takiej jak iOS lub Android.

Aplikacja oznacza, że ​​instaluje i uruchamia kod na urządzeniu lub komputerze kupującego. Wykonanie tego zapewnia większą szybkość i możliwości niż w przeszłości jednostronicowe aplikacje JavaScript.

PWA są w zasadzie hybrydą zwykłych stron internetowych i aplikacji mobilnej, umożliwiając korzystanie z aplikacji mobilnych w Internecie.

Magento staje się platformą Progressive Web Application. Innymi słowy, Magento tworzy pakiet narzędzi do budowy sklepów internetowych jako progresywnych aplikacji internetowych. Narzędzia te pomogą programistom w nauce technik PWA, budowaniu błyskawicznych nakładek PWA oraz tworzeniu komponentów i rozszerzeń PWA do ponownego wykorzystania lub sprzedaży na Magento Marketplace. Podsumowując, Magento nazywa ten zestaw narzędzi Magento PWA Studio.

Możesz sprawdzić strukturę kodu na https://github.com/magento-research/pwa-studio

Magento PWA używa GraphQL jako alternatywy dla interfejsu API REST dla PWA.

Aby uzyskać więcej informacji na temat Magento PWA, możesz przejść przez następujące linki:

• https://magento-research.github.io/pwa-studio/
• https://community.magento.com/t5/Magento-DevBlog/Introducing-Magento-PWA-Studio/ba-p/74636
• https://brandastic.com/ideas/magento-progressive-web-apps/
• https://www.monsoonconsulting.com/blog/progressive-web-apps-magento

• Progresywne aplikacje internetowe to środek pomiędzy instalowanymi aplikacjami mobilnymi a stronami internetowymi. Oczekujemy, że do 2019 r. Zaobserwujemy większy ruch w Internecie z urządzeń mobilnych niż z komputerów stacjonarnych. PWA poprawiają wygląd stron internetowych, aby zwiększyć konwersję.

PWA oferują szybkie, pozbawione tarcia, „podobne do aplikacji” doświadczenia, zwiększające ruch, wyższe konwersje i krótsze czasy ładowania strony dla handlowców Magento

Ogólnie rzecz biorąc, Magento zmienia swój wygląd, aby zwiększyć liczbę konwersji. Przeczytaj więcej na ten temat tutaj .

• PWA są zwykle budowane przy użyciu JavaScript, CSS i HTML, które mają poziom wydajności i użyteczności prawie identyczny z aplikacjami natywnymi. PWA mają szczególne cechy, w tym:

  1. Działają z większością (jeśli nie wszystkimi) przeglądarkami i urządzeniami (mobilnymi i stacjonarnymi) z progresywną bazą kodu (często opartą na komponentach jak w React Js)
  2. Dopasuj wszystkie ekrany i kształty za pomocą responsywnego projektu Wykorzystaj pracowników serwisu, aby umożliwić łączność offline (wymagany HTTPS)
  3. Zapewnij obsługę podobną do aplikacji, która wykorzystuje narzędzia ponownego zaangażowania, takie jak powiadomienia wypychane
  4. Wykorzystaj manifest aplikacji internetowej, aby opisać wykorzystane zasoby

Możesz przeczytać więcej tutaj.

• SOAP (Simple Object Access Protocol) i REST (Representative State Transfer) to najpopularniejsze protokoły komunikacyjne usług sieciowych. REST jest w większości preferowany w stosunku do SOAP ( wyjaśnione tutaj ). Dlatego logiczne jest, aby API REST były używane jednocześnie z nową technologią, taką jak PWA.

Aby odpowiedzieć tylko na część pytania, ale bardziej szczegółowo na Magento 2.

PWA będzie łatwiejszy do zbudowania dzięki przyszłej wersji Magento 2.3.

https://www.degdigital.com/insights/magento-2-3/

Cytat z tego artykułu:

PWA

Progresywna aplikacja internetowa to aplikacja zbudowana z wykorzystaniem nowoczesnych funkcji technologii, która „stopniowo” skaluje się z powrotem na urządzeniach, na których te funkcje nie są dostępne. Pozwala także na buforowanie danych, dzięki czemu strona internetowa może być używana (częściowo lub całkowicie) w trybie offline, gdy usługa internetowa jest nieczytelna lub nie istnieje. Zasadniczo osiąga się to poprzez napisanie frontu witryny za pomocą nowoczesnego frameworka / stosu JavaScript, który jest wyraźnie oddzielony od aplikacji zaplecza. Ta aplikacja JavaScript może korzystać z nowych (ish) funkcji przeglądarki, aby wykonać powyższe zadanie.

Magento dostrzega wiele korzyści z tego, a pod koniec 2017 roku ogłosił swoje wysiłki w budowaniu tego, co nazywa PWA Studio. PWA Studio będzie zawierało narzędzia do opracowania i wdrożenia PWA dla interfejsu użytkownika Magento. Wraz z PWA Studio pojawi się lekka (niekompletna) strona demonstracyjna. Bezpośrednimi korzyściami będzie znaczny wzrost wydajności frontendu i prawie 10-krotny wzrost prędkości wdrażania nowych programistów frontonu Magento.

• Powiązana treść: PWA są tutaj i zmieniają wszystko

GraphQL

GraphQL to język zapytań do używania interfejsów API. Wraz ze wzrostem PWA istnieje potrzeba pozyskiwania mniejszych ilości danych i mniejszej liczby żądań API. Język zapytań GraphQL umożliwia to, pozwalając żądającemu żądać zwrócenia ograniczonego podzbioru atrybutów dotyczących encji (znacznie mniejsze odpowiedzi) i pozwala na łączenie żądań (mniejsza liczba żądań).

Magento obecnie obsługuje żądania API REST i SOAP korzystające z umów serwisowych. Jednak w celu obsługi GraphQL Magento pisze zupełnie nową warstwę, która łączy się bezpośrednio z interfejsem API zapytań. Implementacja GraphQL będzie podstawą tego, w jaki sposób interfejs PWA będzie pobierał potrzebne dane.

Progresywna aplikacja internetowa korzysta z możliwości przeglądarki internetowej i zapewnia użytkownikom mobilną aplikację.

Rozwija się z karty przeglądarki i sprawia, że ​​strony są bardziej wciągające, dzięki czemu użytkownik ma mniejsze tarcie. Jest to technologia internetowa służąca do tworzenia witryny, która działa i działa jak aplikacja.

Użytkownik może uruchomić Progresywną aplikację internetową tak samo jak natywną, niezależnie od wyboru przeglądarki.

W celu przetestowania wersji demo możesz odwiedzić ten link: Kliknij tutaj

Jest to produkt Google wprowadzony podczas I / O 2017 I / O 2017: https://www.youtube.com/watch?time_continue=14&v=cmGr0RszHc8

Jest to strona internetowa oparta na HTML.

Przechowuje pamięć podręczną w urządzeniu, dzięki czemu można go również używać w trybie offline.

Jednak po raz pierwszy jest powolny, co nastąpi podczas drugiej wizyty.

Jest aktualizowany, gdy urządzenie uzyskuje dostęp do Internetu, więc nie trzeba aktualizować nowych rzeczy, takich jak aplikacje.

Wywołuje wszystkie wiadomości e-mail na serwer, gdy urządzenie uzyska dostęp do Internetu, jeśli ktoś opublikuje coś offline.

W końcu nie ma potrzeby budowania aplikacji na iPhone'a / Androida.

Ograniczenia Obsługuje tylko plik HTML. Więc urządzenie powinno obsługiwać HTML.

There is no store to search PWA application.

Login with FB or else will not be worked.

Not supported in IE.

Skonfiguruj PWA (Linux os)

Krok 1: Zainstaluj magento 2.3.1

Krok 2: Zainstaluj / zaktualizuj węzeł

Użyj n modułu z npm, aby zaktualizować węzeł

sudo npm install n -g

W przypadku najnowszej stabilnej wersji:

sudo n stable

Do najnowszej wersji:

sudo n latest

Krok 3: Zainstaluj / zaktualizuj przędzę:

sudo npm install --global yarn

sudo npm upgrade --global yarn 

Krok 4: Zainstaluj node-gyp - Node.js natywne narzędzie do budowania dodatków

sudo npm install -g node-gyp

Krok 5: Sklonuj repozytorium PWA Studio

Przejdź do html root i uruchom:

git clone https://github.com/magento-research/pwa-studio.git

Po uruchomieniu otrzymasz folder pwa-studio

Krok 6: Zainstaluj zależności PWA Studio

sudo yarn install

Krok 7: Określ serwer zaplecza Magento

Under the packages/venia-concept directory, copy .env.dist into a new .env file:

Przykładowe polecenie:

sudo cp packages/venia-concept/.env.dist packages/venia-concept/.env

zmiana w pliku .env (będzie to twój adres URL magento, a nie URL administratora):

MAGENTO_BACKEND_URL="https://release-dev-231-npzdaky-zddsyhrdimyra.us-4.magentosite.cloud/"

Krok 8: Teraz utwórz kompilację

sudo yarn run build

Krok 9: Uruchom serwer

sudo yarn run watch:venia

Uruchamia tylko środowisko programistyczne sklepu Venia.

sudo yarn run watch:all

Uruchamia pełną obsługę programistów PWA Studio, w tym przeładowywanie Venia na gorąco i jednoczesne przebudowy Buildpack / Peregrine.

sudo yarn run build && yarn run stage:venia

Generuje artefakty kompilacji i uruchamia środowisko pomostowe, które wykorzystuje bardziej skompresowane zasoby i dokładniej odzwierciedla produkcję.

Po uruchomieniu jednego z powyższych poleceń otrzymasz adres URL virtul utworzony przez PWA.

UWAGA: jeśli jesteś użytkownikiem rood, użyj sudo.

Śledź oficjalne dokumenty deweloperów Magento 2:

https://devdocs.magento.com/guides/v2.3/pwa/