PWA, или Progressive Web Apps, - это веб-приложения, объединившие в себе все лучшее из веб-сайтов и мобильных приложений. Подобные нативным по своему функционалу, они работают на любом устройстве, где есть веб-браузеры. На мобильных гаджетах PWA полноценно поддерживаются и на Android, и, хотя и с некоторыми ограничениями, на iOS.
Гиганты, как Twitter, Forbes и Pinterest, уже оценили мощность PWA, значительно увеличив поток пользователей и доходы от рекламы. Это неудивительно, учитывая то, что PWA приложения предлагают новый интересный пользовательский опыт и сравнительно экономичные в разработке. Они обеспечивают возможность получать push-уведомления, работу в оффлайн режиме и быстрый доступ без необходимости загрузки. Фактически, это новый "прогрессивный" этап в развитии сайта, где акцент - на универсальности.
Давайте подробно рассмотрим progressive web apps: что это и какие преимущества и недостатки они имеют. Чтобы лучше понять этот процесс, мы подготовили вам иллюстративный гайд с образцами кода для PWA.
Плюсы: безупречный опыт
Вот основные преимущества PWA, которые привлекают внимание как разработчиков, так и пользователей:
- Кросс-платформенность. PWA имеют универсальную совместимость для устройств с различными операционными системами, размерами экрана и браузерами (Chrome, Firefox, Safari и Edge). Это значительно экономит затраты на разработку, поскольку речь идет всего об одном, но универсальном приложении.
- Автономный режим. Технология service workers предусматривает кэширование ресурсов, благодаря чему PWA полноценно функционирует без интернета или при нестабильной связи. И даже при закрытом браузере срабатывает получение push-уведомлений.
- Установка на рабочий стол. Пользователи могут разрешить добавить ярлык PWA на экран своего девайса, и приложение будет работать как нативное.
- Публикация в магазинах приложений. Такие известные магазины, как Google Play Store, Microsoft Store и Meta Quest Store позволяют разместить в них PWA приложения, достаточно лишь упаковать их с помощью инструмента PWABuilder.
- Отсутствие необходимости обновления. Для PWA не нужно время от времени устанавливать новые версии из магазина приложений, все исправления ошибок разработчикам происходят автоматически. Также не требуется длительная сложная инсталляция - все работает прямо из браузера.
- Экономность. В отличие от нативных приложений, PWA занимают существенно меньше памяти на устройствах, а потому быстры даже на старых гаджетах. Плюс кэширование ресурсов значительно уменьшает нагрузку на сеть.
- Быстродействие. PWA загружаются и реагируют на действия пользователя мгновенно, поэтому максимально удобны в использовании.
- URL ссылки. PWA легко распространять через обычную ссылку в браузере, что невозможно с другими видами приложений.
- Данные. PWA, по сути, находятся на сервере, а потому легкий доступ к его данным есть на всех видах платформ.
Благодаря этим преимуществам PWA-приложения эффективно имитируют UI/UX нативных приложений и даже превосходят их по многим пунктам.
Минусы: ограничения и затруднения
PWA имеют некоторые ограничения по этим пунктам:
- Поддержка iOS. А именно ограниченная поддержка service workers и некоторых отдельных PWA-функций приводит к сужению функциональности PWA на устройствах Apple.
- Доступ к устройству. PWA приложения со спецфункциональностью или высокой производительностью нередко сталкиваются с ограниченной поддержкой низкоуровневых API. Эти программные интерфейсы предоставляют доступ к аппаратному обеспечению устройства, а именно к операциям с памятью, вводом-выводом и сетевыми протоколами. В отличие от нативных приложений, PWA часто запрашивают дополнительный доступ к устройствам и не всегда его полностью поддерживают.
- Политики браузеров. PWA - это веб-приложения, а потому работают в пределах браузера и свободны в своей функциональности настолько, насколько им позволяют браузерные настройки безопасности.
Минусов у PWA приложений на самом деле немного, и они в основном касаются ограничений платформ.
В разработке PWA богато на стили и возможности их сочетания, гибкость разметки и привлечения скриптовых языков. Благодаря этому разработчики могут создавать максимально интерактивные элементы управления, балансируя между перечисленными минусами и плюсами. Выбор самих инструментов зависит от пожеланий будущих пользователей и функциональных требований к приложению.
Поэтому давайте углубимся в стандартный процесс разработки PWA, чтобы увидеть, как именно вебсайту удается выглядеть как приложение, иметь корпоративную иконку на экране и при этом быть почти независимым от стабильного интернет-подключения.
Процесс разработки PWA
На самом деле разработка Progressive Web Apps довольно похожа в подходах на создание нативных приложений. Разница лишь в том, что для PWA виртуальной машиной становится браузер, а не память устройства. И для того, чтобы приложение PWA работало правильно в автономном режиме, задействуют следующие инструменты:
- Service workers для кэширования таких ресурсов, как HTML-страницы, изображения, файлы JavaScript и стили.
- IndexedDB для хранения структурированных данных, как текст, изображения, настройки, также в больших объемах.
- LocalStorage для хранения небольших объемов данных в виде ключ-значения, и без ограничения времени.
- SessionStorage для хранения ограниченного объема, который будет доступен только после одного сеанса работы браузера.
- JSON и API для загрузки и сохранения данных и обмена ими с сервером через JavaScript.
Важно правильное планирование и правильные подходы к разработке, чтобы обеспечить корректную работу в автономном режиме и синхронизацию данных при возвращении в онлайн-режим.
Манифест веб-приложения (Web App Manifest)
Начнем с Web App Manifest. Именно этот файл в формате JSON позволяет PWA отображать как нативное приложение, в виде пиктограммы. Манифест передает устройству метаданные о приложении: автора, иконку, цвета, название и некоторые параметры настройки, такие как способы навигации или тип развертывания на экране.
От наполнения такого файла зависит корректность отображения приложения и его интеграция с устройством.
Что такое service worker и как он работает?
Значительную роль в работе PWA играют service workers - специальные скрипты JavaScript, которые позволяет пользоваться браузер как площадкой. Именно они способны работать в фоновом режиме и имеют собственный жизненный цикл. Для правильной работы service workers регистрируют и устанавливают в файл JavaScript, который подключают к HTML странице.
Когда на устройстве пользователя появляется интернет, service workers задействуют сетевые запросы для кэширования данных, и уже обновленное приложение продолжает работать онлайн или оффлайн. Пользователь в этот процесс не вовлечен вовсе, и это дает много преимуществ и для легкого взаимодействия с приложением, и для стабильности версии.
С помощью скриптов service workers также отправляются push-уведомления, даже при закрытом приложении, то есть пользователь с ним никак в этот момент не взаимодействует. Это позволяет уведомлять его обо всех важных событиях или обновлениях.
Жизненный цикл service workers в PWA приложении
Для лучшего понимания функциональности service workers, стоит посмотреть на их жизненный цикл:
- Регистрация. Все начинается с регистрации service worker на странице приложения с помощью метода navigator.serviceWorker.register(). В это время service worker работает в фоновом режиме.
- Установка. Service worker устанавливаются в браузере и в этот момент загружаются и кэшируются нужные для действия PWA ресурсы.
- Активация. Если установка прошла успешно, происходит активация service workers. В ходе этого процесса можно очистить устаревшие кэшированные ресурсы.
- Управление запросами. Активированные service worker в PWA перехватывают сетевые запросы и обрабатывают их.
- Обновления. Service worker сами себя умеют обновлять. Для этого достаточно изменить исходный код или зарегистрировать и активировать новую версию service worker.
- Завершение работы. Ради экономии ресурсов браузера, service worker можно выключать или замораживать, если они неактуальны. Это происходит и когда само приложение закрывается, и когда браузер оптимизирует работу и останавливает некоторые из скриптов ради быстродействия.
Service workers - ключевой механизм в разработке PWA, который управляет программным кэшированием. Ожидается, что в скором будущем скрипты service workers будут способны к еще большему и расширят горизонты возможностей прогрессивных веб-приложений.
Установка PWA на свое устройство
О том, что Progressive Web Apps можно установить на свой гаджет, пользователь узнает из установочного баннера PWA. Он имеет вид всплывающего сообщения, специального элемента-кнопки на сайте или виджета с предложением "Добавить на главный экран" или "Установить". Установленная иконка позволит пользователям быстро запускать приложение, а также не забывать о нем.
Для владельцев PWA еще больше плюсов: существенное увеличение вовлеченности и активности пользователей, их внимание к приложению и бренду в целом. Поэтому установка такого приложения на устройство - важная стратегия продвижения PWA, потому лучше сделать этот процесс как можно более простым для конечных пользователей.
Рассмотрим общие шаги для создания установочного баннера:
- Добавьте метатег к HTML-странице, который укажет, что это PWA.
- Настройте установочный баннер в манифесте JSON, указав название, иконку приложения или favicon.
- Вставьте JavaScript-код в PWA для отображения баннера "Установить" при посещении веб-сайта.
Если пользователь нажмет на баннер, на рабочем столе его устройства появится иконка приложения.
Страница поддержки в автономном режиме PWA
Еще один важный элемент PWA - это страница поддержки в автономном режиме. Чаще всего это упрощенная версия содержимого приложения, главная цель которой - предоставить пользователю полезную информацию при отсутствии интернет-связи. Все это снова магия кэширования: необходимые ресурсы уже были загружены и сохранены на устройстве еще во время первого посещения прогрессивного веб-сайта.
Так выглядит процесс создания страницы поддержки:
- Составление HTML-страницы с соответствующей информацией, что приложение находится в автономном режиме.
- Сохранение этой страницы в кэше в виде статического ресурса при помощи методов caches.open() и cache.addAll():
- Во время события "fetch", что означает "запрос" или "получение", с помощью service worker можно проверить, доступен ли нужный ресурс в кэше. Если его там нет, и в этот момент отсутствует интернет, нужно ответить страницей поддержки для автономного режима:
Так пользователь получит содержательный ответ на свой запрос даже в условиях полного отсутствия интернет-связи.
Стратегии и концепции кэширования в PWA
В мире современных PWA приложений кэширование играет ключевую роль в обеспечении быстродействия и доступности. Оно позволяет сохранять ресурсы на устройстве клиента и снижать зависимость от сети. В PWA кэшируются такие как динамические данные, полученные из интернета, так и статические, как HTML, CSS, JavaScript, изображения, шрифты и тому подобное. И когда устройство находится в офлайн-режиме, service workers используют уже сохраненные в кэше данные для работы PWA.
Установка кэша в PWA приложении
На таком этапе жизненного цикла service workers, как инсталляция, как раз и происходит кэширование. Сохраняются основные ресурсы для работы приложения и обеспечивается их доступность в режиме офлайн или при медленном интернет-соединении.
Часть скрипта service workers - обработчик событий "install", обычно имеет следующий вид:
Код для кэширования ресурсов для PWA находится в функции event.waitUntil. Благодаря ей браузер "ждет", пока завершатся определенные асинхронные операции в приложении и можно будет переходить к следующему этапу.
Удаление и обновление кэша в PWA приложении
Как только новая версия service workers была успешно установлена и активирована, наступает событие "activate". Его основная цель - подготовить приложение к работе этой версии service workers. Во время этого события выполняются следующие действия:
- Поддержание чистоты кэша. Очистка устаревших кэшированных ресурсов из service workers и освобождение места.
- Установка нового кэша. Размещение нового кэша на свободном месте для хранения новых ресурсов или обновления существующего.
- Другие полезные действия для активации обновленной версии service workers в PWA.
Вот пример кода для обработки события "activate":
Контроль над кэшированием и сетевыми операциями в PWA
Следующее событие в service workers называется "fetch". Его цель - перехватить сетевой запрос при загрузке страницы и ответить на него самостоятельно, контролируя при этом кэширование и сетевые операции.
Кэш в PWA - это временная среда, где хранятся копии веб-страниц, скриптов, изображения и другие ресурсы, которые уже были загружены пользователем. Весь секрет прогрессивных веб-приложений в том, что при повторном взаимодействии с ними не нужно все это снова загружать из сети - достаточно использовать хранилище.
Сам код обработки этого события обычно выглядит так:
Событие "fetch" в service worker позволяет реализовать различные концепции и стратегии кэширования, и порой их даже сочетают.
Стратегии кэширования: предварительная и динамическая
Чаще всего обеспечение бесперебойной работы PWA в оффлайне осуществляется через предварительное и динамическое кэширование.
Предварительное кэширование
Предварительное кэширование ресурсов в PWA приложении, или Pre-Caching Assets, предусматривает хранение всех статических ресурсов еще во время установки или активации service workers.
Дальнейшие шаги просты:
- Определение списка необходимых ресурсов для предварительного кэширования: JavaScript, CSS, шрифтов и HTML-страницы. Например:
- Создание кэша, в который сохраненные ресурсы добавляют с помощью метода caches.open().
- Обеспечение доступа к кэшу, чтобы service workers могли использовать эти данные во время события "fetch".
- Обновление кэша при активированном service worker или изменениях приложения.
Предварительное кэширование в PWA позволяет сохранять ресурсы заранее, что обеспечивает оптимальную скорость первой загрузки страниц приложения, особенно, когда они планируются объемными.
Динамическое кэширование
Динамическое кэширование в PWA, или Dynamic Caching, предусматривает кэширование ресурсов в реальном времени, на основе текущих сетевых запросов. Эта стратегия позволяет более гибко управлять кэшем, реагируя на действия пользователя или изменение контента.
Реализация динамического кэширования происходит таким путем:
- Событие "fetch" в service worker:
- Проверка кэша. Чтобы проверить ответ в кэше во время сетевого запроса, используется метод caches.match(event.request):
- Обновление кэша. В зависимости от полученного ответа, кэш для этого ресурса можно обновить:
Динамическое кэширование в PWA ценно тем, что позволяет обновлять данные на лету, в реальном времени, и сохранять при этом только актуальные для пользователя данные. Это существенно уменьшает нагрузку на сервер при работе приложения.
В целом логика кэширования, выбор и сочетание стратегий зависит от требований к PWA приложению.
Концепции кэширования: Conditional Fallbacks
Conditional Fallbacks в PWA - это главная концепция кэширования и поддержки резервных версий контента. Она предлагает гибкие решения для оффлайн режима и позволяет динамично адаптировать содержимое приложения в зависимости от различных условий.
Conditional Fallbacks реализуется следующим путем:
- Определение условий, при которых должны меняться резервные ресурсы: геолокация, тип устройства, размер экрана, наличие интернет-соединения и т.д.
- Создание резервных ресурсов в PWA в виде разных версий страниц под разные условия и типы устройств.
- Опциональный код в обработчике событий "fetch" гибко подберет нужный резервный ресурс под текущие условия:
Сами резервные ресурсы, которые определены в обработчике "fetch", при необходимости кэшируются в обработчике "install" или других местах кода.
Благодаря Conditional Fallbacks содержимое PWA гибкое и адаптируется к условиям и потребностям пользователя, что и обеспечивает безупречный опыт взаимодействия с ним.
Ограничение размера кэша в прогрессивных приложениях (PWA)
Еще один шаг в разработке PWA - это ограничение кэша. Важно, чтобы кэш не занимал много пространства на устройстве пользователя, ведь это повлияет на производительность. Для этого применяются следующие подходы:
- Установка максимального размера кэша, регулярная его проверка и обновление. В этом поможет JavaScript, service workers и специальные библиотеки для работы с кэшем.
- Удаление устаревшего кэша в приложении с помощью специальных методов в service workers.
- Выборочное кэширование для сохранения в PWA действительно важных для пользователя данных.
- Система потребления ресурсов, которая определяет, какие именно ресурсы в кэше менее всего используются и автоматически их удаляет.
- Контроль версий для удаления устаревших ресурсов при каждом обновлении приложения пользователем.
Так может выглядеть сам процесс удаления кэша:
Правильное управление размером кэша, учитывая требования к приложению и тип устройства, сохранит оптимальную производительность работы PWA.
Работа с локальной базой: IndexedDB и LocalStorage
Для правильного сохранения данных на устройстве пользователя во время работы PWA приложения офлайн используются локальные хранилища LocalStorage и IndexedDB. Это базы данных внутри самого браузера, которые позволяют хранить структурированные данные и иметь к ним доступ.
LocalStorage отлично подходит для хранения небольших объемов данных в виде строка-строка, или ключ-значение. Эта база данных имеет ограничения на объем данных и быстрый, но простой API, помогающий хранить, получать и удалять информацию по ключу. Но если объем данных планируется больше 10 мб, нужны более мощные механизмы, и в таком случае дополнительно задействуют IndexedDB.
IndexedDB работает с более сложными данными и предоставляет разветвленный API для комплексных запросов и формирования индекса для быстрого доступа к данным.
Рассмотрим этапы работы с IndexedDB:
- Создание базы данных IndexedDB через JavaScript:
- Создание Object Store как контейнера для хранения данных:
- Добавление и получение данных из Object Store:
- Обновление и удаление данных из объектного хранилища.
- Закрытие и открытие соединения и транзакций с Object Store.
IndexedDB поддерживается большинством современных веб-браузеров и идеально подходит для разработки PWA.
Как проверить, работает ли PWA?
Для проверки работы PWA используют инструмент Lighthouse от Google. Он измеряет эффективность различных аспектов приложения, как производительность, доступность, загрузка страниц и прочее:
- наличие и корректность работы service workers;
- кэширование статического и динамического контента и соответствие этого процесса лучшим практикам PWA;
- индексация страниц в поисковой системе;
- наличие файла манифеста и его содержимое;
- прогрессивность, а именно работа приложения на разных экранах и в автономном режиме;
- производительность, оценка загрузки страниц и одновременно поиск улучшения этого аспекта;
- доступность, обеспечение конфиденциальности и прочее.
После своего аудита Lighthouse предоставит подробный отчет с рекомендациями для улучшения работы PWA.
Обновление UI в прогрессивных веб-приложениях (PWA)
Интерфейс в приложениях PWA обычно обновляется в режиме реального времени. Пользователи автоматически получают доступ к уже новой версии при следующем открытии приложения или обновлении страницы. При этом они могут наблюдать некоторое изменение дизайна, текста, анимации, а также оптимизацию скорости загрузки и новые функции - и все это автоматически.
В разработке PWA обновление UI реализуют такими инструментами:
- Через JavaScript есть возможность обратиться к DOM-элементам, изменить их свойства и контент:
- Через AJAX запросы, такие как Fetch API или XMLHttpRequest, есть доступ к получению или отправке данных на сервер и обновлению на их основе UI.
- Через фреймворки и библиотеки используются инструменты для декларативного обновления интерфейса при изменении данных.
- WebSockets и Server-Sent Events технологии позволяют установить бесперебойное соединение с сервером для мгновенного обновления UI приложения.
- Push-уведомления через service workers оповещают пользователей об обновлении даже при неактивном PWA.
В этой статье мы углубленно рассмотрели все ключевые аспекты разработки PWA и возможности этих приложений. PWA без преувеличений меняют веб-пространство, сочетая лучшие черты веб-сайтов и нативных приложений в одном инновационном решении. И сегодня это - безупречный опыт UI/UX для пользователей, безграничные возможности для разработчиков и отличная перспектива в дальнейшем.
Читайте также другие статьи в нашем блоге
Готовы начать?
Свяжитесь с нами!
Украина, Житомир
ул. Витрука 9в
Пн – Пт 9.00 – 19.00
Poland, Warsaw, 00-842
Łucka street 15/204
Пн – Пт 9.00 – 19.00