PWA для электронной коммерции: преимущества и демонстрация Gatsby Live
В спешке? Перейти к обучающей программе или живой демонстрации .
Я попытался купить футболку на моем телефоне на днях.
Во-первых, я перенаправлен на URL-адрес http://m.thatsite.com .
Мобильный сайт загружается …
Наконец, появляется контент, а также полноэкранное всплывающее окно:
Загрузите наше мобильное приложение для лучшего шоппинга!
Я нажимаю на ссылку. App store загружает …
Плохие отзывы, размытые скриншоты, 50 МБ. Вздох
Я закрываю и магазин приложений, и браузер.
Этого знакомого примера о покупках можно было бы избежать.
Как? С прогрессивным веб-приложением (PWA) электронной коммерции.
Прогрессивные веб-приложения были на подъеме в последние годы. Основательные примеры PWA появляются везде и по веским причинам.
Они поощряют всеобъемлющий, глобальный, адаптивный подход к веб-разработке. Они имеют смысл как для пользователя, так и для бизнеса, как мы увидим в этой части. Фреймворки, такие как React и Vue JS, все чаще используются для создания PWA.
Сегодня я хочу углубиться в эту трендовую технологию.
Этот пост будет охватывать:
1 Определение PWA
2 Чехол для PWA электронной коммерции
3 Обзор доступных инструментов для PWA
Затем я покажу вам, как использовать Gatsby для создания гладкого магазина PWA . Пошаговое руководство, репозиторий и живая демонстрация включены ниже.
Поехали!
Что такое прогрессивное веб-приложение (PWA)?
Прогрессивное веб-приложение - это общий термин, придуманный инженерами Google. Это скорее набор принципов разработки, чем конкретная технология или стек. Три важных принципа охватывают этот подход:
Служебный работник(service worker) - это скрипт, который ваш браузер запускает в фоновом режиме, отдельно от веб-страницы, открывая доступ к функциям, которые не требуют веб-страницы или взаимодействия с пользователем. Сегодня они уже включают такие функции, как push-уведомления и фоновая синхронизация. В будущем сервисные работники могут поддерживать другие вещи, такие как периодическая синхронизация или геозоны.© Google
1) Надежность
Благодаря service workers PWA всегда реагирует на запросы пользователя, независимо от состояния устройства или сети, включая состояние офлайн(автономный режим).
2) Производительность
Благодаря таким методам, как сжатие, предварительное кеширование, разбиение кода и прогрессивный рендеринг, PWA значительно сокращает количество пользователей, которые «теряют сознание» - покидая сайт в ожидании загрузки! Цель здесь - стремиться к минимуму времени на интерактив .
«Интерактивный» определяется как точка, в которой:
- На странице отображается полезный контент, который измеряется с помощью First Contentful Paint.
- Обработчики событий регистрируются для наиболее видимых элементов страницы.
- Страница реагирует на взаимодействие с пользователем в течение 50 миллисекунд.
3) Единение
Благодаря Манифесту веб-приложений, PWA легко устанавливаются на домашние экраны мобильных устройств. Как разработчик, вы получаете лучшее из обоих миров: отсутствие перенаправления магазина приложений / паршивых установок, И возможность привлекать мобильных пользователей с помощью веб-push-уведомлений . Все это внутри веб-приложения, которое чувствует и ведет себя почти идентично нативному мобильному приложению.
Чтобы выяснить насчёт полного контрольного списка PWA, обязательно проверьте эту запись Google. Да, и это руководство для начинающих по PWA также стоит посмотреть!
Зачем использовать PWA для электронной коммерции?
Технические преимущества прогрессивных веб-приложений превращаются в прямые коммерческие выгоды для продавцов электронной коммерции:
Это расширяет рынок и варианты использования.
Просмотр и покупка осуществляются на большинстве устройств в любом месте - быстро или медленно - из любой точки мира. Автономные возможности также могут стимулировать участие, как мы увидим в нашем примере PWA ниже.
Это способствует лучшему коэффициенту конверсии.
Предварительное кэширование с работниками сферы обслуживания обеспечивает быстрый и беспроблемный опыт покупок. Встроенные проверки PWA в Chrome DevTools ( Google Lighthouse ) позволяют быстро выявлять и устранять проблемы с производительностью. Адаптивное обслуживание контента снижает показатель отказов по всем направлениям, тем самым повышая показатели вовлеченности пользователей , что является выдающимся сигналом ранжирования в SEO.
Кроме того, избегание перенаправлений на торговые площадки, такие как App Store, уменьшает трения, которые могут заставить клиентов отказаться от процесса покупки.
Это уменьшает бюджет развития.
Нет необходимости разрабатывать отдельные веб и мобильные приложения. PWA созданы как веб-страницы, но напоминают собственные мобильные приложения благодаря функции « добавить на главный экран » и функциям push-уведомлений. Ваша маркетинговая команда будет рада тому, что у вас по-прежнему есть эти замечательные возможности для привлечения клиентов, в то же время избавляясь от некоторых нюансов нативных приложений.
Говоря о нативном мобильном приложении, вашей основной проблемой сейчас может быть выбор между этой опцией или PWA для вашего проекта электронной коммерции. Вот отличное сообщение в блоге Prototypr.io, в котором рассказывается о плюсах и минусах обеих технологий.
Учитывая эти преимущества, неудивительно, что крупные игроки отрасли обращаются к прогрессивной электронной коммерции веб-приложений.
Вот несколько хороших примеров e-comm. PWAs в дикой природе:
Примеры PWA
Пойди посмотри сам; Этот опыт мобильной коммерции - А1, эталонный.
Инструменты разработки электронной коммерции PWA
Теперь есть много способов создания прогрессивных веб-приложений - независимо от того, какая у вас среда JS. Это то, что все больше и больше инструментов используются как готовые функциональные возможности.
→ Vue.js
- Gridsome - Вдохновленный Гэтсби, который я буду использовать в демоверсии ниже.
- Nuxt.js - Проверено на реальных проектах нашими друзьями в Spektrum , с отличными результатами!
→ React
- Next.js - Теперь по веским причинам стоит на первом месте в списке StaticGen .
- Гэтсби - все, что вам нужно знать об этом в следующем разделе.
- create-react-app
→ Angular
В отличие от двух других сред, Angular не имеет инструментов, которые облегчат вам разработку PWA, но вы все равно можете обратиться к документации или учебным пособиям, чтобы начать.
Зачем использовать Гэтсби для этого примера PWA?
Краткий ответ? Потому что Гэтсби позволяет быстро собрать пример PWA.
Часто представляемый как генератор статических сайтов для React, на самом деле это гораздо больше. Это полная современная платформа для веб-сайтов, которая стала фаворитом разработчиков в экосистеме JAMstack .
Создатель Gatsby Кайл Мэтьюз в интервью The New Stack объясняет, как его детище испекло PWA:
«Google проводит много исследований о том, как создавать быстрые веб-сайты, и PWA является своего рода общим термином для этих шаблонов. Так что с Гэтсби мы просто спросили себя, почему бы не испечь эти шаблоны, все эти вещи, которые делают сайт быстрым, в рамках веб-сайта? »
В этой статье он объясняет, как Gatsby выступает в качестве метакомпилятора для вашего сайта со встроенными, а не дополнительными, оптимизациями производительности.
Таким образом, у Gatsby есть много «проверенных» ящиков поддержки PWA, таких как:
Он следует архитектурному шаблону PRPL ( Push, Render, Pre-cache, Lazy-load ).
Он поддерживает разделение кода, что позволяет прогрессивную визуализацию для вашего контента.
Выводимые файлы представляют собой статический HTML, что позволяет легко сканировать, индексировать и ранжировать контент электронной коммерции для поисковых систем. Органический трафик является богатым источником трафика для интернет-магазинов - для многих он является их жизненной силой.
Он поддерживает сервисных работников через этот плагин и функцию «добавить на главный экран» с этим .
Чтобы ознакомиться с полным списком впечатляющих возможностей Gatsby, прочитайте эту страницу .
Электронная коммерция PWA: создание демонстрационного прогрессивного веб-приложения Gatsby
Немного контекста для этой демонстрации: человечество по колено в зомби-апокалипсисе. Интернет время от времени доступен, но чаще всего сеть не работает. Цель нашего PWA:
1) Предложите полезные руководства по выживанию, доступные в автономном режиме.
2) Предложите покупную экипировку для выживания, когда сеть работает.
Предпосылки:
- Основное понимание Гэтсби JS
- Бесплатный тестовый аккаунт с Snipcart
- Впрочем Easynetshop тоже должен работать
Для этой демонстрации я буду использовать Blog Starter от команды Gatsby. Он оснащен всеми плагинами, необходимыми для создания Gatsby PWA со стандартными конфигурациями.
А именно:
gatsby-plugin-manifest для установки приложений на мобильные устройства
gatsby-plugin-sharp для автоматической генерации изображений разных размеров
gatsby-plugin-offline чтобы сделать ваше приложение доступным в автономном режиме с Service worker
Это простая и простая тема, которая послужит хорошей основой для дальнейшего развития. Я также покажу вам несколько хитростей, чтобы Snipcart изящно справлялся с изменяющимися условиями сети.
Давайте начнем с генерации и запуска нашего проекта:
Зацепите репо:
npx gatsby-cli new gatsby-pwa-demo https://github.com/gatsbyjs/gatsby-starter-blog
Запустите сервер разработки в папке проекта:
cd gatsby-pwa-demo
npm run develop
Адаптивная реакция
Адаптивный веб-дизайн далеко не нов. Со времени своего появления сообщество веб-разработчиков накопило много хороших практик.
Во-первых, это макет вашего сайта PWA. Предоставляя полностью отзывчивые страницы, вы дадите покупателям более согласованный опыт электронной коммерции на всех устройствах. Для этого вы можете использовать библиотеку адаптивных компонентов, таких как react-md, или использовать свои навыки CSS, чтобы создать ее с нуля.
Гэтсби помогает вам в том, чтобы предоставлять отзывчивые и оптимизированные изображения с помощью gatsby-plugin-sharp . Он обрабатывает ваши изображения и генерирует разные размеры, которые браузер выбирает в srcset . Таким образом, загружается только наиболее подходящий файл для текущего размера экрана. Не забудьте использовать компонент <Image /> с Gatsby!
Хотя я бы посоветовал использовать изображения .svg когда это возможно. Веб-серверы могут легко сжимать формат этого размера, и, поскольку они имеют векторный формат, вам нужен только один файл, который масштабируется до любого размера.
Оффлайн возможности
Автономная функциональность часто является центральным аргументом для PWA. Хотя это не единственная полезная функция, я не могу написать пост на PWA, не сказав об этом. А с Gatsby это так же просто, как добавить gatsby-plugin-offline в ваш gatsby-config.js !
В этом случае используется sw-precache от Google, библиотеки, которая генерирует работника сервиса, который автоматически кэширует файлы вашего сайта для автономного использования.
Работник службы похож на фоновую задачу, выполняющуюся вне контекста DOM, не влияя на пользовательский интерфейс. Это полезно для автономного режима, поскольку оно может перехватывать запросы и иметь собственную логику кэширования. С Gatsby весь HTML и JavaScript кэшируются и извлекаются из кэша в автономном режиме.
Поведение, подобное приложению
Приятной особенностью Progressive Web Apps является возможность использовать веб-приложение вместо собственного мобильного приложения и вести себя так же. Существует множество мнений по этому вопросу, будь то хороший или плохой подход, имитирующий внешний вид нативных приложений. По крайней мере, веб-технологии дают вам такую гибкость, а Манифест веб-приложений позволяет вашему приложению быть автономным вне интерфейса мобильного браузера. Довольно аккуратно!
gatsby-plugin-manifest генерирует этот манифест автоматически. Вы можете настроить его в gatsby-config.js :
/* ... */
{
resolve: "gatsby-plugin-manifest",
options: {
name: config.siteTitle,
short_name: config.siteTitle,
description: config.siteDescription,
start_url: config.pathPrefix,
background_color: "#F5E35C",
theme_color: "#bdbdbd",
display: "standalone",
icons: [
{
src: "/logos/logo.png",
sizes: "192x192",
type: "image/png"
},
{
src: "/logos/logo.svg",
sizes: "72x72 96x96 128x128 256x256"
}
]
}
},
/* ... */
Параметры в основном описательные или визуальные детали приложения. Наиболее интересным является display: "standalone". Это то, что сделает приложение открытым как его собственное окно, без опций навигации в браузере.
В некоторых случаях браузер может автоматически предложить пользователю установить приложение на домашний экран. Вы также можете вызвать это вручную . Если у вас есть собственные версии вашего приложения, есть параметр, который указывает браузеру предлагать эти приложения .
Заставить корзину обращаться с меняющимися условиями сети
Для функциональности электронной коммерции этого примера PWA я интегрирую в приложение собственную платформу разработки товаров для покупок, Snipcart.
Snipcart работает довольно просто: вы добавляете необходимые скрипты на свой сайт, а затем определяете продукты непосредственно в HTML.
Одним из недостатков сервисных работников является то, что они могут кэшировать контент только с вашего домена. Таким образом, вам придется использовать другую стратегию для Snipcart, чтобы справиться с потерей соединения.
Во-первых, вам необходимо загрузить необходимые ресурсы только после того, как вы получите доступ к Интернету. Я немного обманываю здесь и использую прямую манипуляцию с DOM, чтобы добавить теги в заголовок страницы - вы можете адаптировать его к любой среде, которую используете!
class Snipcart extends Component {
componentDidMount() {
this.isSnipcartReady = false;
this.cssLoading = false;
this.cssLoaded = false;
this.updateScripts = this.updateScripts.bind(this);
window.addEventListener('online', this.updateScripts);
this.updateScripts();
}
updateScripts() {
if(!window.navigator.onLine) {
return;
}
if(!this.cssLoaded && !this.cssLoading) {
this.loadSnipCss();
}
if(!this.isJQueryLoaded()) {
return this.loadjQuery().then(this.updateScripts);
}
if(!this.isSnipcartLoaded()) {
return this.loadSnipJs().then(this.updateScripts);
}
}
isJQueryLoaded() {
return !!(typeof window.$ == "function" && window.$.fn && window.$.fn.jquery);
}
isSnipcartLoaded() {
return !!(window.Snipcart);
}
loadjQuery() {
return this.addElem('script', {
async: true,
src: "https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js",
});
}
loadSnipJs() {
return this.addElem('script', {
async: true,
id: "snipcart",
src: "https://cdn.snipcart.com/scripts/2.0/snipcart.js",
"data-api-key": this.props.apiKey,
});
}
loadSnipCss() {
this.cssLoading = true;
return this.addElem('link', {
async: true,
type: "text/css",
rel: "stylesheet",
href: "https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css",
})
.then(() => this.cssLoaded = true)
.finally(() => this.cssLoading = false);
}
addElem(tag, attrs) {
return new Promise((resolve, reject) => {
var el = document.createElement(tag);
el.onload = resolve;
el.onerror = reject;
var keys = Object.keys(attrs);
for(var i=0; i<keys.length; i++) {
var key = keys[i];
el.setAttribute(key, attrs[key]);
}
document.head.appendChild(el);
});
}
render() {
return null;
}
}
Выше я проверяю, какой файл был загружен, и каждый раз, когда браузер снова подключается, я снова проверяю эти проверки. С помощью нескольких дополнительных событий вы можете обрабатывать товары, добавленные в корзину, когда Snipcart еще не загружен или когда вы не в сети:
document.body.addEventListener('click', this.handleProductClick);
document.addEventListener('snipcart.ready', this.snipcartReady);
В этих обработчиках событий мы сохраняем очередь продуктов, которые будут добавлены в корзину.
snipcartReady() {
console.log("Snipcart finished loading");
window.Snipcart.subscribe('item.adding', this.handleItemAdding);
this.isSnipcartReady = true;
this.dequeueProducts();
}
handleProductClick(e) {
if(!e.target.classList.contains("snipcart-add-item") || this.isSnipcartLoaded()) {
return;
}
var item = JSON.parse(e.target.getAttribute('data-snip-def'));
console.log("Queuing clicked item", item);
this.productsQueue.push(item);
}
handleItemAdding(ev, item) {
if(window.navigator.onLine) {
return;
}
ev.preventDefault();
console.log("Queuing item from snip event", item);
this.productsQueue.push(item);
}
dequeueProducts() {
window.Snipcart.api.cart.start().then(() => {
console.log("Dequeueing products", this.productsQueue);
if(this.productsQueue.length > 0) {
window.Snipcart.api.items.add(this.productsQueue);
this.productsQueue = [];
}
});
}
Живое демо и репозиторий GitHub
Заключение
Гэтсби - чертовски умный кусок инженерии. Хотя у него есть кривая обучения и хитрая отладка, как только вы его изучите, он настолько мощный, что вы полюбите его очень быстро.
Создание всего этого урока заняло у меня несколько дней больше, чем наши обычные демонстрации . Я столкнулся с несколькими неопознанными ошибками GraphQL, и gatsby build команда gatsby build потерпела крах на полпути, не возвращая код ошибки. Но в целом у меня был забавный опыт работы с этим примером PWA.
Конечно, я не смог охватить все возможные варианты использования в одном посте - в PWA есть очень много замечательных функций. Если бы у меня было больше времени, я бы изучил API-интерфейсы Уведомлений и Push, чтобы повысить заинтересованность пользователей мобильных приложений.
Надеюсь, вы узнали что либо новое благодаря этому туториалу. Я, будьте уверены, что узнал! :)
дополненный перевод статьи https://snipcart.com/blog/pwa-example-ecommerce-gatsby