Взгляд со стороны бизнеса
Бизнес стремится повысить лояльность клиентов и расширить клиентскую базу. В этом смысле PWA может стать полезным инструментом, предоставляя следующие возможности:
- стимулирование роста продаж;
- увеличение среднего чека и повышение клиентской лояльности;
- поощрение дополнительных покупок через отправку push-уведомлений;
- улучшение коммуникации с потенциальными и текущими клиентами;
- снижение затрат на рекламные кампании.
С точки зрения скорости разработки и стоимости PWA имеет следующие преимущества:
- разработка и поддержка обходятся примерно на 70% дешевле, чем мобильные приложения;
- экономия на повторном привлечении клиентов, так как нет дополнительных затрат на ретаргетинг и ремаркетинг;
- приложение не обязательно размещать в App Store или Google Play — его можно загрузить прямо с вашего сайта;
- работает быстрее классического сайта за счет кеширования;
- размер PWA-приложения обычно не превышает 1 МБ, что значительно меньше, чем у нативных приложений.
Архитектура PWA
PWA — это веб-приложение, созданное с использованием определенных технологий для достижения трех основных целей:
- надежность (Reliable): приложение загружается и отображается мгновенно, независимо от качества соединения;
- быстрота (Fast): быстрый обмен данными и отзывчивый интерфейс;
- привлекательность (Engaging): комфортный и удобный пользовательский опыт, который побуждает возвращаться.
С точки зрения Google, именно эти качества отличают PWA от обычных сайтов и приближают к нативным приложениям. Для этого разработчикам доступны такие инструменты, как Service Worker и push-уведомления. Насколько далеко разработчик сможет продвинуться в этом направлении, зависит только от него.
Для построения PWA-приложения используются следующие технологии:
- Service Worker;
- Push Notifications;
- HTTPS;
- Web App Manifest;
- Application Shell.
Благодаря этим технологиям и их корректному использованию веб-приложение приближается к PWA, но, как и говорилось выше, всё зависит от разработчика и навыков работы с данными технологиями. Разберем их подробнее.
Service Worker
Service Worker — это прокси-сервер, который работает между браузером и сетью. Все сетевые запросы проходят через него. Это разделение упрощает превращение сайта в PWA.
Service Worker выполняется в отдельном потоке, независимом от основного приложения. Он позволяет:
- перехватывать сетевые запросы;
- эффективно кешировать файлы;
- отправлять push-уведомления;
- выполнять фоновую синхронизацию;
- обеспечивать офлайн-доступность.
Он имеет доступ к Cache Storage и IndexedDB для хранения данных и дает разработчику полную свободу в реализации бизнес-логики.
Плюсы работы с кешем:
Увеличение производительности. Кешированные ресурсы загружаются значительно быстрее, чем при обращении к серверу, что ускоряет загрузку страниц и улучшает пользовательский опыт.
Работа в офлайн-режиме. При наличии кешированных ресурсов приложение может продолжать функционировать в офлайне, используя локально сохраненные данные, пока сеть недоступна.
Среди недостатков можно отметить:
Ограниченный объем кеша. Каждый браузер имеет фиксированный размер кеша, и важно контролировать его заполнение, чтобы избежать переполнения.
Избыточное количество данных в кеше. Каждый файл сохраняется локально на устройстве пользователя и занимает память, поэтому необходимо следить за тем, чтобы кеш не занимал слишком много места.
С помощью Service Worker можно реализовывать различные стратегии работы с кешем, такие как Network-First, Cache-First и Cache-Only.
Теперь рассмотрим каждую стратегию подробнее.
Network-First: сначала пытаемся загрузить данные из сети. Если успешно — обновляем кеш и возвращаем данные, если нет — используем кеш. Подходит для часто обновляющихся ресурсов (например, блоги, маркетплейсы, чаты).
Cache-First: сначала ищем данные в кеше. Если их нет — запрашиваем из сети и сохраняем в кеш. Подходит для ресурсов с редкими обновлениями данных или там, где актуальность информации не критична (пример: лендинги, иконки и изображения в блогах и новостных порталах). Его не стоит использовать для ресурсов, которые должны всегда оставаться актуальными, так как это может негативно сказаться на пользовательском опыте, поскольку пользователи могут не осознавать, что видят кешированные данные.
Cache-Only: данные загружаются из сети один раз и потом всегда берутся из кеша. Эта стратегия достаточно специфична и требует осторожного применения. Однако она может быть полезна в следующих случаях: когда нет необходимости в актуализации данных, например для сайтов для чтения книг (где книгу загружают один раз и читают) или для рекламных лендингов (которые обновляются довольно редко и содержат динамические данные).
Service Worker — это мощный инструмент, который значительно улучшает пользовательский опыт и производительность приложения. Он способен перехватывать сетевые запросы, что позволяет кешировать ресурсы и обеспечивать работу приложения в офлайне. Это существенно повышает удобство использования в условиях слабого или отсутствующего интернет-соединения.
Push Notifications
Push Notifications — это сообщения, которые отправляются с сервера на устройство пользователя, даже если веб-приложение неактивно или закрыто. Они могут включать текст, звук и другую информацию и служат для уведомления пользователя о важных событиях, обновлениях и других действиях.
Сейчас большинство веб-ресурсов злоупотребляют этой технологией, не заботясь о пользовательском опыте. Лучшим решением будет предлагать включить пуши, если:
- у вас крупное приложение и есть пользовательская регистрация;
- поведение пользователя показывает его заинтересованность в ресурсе.
HTTPS
HTTPS — это безопасный протокол передачи данных, который обеспечивает шифрование с помощью криптографических протоколов SSL и TLS. Это усовершенствованная версия протокола HTTP.
PWA требует от разработчика, чтобы все ресурсы сайта передавались по протоколу HTTPS. SSL-сертификат можно получить бесплатно, и некоторые хостинг-провайдеры делают это автоматически. Важно, чтобы на сайте не было ссылок на незащищенные ресурсы, так как некоторые браузеры могут не отображать такой сайт.
Особенно часто проблемы возникают с изображениями. Редакторы и комментаторы часто вставляют в материалы ссылки на картинки из интернета, и иногда такие ссылки добавляются автоматически. Важно сохранять изображения либо на свой сервер, либо на сервис с поддержкой HTTPS.
Web App Manifest
Web App Manifest — это JSON-файл, который декларативно определяет для браузера название приложения, иконку, а также внешний вид PWA, который может быть полноэкранным, автономным. Он позволяет установить PWA как отдельное приложение на домашний экран устройства.
Кратко рассмотрим основные параметры:
- name — имя, которое будет отображаться под иконкой и везде, где представлено ваше «приложение»;
- short_name — используется в случаях, когда недостаточно места для полного имени;
- icons — набор иконок различных размеров;
- start_url — определяет URL, который открывается при нажатии на иконку. Этот параметр можно использовать, чтобы отслеживать пользователей, открывающих сайт через иконку на рабочем столе, добавив, например, параметр ?src=homescreen к URL;
- display — определяет, как будет отображаться ваш сайт (с адресной строкой или без нее и т. д.);
- background_color — устанавливает цвет страницы до ее загрузки. Пока страница не загружена, пользователи видят пустое белое поле. Чтобы сделать это время более приятным, можно изменить цвет фона, например на цвет, соответствующий дизайну сайта.
Application Shell
Application Shell — это минимальный каркас интерфейса: меню, навигация, ключевые элементы управления. Оболочка приложения загружается быстро и обеспечивает мгновенный отклик, поскольку весь интерфейс кешируется и доступен без интернет-соединения. Даже при медленном соединении пользователи могут взаимодействовать с элементами, а контент будет загружаться по мере необходимости.
Заключение
Резюмируя, можно выделить следующие плюсы использования PWA:
- PWA поддерживается наиболее популярными операционными системами: Windows, iOS и Android. Приложения можно установить на ПК, смартфоны, планшеты и терминалы в торговых залах. Обновления добавляются разработчиками удаленно, и пользователи могут видеть изменения и улучшения без необходимости самостоятельно загружать их.
- PWA индексируется Google и другими поисковыми системами. Благодаря Service Worker, который работает в фоновом режиме, и стратегиям кеширования обеспечивается возможность офлайн-работы.
- Frontend отделен от Backend, что позволяет сократить время и ресурсы на разработку и переработку дизайна, а также на логику взаимодействия PWA с клиентом.
- PWA можно установить без использования Google Play и App Store, а также несмотря на ограничения на установку приложений из неизвестных источников. Антивирусные программы также лояльно относятся к PWA. Передача данных осуществляется по протоколу HTTPS, что обеспечивает безопасность.
- С февраля 2019 года PWA можно добавлять в App Store и Google Play, что дает пользователям возможность загружать приложения из привычных источников.
Однако имеется и ряд недостатков:
- Не все устройства и операционные системы поддерживают полный спектр возможностей PWA. Например, пользователи iOS сталкиваются с ограничениями: приложения могут хранить локальные данные и файлы размером не более 50 МБ, отсутствует доступ к встроенным платежам (In-App Payments) и многим другим сервисам Apple, а интеграция с Siri недоступна. Поддержка PWA на iOS начинается с версии 11.3.
- Работа офлайн также имеет свои ограничения, а доступ к аппаратным компонентам может быть ограничен. Кроме того, PWA не предоставляет достаточной гибкости для реализации специального контента, такого как программы лояльности. При использовании PWA может увеличиваться расход заряда батареи мобильного устройства.
PWA — это мощный и прогрессивный инструмент в арсенале команд разработки. С помощью этого подхода можно как экономить на проверках бизнес-теорий, так и улучшать пользовательский и разработческий опыт. Подготовка к трансформации веб-приложения в PWA может существенно улучшить производительность, а интерфейс сделать более дружелюбным и отзывчивым.
