Що таке прогресивні веб-програми чи PWA в Magento 2?

• Що означає, що Magento стає прогресивною платформою веб-додатків?
• Якою буде структура коду PWA в Magento?
• Яка угода з API REST та PWA?

Що таке прогресивні веб-програми?

• Виглядає та веде себе як мобільний додаток.
• Візьміть перевага в нативних мобільних функцій пристрою, не вимагаючи від кінцевого користувача відвідати магазин додатків, зробити покупку і завантажити його на місцевому рівні .

Чому PWA?

• Швидкий
• Безпечно (друга остання тема відповіді)
• Чуйний
• Сумісний веб-браузер
• Автономний режим (Перевірте останню тему у відповіді)
• Мобільний "Встановити"
• Спільний вміст

Ця відповідь також стосується - Встановлення Magento 2.3 з PWA

Візьмемо приклад Flipkart

Flipkart , найбільший в Індії веб-сайт електронної комерції, вирішив поєднати свою присутність в Інтернеті та вбудовану програму в прогресивну веб-програму, що призвело до збільшення конверсій на 70%

Фліпкарт

Підхід

1. Розроблений Flipkart Lite, прогресивний веб-додаток
2. Додано сервісних працівників для швидшого часу завантаження
3. Плавна навігація та прокрутка зі швидкістю 60 кадрів / секунду
4. Створено підказку "Додати на головний екран", щоб заохотити користувачів додавати веб-сторінку для мобільних пристроїв на свій домашній екран

   ---

Результати

Новий прогресивний веб-додаток допомагає Flipkart збільшити конверсії на 70%

Flipkart також працює в автономному режимі

• Сервісні працівники можуть бути скриптовані для перехоплення кожного мережевого запиту та подання відповіді з кешу, навіть якщо користувач перебуває в автономному режимі.
• Бібліотека обгортків службових служб, яка дозволяє використовувати прості шаблони, такі як NetworkFirst, CacheFirstабо NetworkOnly. SW-Toolboxзабезпечує LRU кеш, який використовується в додатку Flipkart для зберігання попередніх результатів пошуку на сторінці перегляду та останніх кількох відвідуваних сторінок продукту.
• У панелі інструментів також є механізм відключення TTL-based кешу, який ми використовуємо для очищення застарілого вмісту. Сервісні працівники забезпечують примітивні сценарії низького рівня, що роблять це можливим.

АЛЕ ... АЛЕ ... АЛЕ ...

Що таке студія Magento PWA?

• • Проект Magento PWA Studio - це набір інструментів для розробників, які дозволяють розробити, розгорнути та обслуговувати вітрину PWA на Magento 2

Проект Magento PWA Studio пропонує такі інструменти:

---

pwa-модуль

• У ньому є модулі на зразок помічників, функціональність на стороні сервера і є основою для всіх тем, створених за допомогою Magento PWA Studio.

pwa-buildpack -

• Buildpack - це набір Webpackплагінів та інструментів, який використовується для розробки тем Magento PWA.

• Він також використовується для налаштування та налаштування локального середовища розробки для платформи Magento 2.

Він містить такі інструменти:

• PWADevServer
• Magento Resolver
• Плагін компонентів для кореневих компонентів Magento
• magento-layout-loader
• Плагін сервісного працівника

Перегрин - Peregrine являє собою набірReact componentsстворена для обробки Magento-специфічну функціональнихтакі якrouting,root-components, обробник макета, списки продуктів, ціна дисплей і т.д.

Тема Venia -venia-conceptце демо-тема, створена Magento за допомогою студії Magento PWA. Він демонструє всі наявні в даний час функціональні можливості, робочий процес та сторінки

PWA Studio НЕ

• Новий випуск Magento

• Заміна всіх переднього кінця

• Настільний додаток

Інструменти та бібліотеки, що використовуються в PWA Studios

Вебпак

• Основна функція Webpack полягає у створенні одного або декількох пакетів із залежностей у модулях вашого проекту.

App Shell

• Загальний розмір менший
• Початкова навантаження запитує три файли: login.html, shell-1234.js,3456.js
• Початкове навантаження потрібно завантажити: Shell + Router + content
• Оболонка видно раніше, ніж під час Page Shell.

Оболонка сторінки

• Загальний розмір більший (тобто вміст інформаційної панелі знаходиться в інформаційній панелі-1234.js і 4567.js)

• Додаток займає більше часу, щоб бути в режимі офлайн

• Початкова навантаження вимагає тільки два файли: login.html,login-2345.js

• Початкове навантаження потрібно завантажити: Shell + content

• Відображається shell + contentраніше, ніж при застосуванні програми Shell.

Гібридний підхід може бути використаний, коли оболонку та вміст розділено на два запити (див. Приклад на сторінці адміністратора). Це має сенс, коли вміст набагато більший, ніж оболонка і оболонка повинна бути видно раніше.

ReactJs

• Бібліотека JavaScript для створення інтерфейсів користувача.

Редукс

• Бібліотека JavaScript, що використовується для управління станом у веб-додатку.

GraphQL

• Мова запитів даних на стороні клієнта та сервісний рівень на стороні сервера.

GraphQL в Magento

Аутентифікація та схема

Зменшення кількості запитів на передовій

Фаза візуалізації

Сумісність настільного браузера

• Не підтримується : IE, Safari

Сумісність мобільного браузера

Не підтримується : Android Webview, IE, Safari

PWA є більш безпечними

• Як веб-розробник, ви можете знати, наскільки Google заохочує веб-сайти httpsзамість HTTP. Кіберзагрози завжди входять до списку для розробників Інтернету та додатків.
• У минулому HTTPнедостатньо безпечно захищати інформацію користувачів.
• Зараз веб-сайти запрограмовані, HTTPsі легко запустити прогресивний веб-додаток у безпечному середовищі.
• Вводячи особисті дані в PWA, такі як дані кредитної картки або контактні дані, вони можуть почувати себе захищеними та спокійними.

PWA - Автономний режим

офлайн-додаток Wikipedia - хороший приклад PWA, що використовує модель оболонки додатка .

• Він завантажується миттєво при повторних відвідуваннях, але динамічно виймає вміст за допомогою JS.
• Потім цей вміст кешується в режимі офлайн для майбутніх відвідувань.

Прогресивний веб-додаток - це майбутнє веб-розробки без будь-яких сумнівів. В майбутньому сайти електронної комерції, ресторани та медіа-джерела перейдуть з нативного додатка до прогресивного веб-додатка. Однак, ще на початковій фазі, багато розробників активно шукатимуть способів максимально використати можливості, надані PWA.

Почнемо з установки Magento 2.3 з PWA

1. Введіть таку команду в DIR / var / www / html / (m203 - мій каталог Magento 2.3):

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

2. Встановіть Magento командним рядком:

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 --admin-email=admin@admin.com --admin-user=admin --admin-paassword=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1

3. Створіть базову тему pwa, яка буде батьківською для теми PWA Venia.

• На даний момент дозволяє клонувати базове сховище теми pwa. https://github.com/magento-research/theme-frontend-pwa

4. Створіть каталог app/design/frontend/Magento/pwaта скопіюйте тут усі файли та каталоги базової теми.

• Дозволяє перевірити базову тему, доступна чи ні.

• Run: php bin/magento setup:upgrade

• І перейдіть до свого адміністратора Magento-> Вміст-> Теми

5. Завантажте проект студії PWA.

6. Перейдіть до кореневого каталогу установки Magento та створіть папку символьної посилання Pwa, що посилається на каталог модулів проекту (pwa-studio / пакети / pwa-модуль).

• з цього каталогу я запустив свою команду - / var / www / html / m230

• Це каталог, у якому завантажено моє джерело pwa / var / www / html / PWA /

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

7. Пов’яжіть також тему каталогів. Перейдіть до кореневого каталогу установки Magento та створіть папку символьної посилання Pwa, що посилається на каталог модулів проекту (pwa-studio / пакети / venia-концепція).

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

8. Тепер перейдіть до каталогу venia-концепції вашого проекту pwa-studio, скопіюйте .env.distу новий .envфайл та оновіть змінні з URL-адресою у вашому магазині розвитку Magento.

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

cp .env.dist .env

9. Встановіть тему venia та модуль Pwa:

run: php bin/magento setup:upgrade

ми можемо бачити, що тема venia встановлена ​​успішно.

10. Налаштуйте тему venia з admin->Content->Configuration

11. Перейдіть до /var/www/html/PWA/pwa-studio-masterзапуску шляху ( ):

npm install

або

npm install webpack-dev-server -g

12. І, нарешті, перейдіть до /var/www/html/PWA/pwa-studio-master/packages/venia-concept

npm start

Вітаємо! Ви створили своє середовище розробки для тематичного проекту Venia.

PWA - Прогресивна веб-програма - це звичайно веб-додаток, який користувачеві користується насиченою мережею. у спосіб:

• Надійне - завантажуйте миттєво, а також доступне в автономному режимі
• Швидкий - у спосіб взаємодії, коли користувач плавно взаємодіє з ним, а також без жодних прокруток або анімаційних спалах.
• Залучення - як позначено вище обох точок, якщо додаток надійний та швидкий, то, очевидно, це залучає більше користувачів, а також відчуває, що це природна програма.

"Що означає, що Magento стає прогресивною платформою веб-додатків?"

У той час, як magento готується до випуску версії 2.3, саме ця функція "PWA" дозволяє зробити інтерфейс більш ефективним, у спосіб взаємодії з користувачем.

Яка угода з API REST та PWA?

Оскільки magento використовує "PWA", він також додає "GraphQL API" для надання альтернативи api на сторонній розробці "REST / SOAP" як "GraphQL" api.

Для отримання більш детальної інформації про "PWA" та нову функцію "magento2.3 open-commerce" Ви можете відвідати офіційну сторінку цього магенто .

Прогресивний означає, що додаток завантажується разом із будь-якими відповідними даними та ресурсами, коли користувач пересувається по вашому веб-сайту. Це призводить до кращого користувачевого досвіду з кращою швидкістю, зручністю використання, режимом роботи в автономному режимі та інтеграцією пристроїв.

Веб означає, що він написаний мовами Інтернету (HTML, CSS, JavaScript). Це дозволяє створити веб-сайт, який надає більше функціональних можливостей для додатків, не створюючи нативної програми, обмеженої однією платформою, наприклад iOS або Android.

Програма означає, що вона встановлює та запускає код на пристрої або комп’ютері покупця. Це створює більшу швидкість і можливість, ніж односторінкові програми JavaScript в минулому.

PWA - це, по суті, гібрид звичайних веб-сторінок і мобільного додатка, що дає змогу подобатися мобільним додаткам для Інтернету.

Magento стає платформою прогресивної веб-програми. Тобто Magento створює набір інструментів для створення інтернет-магазинів як прогресивних веб-додатків. Ці інструменти допоможуть розробникам вивчити методи PWA, створити блискавичні фронти PWA та створити компоненти та розширення PWA для повторного використання чи продажу на ринку Magento. У сукупності Magento називає цей набір інструментів студією Magento PWA.

Ви можете перевірити структуру коду за адресою https://github.com/magento-research/pwa-studio

Magento PWA використовує GraphQL як альтернативу API REST для PWA.

Для отримання детальної інформації про Magento PWA, ви можете пройти за такими посиланнями:

• 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

• Прогресивні веб-програми - це середина між встановленими мобільними додатками та веб-сайтами. Ми очікуємо, що до 2019 року побачимо більше трафіку в Інтернеті з мобільних пристроїв, ніж з настільних комп’ютерів, PWA покращують зовнішній вигляд веб-сайтів для збільшення конверсій.

PWA пропонують швидкий, без тертя досвід, подібний до додатків, що сприяє збільшенню трафіку, вищих конверсій та швидшого завантаження сторінок для продавців Magento

Таким чином, Magento перетворює свій зовнішній вигляд, щоб збільшити кількість конверсій. Детальніше про це читайте тут .

• PWA, як правило, створюються за допомогою JavaScript, CSS та HTML, які мають рівень продуктивності та зручності використання, що майже ідентично рідним програмам. Особливості PWA включають:

  1. Вони працюють з більшістю (якщо не з усіма) браузерами та пристроями (мобільними та настільними) з прогресивною базою даних коду (часто компонент базується на зразок React Js)
  2. Встановіть усі екрани та фактори форми, використовуючи чуйний дизайн, використовуйте службових служб, щоб увімкнути підключення до офлайн (потрібно HTTPS)
  3. Надайте досвід, подібний до додатків, який використовує засоби повторного залучення, наприклад, push-сповіщення
  4. Використовуйте маніфест веб-додатків для опису використаних ресурсів

Більше ви можете прочитати тут.

• SOAP (Простий протокол доступу до об’єктів) та REST (передача представницького стану) - найпоширеніші протоколи зв'язку веб-служб. REST надає перевагу SOAP здебільшого ( пояснено тут ). Тому логічно бачити, що API REST використовуються одночасно з новою технологією, як PWA.

Щоб відповісти лише на частину вашого запитання, але більше Magento 2.

PWA буде легше будувати завдяки майбутньому Magento 2.3.

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

Цитується з цієї статті:

PWA

Прогресивний веб-додаток - це програма, створена з метою використання переваг сучасних технологій, які «поступово» змінюють масштаб на пристроях, де ці функції недоступні. Він також дозволяє кешувати дані, тому веб-сайт може бути використаний (частково або повністю) в режимі офлайн, коли Інтернет-сервіс є плямистим або не існує. Це, як правило, досягається написанням переднього кінця веб-сайту сучасним фреймворком / стеком JavaScript, який чітко відокремлений від додаткового додатка. Цей додаток JavaScript може використовувати нові (ish) функції браузера для виконання вищезазначеного завдання.

Magento визнає численні переваги для цього, і наприкінці 2017 року заявив про свої зусилля у створенні того, що називає PWA Studio. PWA Studio буде містити інструменти для розробки та розгортання PWA для передньої частини Magento. Поряд із PWA Studio з'явиться легкий (не повнофункціональний) демонстраційний сайт. Безпосередніми перевагами стане значне збільшення продуктивності та майже 10-кратне збільшення швидкості на борту нових розробників Magento, що розробляються на передньому рівні.

• Пов'язаний зміст: PWA є тут і вони все змінюють

GraphQL

GraphQL - мова запиту для використання API. З підвищенням PWA виникає потреба отримувати менші обсяги даних та робити менше запитів API. Мова запитів GraphQL робить це можливим, дозволяючи запитувачу вимагати повернення обмеженого набору атрибутів про сутність (значно менші відповіді) та дозволяє ланцюговувати запити (менша кількість запитів).

В даний час Magento підтримує REST та SOAP API-запити, які використовують договори на обслуговування. Однак, щоб підтримати GraphQL, Magento пише абсолютно новий шар, який взаємодіє безпосередньо з API запиту. Реалізація GraphQL буде основою для того, як PWA-інтерфейс буде отримувати потрібні йому дані.

Прогресивна веб-програма використовує можливості веб-браузера та забезпечує мобільний додаток, як досвід для користувачів.

Він розробляється на вкладці браузера і робить сторінки більш захоплюючими з низьким рівнем тертя користувача. Це веб-технологія створення веб-сайту, яка діє і відчувається як додаток.

Користувач може запустити прогресивну веб-програму так само, як і рідну програму незалежно від вибору браузера.

Для демо-тестування ви можете відвідати це посилання: Натисніть тут

Це продукт Google, запущений під час I / O 2017 I / O 2017: https://www.youtube.com/watch?time_continue=14&v=cmGr0RszHc8

Це веб-сайт на базі HTML.

Він зберігає кеш на пристрої, щоб можна було використовувати його і в автономному режимі.

Однак перший час повільно, що буде під час другого візиту.

Він оновлюється, коли пристрій отримує Інтернет, тому не потрібно оновлювати нове, наприклад APP.

Він запускає всі електронні листи на сервер, коли пристрій отримує Інтернет, якщо хтось публікує щось офлайн.

Зрештою, не потрібно вбудовувати додаток для iphone / android.

Обмеження Він підтримує лише HTML-файл. Отже, пристрій повинен підтримувати HTML.

There is no store to search PWA application.

Login with FB or else will not be worked.

Not supported in IE.

Налаштування PWA (Linux OS)

Крок 1: Встановіть magento 2.3.1

Крок 2: Встановити / оновити вузол

Використовуйте n модуль з npm для оновлення вузла

sudo npm install n -g

Для останньої стабільної версії:

sudo n stable

Для останньої версії:

sudo n latest

Крок 3: Встановлення / оновлення пряжі:

sudo npm install --global yarn

sudo npm upgrade --global yarn 

Крок 4: Встановіть node-gyp - інструмент побудови нативного аддона Node.js

sudo npm install -g node-gyp

Крок 5: Клоніруйте сховище PWA Studio

Перейдіть до html-кореня та запустіть:

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

Після цього ви отримаєте папку pwa-studio

Крок 6: Встановіть залежності PWA Studio

sudo yarn install

Крок 7: Вкажіть сервер Makendo

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

Приклад команди:

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

зміна .env-файлу (це буде ваша магенто-URL, а не URL-адреса адміністратора):

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

Крок 8: Тепер створіть збірку

sudo yarn run build

Крок 9: Запустіть сервер

sudo yarn run watch:venia

Запускає лише розробницьке середовище Venia.

sudo yarn run watch:all

Працює повний досвід розробників PWA Studio, який включає гарячу перезавантаження Venia та одночасне відновлення Buildpack / Peregrine.

sudo yarn run build && yarn run stage:venia

Створює побудову артефактів і керує сценічним середовищем, яке використовує більше стислих активів і більш ретельно відображає виробництво.

Після запуску однієї з вищевказаних команд ви отримаєте urtul url, створений PWA.

ПРИМІТКА: якщо ви користуєтеся rood користувачем, тоді використовуйте sudo.

Дотримуйтесь Magento 2 документальних розробників:

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