click fraud detection
click fraud detection
Blog Case

PWA приложения: что это, как применить в бизнесе

BLOG
CASE
2048
0
5/ 5stars
5/5

В двух словах PWA (progressive web application) – формат создания веб-страниц, который сочетает функционал сайта и приложения для мобильных устройств.

Как это работает

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

Шаг 2. Если предложение принято, значок сайта мгновенно появится на главном экране устройства. В этом случае можно безопасно обходить обычные этапы работы с приложениями – например, проверки с помощью антивирусов (приложения PWA работают по безопасному протоколу HTTPS). Также при открытии с иконки, приложение открывается без адресной строки.

Шаг 3. После установки PWA создает кеш сайта. Это решает две проблемы: ускоряет загрузку и делает сайт доступным в режиме «полета». Таким образом, сайт можно использовать даже без подключения к интернету.

Технология PWA облегчает взаимодействие с целевой аудиторией для компании при минимальных усилиях пользователя.

значительные преимущества сайта с pwa

Значительные преимущества сайта с PWA

  1. Страницы сайта PWA выглядят одинаково на экранах любых устройств с любой операционной системой и работают независимо от установленного браузера. Это очень удобно, ведь больше не нужно создавать отдельный продукт для каждой операционной системы и оплачивать поддержку кроссплатформенных приложений.
  2. Согласно исследованиям Google, 53% пользователей отказываются от веб-сайта, если страница загружается дольше 3 секунд. С PWA сайт загружается мгновенно.
  3. Мгновенная установка на смартфон. Если вам нравится сайт или блог - нажмите значок «Добавить на экран» - и вы тут же получите ярлык сайта на рабочий стол
  4. Автономный режим. Находясь в режиме онлайн, PWA синхронизирует данные и обновляет их в кеше.
  5. Всплывающие уведомления на Android-устройствах. Информация о событиях, акциях и обновлениях мгновенно появляется на экране пользователя в виде push-уведомлений. Это улучшает пользовательский опыт и помогает компаниям увеличить конверсию. Но следует помнить, что на iOS это пока что работать не будет.

pwa development

PWA Development

Если у вас есть веб-сайт, подумайте о реализации прогрессивного веб-приложения. Вы можете сделать это несколькими способами.

Готовые решения

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

Не забудьте учесть подводные камни, с которыми вы можете столкнуться в этом случае. Плагины подходят только для сайтов, созданных на WordPress, Joomla!, Drupal, Magento, WooCommerсe, Cs-Cart, а вариант Гэтсби может потребовать довольно глубоких знаний кода.

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

Индивидуальная разработка

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

Вы определенно выиграете от этого, так как в этом случае компания-разработчик программного обеспечения обеспечивает квалификацию, опыт и ответственность. Каковы гарантии успеха вашего проекта?

PWA разработка не отличается от создания обычного сайта. Нет необходимости создавать дополнительные API - при разработке PWA используется один код.

pwa приложения: преимущества в бизнесе

PWA приложения: преимущества в бизнесе

Функции PWA позволяют оптимизировать ведение любого бизнеса. Широкий охват пользователей, автономный доступ, простота установки и использования, межплатформенная разработка и повышенная скорость загрузки информации - эти факторы положительно влияют на конверсию и трафик сайта. Таким образом, это решение подходит практически для любого типа бизнеса.

Отельный бизнес

Progressive web apps – эффективное программное решение в области бронирования отелей как для пользователей, так и для владельцев бизнеса. Основные функции:

  • доступ с любого устройства в режиме оффлайн: если нет подключения к Интернету, гость может просмотреть информацию о доступных номерах;
  • push-уведомления: сообщите клиентам, что цена на бронирование номеров интересующих их дат была снижена;
  • отслеживание доступа и активности клиентов: получите мгновенный отзыв от гостя сразу после его выезда из вашего отеля.

Здравоохранение

Многие медицинские работники стараются быть максимально ориентированными на пациента. Разработка специализированного PWA для пациентов поможет в этом. Основные задачи, которые решает использование PWA:

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

Образование

Использование технологии PWA позволяет повысить эффективность и результативность образовательного сектора. Что получают пользователи:

  • простую, привлекательную компоновку и использование на любом устройстве: у учеников исчезает привязка к определенному времени или месту для получения знаний, достаточно смартфона или планшета, чтобы ознакомиться с материалами последнего урока;
  • доступ к контенту при минимальных ресурсах: заряд батареи или низкая пропускная способность устройства не мешают изучению новой информации. Функции PWA обеспечивают максимальную производительность в любом случае;
  • повышенную вовлеченность: плавный поток PWA удерживает внимание пользователей и стимулирует привлечение новых.

Электронная коммерция

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

истории успеха pwa

Истории успеха PWA

Google публикует истории успеха компаний, которые внедрили PWA. Посетите эту страницу, чтобы узнать больше о том, как компании решили проблемы с медленной сетью, как они оптимизировали пользовательский опыт и получили до 80% увеличение конверсий и производительности SEO.

Также интересным является пример AliExpress - лидер онлайн-продаж товаров из Китая, который именно с помощью PWA увеличил конверсию на 104%.

pwa – технология будущего в маркетинге

PWA – технология будущего в маркетинге

Несмотря на недавнее появление, прогрессивная технология веб-приложений завоевывает нишу на рынке IT- инструментов. Основным достоинством PWA приложений является увеличение взаимодействия пользователя с интерфейсом (UX), что означает выгоду для бизнеса.

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

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

Как конвертировать сайт в PWA приложение?

В данной примере мы рассмотрим базовые основы прогрессивных веб-приложений (PWA), использующий исключительно нативный API-интернет обозревателя (браузера). Мы не будем использовать никакие фреймворки и все что здесь описано может быть использовано для любых движков.

Что нам необходимо:

  • 20 минут свободного времени;
  • базовые знания HTML и JavaScript;
  • Google Chrome for PWA developer tools;
  • Демонстрационное приложение.

Задача

Планируется проведение каких либо конференций, есть их расписание и информация о текущем докладчике.

Приложение состоит из 3-х файлов app.js, style.css, и index.html. HTML-файл содержит весь статический контент. Докладчики и расписание загружается с сервера асинхронно из JSON файла подобно REST API запросам.

Установка

После скачивания архива, (https://github.com/vaadin-learning-center/pwa-tutorial-basic/archive/start.zip) распаковки и перехода внутрь директории запускаем команды установки и запуска вебсерверa от NodeJS.

npm install serve
./node_modules/serve/bin/serve.js

После этого сайт будет доступен по адресу http://localhost:5000/

Превращение вашего сайта в ПВП (прогрессивное веб-приложение) состоит из 2-х шагов:

  • создание манифеста;
  • добавление вокера.

Манифест представляет собой JSON файл (manifest.json), описывающий будущую структуру и настройки вашего приложения.

{
"name": "Название приложения",
"short_name": "Коротко",
"start_url": ".",
"display": "standalone",
"background_color": "#2A3443",
"description": "Описание",
"theme_color": "#2A3443",
"icons": [
{
"src": "./img/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

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

Сохраняем этот файл и добавляем ссылку на него в наш index.html в секцию header.

 

После загрузки манифеста браузером он поймет что мы загрузили не сайт а приложение.

Что бы в этом убедиться откроем консоль по F12 и перейдем во вкладку Application.

После чего выберем пункт Manifest и видим то, что указали в файле манифеста:

Регистрация вокера

Манифест определяет наш сайт как приложение для браузера. Вокер — это оставшаяся часть пазла, которая будет обеспечивать логику работы приложения в том числе в оффлайн режиме.

Вокер написан на чистом JS и служит связующим звеном между нашим приложением и сетью. С вокером (и некоторой поддержкой API как Cahe API) нам становится доступным контроль над поведением приложения при любых ситуациях с сетью.

Зарегистрируем простейший вокер создав файл app.js.

class PWAConfApp {}
window.addEventListener('load', e => {
new PWAConfApp();
registerSW();
});

Тут мы вызываем функцию registerSW() для регистрации, которую опишем позже.

При этом хорошей практикой будет использование задержки до наступления полной загрузки страницы.

Прежде чем зарегистрировать вокера необходимо убедиться что наш браузер его поддерживает. Для этого в определении метода registerSW проверим поддержку асинхронным стилем (используя операторы async и await).

async function registerSW() {
if ('serviceWorker' in navigator) {
try {
await navigator.serviceWorker.register('./sw.js');
} catch (e) {
alert('ServiceWorker registration failed. Sorry about that.');
}
} else {
alert('Not support!');
}
}

Функция async облегчает понимание кода. После проверки мы регистрируем вокера функцией navigator.serviceWorker.register и уведомляем пользователя если браузер этого не поддерживает либо при ошибке регистрации.

Перегрузим браузер и взглянем на ситуацию в консоле.

Как видно наш вокер указан в секции Service Workers.

Для того чтоб сделать работу комфортней отметим «Update on reload». Дело в том, что вокер обычно загружается один раз независимо от кол-ва открытых вкладок, поэтому мы не увидим изменений при обновлении страницы.

Теперь у нас есть зарегистрированный вокер и мы можем попробовать закешировать некоторый контент.

Кэширование и обслуживание статики

Сервис вокер полностью управляем событиями. Это значит что никакой из участков кода не запустится пока не произойдет событие, к нему подвязанное. Основные интересующие нас события это install и fetch. Мы можем отслеживать их добавив следующие строки кода в файл sw.js

self.addEventListener('install', async event => {
console.log('install event')
});


self.addEventListener('fetch', async event => {
console.log('fetch event')
});

Теперь мы видим что вокер запущен и отписал в консоль наши сообщения.

Любые изменения в файле sw.js запускают новое событие intall и позволяют обновить приложение.

Теперь определим две константы в которых обзовем наш кеш и определим массив файлов для кэширования.

const cacheName = 'pwa-conf-v1';
const staticAssets = [
'./',
'./index.html',
'./app.js',
'./styles.css'
];

Обратите внимание на относительные пути к файлам. Это пригодится в случаях нахождения вашего приложения на внутренних страницах сайта. Так же мы должны явно указать два пути ./ и ./index.html даже если результат их загрузки будет одинаков.

Теперь пришло время закешировать наш массив.

self.addEventListener('install', async event => {
const cache = await caches.open(cacheName);
await cache.addAll(staticAssets);
});

Где мы создаем объект кэша с новым именем и говорим ему добавить в кеш наши пути.

Функция addAll не сработает если один из путей будет недоступен.

Обновим страницу и откроем в консоле секцию Cache Storage и увидим наши данные.

Мы так же можем дебажить приложение из вкладки Sources.

Отдача закешированного контента

Сейчас вся статика закэширована и готова к отдаче. Следующим шагом мы должны внедриться в событие fetch и отдать эти файлы клиенту.

self.addEventListener('fetch', event => {
const req = event.request;
event.respondWith(cacheFirst(req));
});

Тут мы забираем запрос из события и говорим событию вызвать функцию cacheFirst где отдадим элемент из кэша, соответствующий поступившему запросу.

async function cacheFirst(req) {
const cache = await caches.open(cacheName);
const cachedResponse = await cache.match(req);
return cachedResponse || fetch(req);
}

Тут мы открываем именованный кеш. Затем пытаемся получить его элемент по значению запроса, в данном случае кэш представляет собой базу данных с парами ключ-значение, где в качестве ключа используется url запроса. И наконец мы возвращаем элемент кэша иначе передаем за это ответственность сети (делегируем).

Обновляем страницу и убеждаемся что все работает как надо. При этом что бы эмулировать отсутствие соединения отмечаем галочку Offline.

Динамическое кеширование

Несмотря на то что наше приложение работает, оно по прежнему грузит динамический контент из сети, которого пока нет в кэше. Исправим это.

Логика будет следующей. Сперва мы загрузим JSON из сети и получим актуальную версию данных. Затем сохраним их в кэш перед отдачей. Если же сеть не доступна мы берем данные из кэша. Такой алгоритм называется networkingFirst.

Мы предполагаем что картинки статичные, поэтому к ним применим алгоритм cacheFirst, который описали ранее но с изменениями по определению типа ресурса.

self.addEventListener('fetch', event => {
const req = event.request;
if (/.*(json)$/.test(req.url)) {
event.respondWith(networkFirst(req));
} else {
event.respondWith(cacheFirst(req));
}
});

Опишем функцию networkFirst.

async function networkFirst(req) {
const cache = await caches.open(cacheName);
try {
const fresh = await fetch(req);
cache.put(req, fresh.clone());
return fresh;
} catch (e) {
const cachedResponse = await cache.match(req);
return cachedResponse;
}
}

Где при помощи функции fetch пытаемся тянуть данные с сети и сохранить их в кеше, клонировав ответ и затем возвратив его клиенту. В случае исключения и отсутствии сети берем последние данные с кэша, соответствующие запросу.

Наконец, обновим функцию chacheFirst, добавив вызов networkFirst вместо fetch в случае отсутствия данных в кэше для того чтоб их закэшировать.

Теперь наше приложение после первого запуска работает независимо от того, есть ли соединение с сетью в последствии.

Несмотря на это наше приложение все еще имеет ряд недостатков:

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

В дальнейшем мы можем использовать инструмент Workbox для решения этих проблем.

У ВАС ОСТАЛИСЬ ВОПРОСЫ?

Оставьте ваши контактные данные. Наш менеджер свяжется и проконсультирует вас.

ПОЛУЧИТЬ КОНСУЛЬТАЦИЮ

Наш менеджер свяжется с Вами в ближайшее время

5/5
Проголосовало людей: 4
СОДЕРЖАНИЕ
СТАТЬИ
Значительные преимущества сайта с PWA
PWA Development
PWA приложения: преимущества в бизнесе
Истории успеха PWA
PWA – технология будущего в маркетинге
Как конвертировать сайт в PWA приложение?
Сколько времени нужно на разработку: сайты, интернет-магазины, сложные системы
Обращаясь в агентство, заказчик хочет получить сайт как можно скорее. В идеале – на вчера.…
Wezom
Wezom
Преимущества и возможности YII framework для создания веб-сайтов
Прежде, чем создавать сайт, нужно тщательно продумать его цели и будущие возможности. Для крупных проектов,…
Wezom
Wezom
Разработка сайтов на Python Django
Python Django помогает реализовать сложные проекты и создать функциональный сайт, по возможностям не уступающий YouTube,…
Wezom
Wezom
Разработка сайтов и приложения на Angular
Angular состоит из компонентов, отвечающих за внешний вид и взаимодействие пользователя. Их суть заключается в…
Wezom
Wezom
ПОЛУЧАТЬ ИНТЕРЕСНЫЕ СТАТЬИ
Уже подписались 282 человек
Автор
2048
0
Алексей Варламов
Алексей
Варламов
копирайтер
Возможно
Мы продолжаем наш цикл статей о WebRTC, в прошлый раз мы говорили об использовании технологии…
Дмитрий Жариков
Дмитрий Жариков
Во время новогоднего ажиотажа к нам поступила заявка от постоянного клиента, который занимается продажей недвижимости…
Полина Приходько
Полина Приходько
Давайте начнем
беседу!
КОММЕНТАРИИ0
ОСТАВИТЬ КОММЕНТАРИЙ К СТАТЬЕ
ПОДПИСЫВАЙТЕСЬ НА РАССЫЛКУ АЙТЫЖБЛОГ
ХОТИТЕ ПОЛУЧАТЬ 
ИНТЕРЕСНЫЕ СТАТЬИ?
Уже подписались 282 человек
313
ПОПИСЧИКОВ
ЧИТАТЬ
4295
ПОПИСЧИКОВ
СЛЕДИТЬ
9307
ПОПИСЧИКОВ
СЛЕДИТЬ