Что такое прогрессивные веб-приложения или PWA в Magento 2?

• Что это значит, что Magento становится платформой для прогрессивных веб-приложений?
• Какова будет структура кода PWA в Magento?
• Как обстоят дела с REST API и PWA?

Что такое прогрессивные веб-приложения?

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

Почему PWA?

• Быстро
• Безопасный (вторая тема ответа)
• отзывчивый
• Кросс-браузер совместимый
• Автономный режим (проверьте последнюю тему в ответе)
• Мобильный «Install»
• Совместно используемый контент

Этот ответ также охватывает - Установка Magento 2.3 с PWA

Давайте возьмем пример флипкарта

Flipkart , крупнейший в Индии сайт электронной коммерции, решил объединить свое веб-присутствие и нативное приложение в прогрессивное веб-приложение, что привело к увеличению конверсии на 70%.

Flipkart

Подходить

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

   ---

Полученные результаты

Новое прогрессивное веб-приложение помогает Flipkart повысить конверсию на 70%

Флипкарт также работает в автономном режиме

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

НО НО НО...

Что такое Magento PWA Studio?

• • Проект 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-макет-погрузчик
• Сервисный плагин

Peregrine - Peregrine - это набор,React componentsсозданный для обработки специфических для Magento функций, таких какrouting,root-componentsобработчик макетов, списки продуктов, отображение цен и т. Д.

Тема Venia -venia-conceptэто демонстрационная тема, созданная Magento с использованием студии Magento PWA. Он демонстрирует все доступные в настоящее время функциональные возможности, рабочий процесс и страницы

PWA Studio НЕ является

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

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

• Настольное приложение

Инструменты и библиотеки, используемые в PWA Studios

Webpack

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

App Shell

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

Оболочка страницы

• Общий размер больше (т.е. содержимое панели мониторинга находится в dashboard-1234.js и 4567.js)

• Приложение занимает больше времени, чтобы быть готовым к работе.

• Начальная нагрузка требует только два файла: login.html,login-2345.js

• Начальная загрузка должна загрузить: Shell + content

• Это shell + contentвидно раньше, чем при использовании App Shell.

Можно использовать гибридный подход, когда оболочка и контент разделяются в двух запросах (см. Страницу администратора в качестве примера). Это имеет смысл, когда содержимое намного больше, чем оболочка, а оболочка должна быть видна раньше.

ReactJs

• Библиотека JavaScript для создания пользовательских интерфейсов.

Redux

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

GraphQL

• Язык запросов данных на стороне клиента и уровень обслуживания на стороне сервера.

GraphQL в Magento

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

Сокращение количества интерфейсных запросов

Фаза рендеринга

Совместимость с настольным браузером

• Не поддерживается : IE, Safari

Совместимость с мобильными браузерами

Не поддерживается : Android Webview, IE, Safari

PWA более безопасны

• Как веб-разработчик, вы можете знать, насколько Google поощряет использование сайтов httpsвместо HTTP. Киберугрозы всегда находятся на первом месте в списке разработчиков веб-приложений и приложений.
• В прошлом HTTPне было достаточно безопасно, чтобы защитить информацию пользователей.
• В настоящее время программируются веб-сайты, HTTPsи легко запустить Progressive Web App в безопасной среде.
• При вводе личной информации в PWA, такой как информация о кредитной карте или контактные данные, они могут чувствовать себя в безопасности и быть спокойными.

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

автономное приложение Wikipedia является хорошим примером PWA, который использует модель оболочки приложения .

• Он загружается мгновенно при повторных посещениях, но динамически извлекает контент, используя JS.
• Этот контент затем кэшируется в автономном режиме для будущих посещений.

Progressive Web App - это будущее веб-разработки без каких-либо сомнений. В будущем сайты электронной коммерции, рестораны и медиаресурсы перейдут с нативного приложения на Progressive Web App. Тем не менее, еще на начальном этапе многие разработчики будут активно искать способы максимально использовать возможности, предоставляемые 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 Admin-> Content-> Themes

5. Скачать проект студии PWA.

6. Перейдите в корневой каталог установки Magento и создайте папку символической ссылки Pwa, ссылающуюся на каталог модуля проекта (pwa-studio / packages / pwa-module).

• из этого каталога я запустил свою команду - / 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 / packages / venia-concept).

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

8. Теперь перейдите в каталог venia-concept проекта вашего 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. Настройте тему вены из 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», чтобы сделать интерфейс более эффективным, в плане взаимодействия с пользователем.

Как обстоят дела с REST API и PWA?

Так как magento использует «PWA», он также добавляет «API GraphQL» для обеспечения альтернативной стороны API интерфейса разработки «REST / SOAP» в качестве API «GraphQL».

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

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

Веб означает, что он написан на языках Интернета (HTML, CSS, JavaScript). Это позволяет вам создать сайт, который предоставляет больше функциональности, подобной приложению, без создания собственного приложения, ограниченного одной платформой, такой как iOS или Android.

Приложение означает, что оно устанавливает и запускает код на устройстве или компьютере покупателя. Это создает больше скорости и возможностей, чем одностраничные приложения JavaScript в прошлом.

По сути, PWA - это гибрид обычных веб-страниц и мобильного приложения, позволяющий создавать веб-приложения в стиле мобильных приложений.

Magento становится платформой для прогрессивных веб-приложений. То есть Magento создает набор инструментов для создания интернет-магазинов в качестве прогрессивных веб-приложений. Эти инструменты помогут разработчикам изучать методы PWA, создавать молниеносные интерфейсы PWA и создавать компоненты и расширения PWA для повторного использования или продажи на торговой площадке Magento. В совокупности Magento называет этот набор инструментов Magento PWA Studio.

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

Magento PWA использует GraphQL в качестве альтернативы REST API для 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 поддерживает запросы API REST и SOAP, в которых используются контракты на обслуживание. Однако для поддержки GraphQL Magento пишет совершенно новый слой, который напрямую взаимодействует с API запросов. Реализация GraphQL станет основой того, как интерфейс PWA будет извлекать необходимые данные.

Прогрессивное веб-приложение использует возможности веб-браузера и предоставляет пользователям мобильное приложение.

Он развивается из вкладки браузера и делает страницы более захватывающими с низким уровнем трения. Это веб-технология создания веб-сайта, который действует и ощущается как приложение.

Пользователь может запускать Progressive Web Application так же, как и собственное приложение, независимо от выбора браузера.

Для демонстрационного тестирования вы можете перейти по этой ссылке: Нажмите здесь

Это продукт Google, запущенный во время I / O 2017 I / O 2017: https://www.youtube.com/watch?time_continue=14&v=cmGr0RszHc8

Это веб-сайт на основе HTML.

Он хранит кэш на устройстве, поэтому его можно использовать и в автономном режиме.

Тем не менее, в первый раз это медленно, который будет во время второго визита.

Оно обновляется, когда устройство подключается к Интернету, поэтому не нужно обновлять новые приложения, такие как приложения.

Он запускает все электронные письма на сервер, когда устройство получает Интернет, если кто-то публикует что-то в автономном режиме.

В конце концов, нет необходимости создавать приложения для 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)

Шаг 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 root и запустите:

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

После этого вы получите папку pwa-studio

Шаг 6: Установите зависимости PWA Studio

sudo yarn install

Шаг 7: Укажите внутренний сервер Magento

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 (это будет ваш magento 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

Создает артефакты сборки и запускает промежуточную среду, которая использует более сжатые активы и более точно отражает производство.

Как только вы выполните одну из приведенных выше команд, вы получите виртуальный URL, созданный PWA.

ПРИМЕЧАНИЕ: если вы пользователь root, используйте sudo.

Следуйте официальным документам Dev Magento:

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