Что такое PWA: подробная инструкция с примерами кода

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, стоит посмотреть на их жизненный цикл:

1. Регистрация. Все начинается с регистрации service worker на странице приложения с помощью метода navigator.serviceWorker.register(). В это время service worker работает в фоновом режиме.
2. Установка. Service worker устанавливаются в браузере и в этот момент загружаются и кэшируются нужные для действия PWA ресурсы.
3. Активация. Если установка прошла успешно, происходит активация service workers. В ходе этого процесса можно очистить устаревшие кэшированные ресурсы.
4. Управление запросами. Активированные service worker в PWA перехватывают сетевые запросы и обрабатывают их.
5. Обновления. Service worker сами себя умеют обновлять. Для этого достаточно изменить исходный код или зарегистрировать и активировать новую версию service worker.
6. Завершение работы. Ради экономии ресурсов браузера, service worker можно выключать или замораживать, если они неактуальны. Это происходит и когда само приложение закрывается, и когда браузер оптимизирует работу и останавливает некоторые из скриптов ради быстродействия.

Service workers - ключевой механизм в разработке PWA, который управляет программным кэшированием. Ожидается, что в скором будущем скрипты service workers будут способны к еще большему и расширят горизонты возможностей прогрессивных веб-приложений.

Установка PWA на свое устройство

О том, что Progressive Web Apps можно установить на свой гаджет, пользователь узнает из установочного баннера PWA. Он имеет вид всплывающего сообщения, специального элемента-кнопки на сайте или виджета с предложением "Добавить на главный экран" или "Установить". Установленная иконка позволит пользователям быстро запускать приложение, а также не забывать о нем.

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

Рассмотрим общие шаги для создания установочного баннера:

1. Добавьте метатег к HTML-странице, который укажет, что это PWA.
2. Настройте установочный баннер в манифесте JSON, указав название, иконку приложения или favicon.
3. Вставьте 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. Во время этого события выполняются следующие действия:

1. Поддержание чистоты кэша. Очистка устаревших кэшированных ресурсов из service workers и освобождение места.
2. Установка нового кэша. Размещение нового кэша на свободном месте для хранения новых ресурсов или обновления существующего.
3. Другие полезные действия для активации обновленной версии service workers в PWA.

Вот пример кода для обработки события "activate":

Контроль над кэшированием и сетевыми операциями в PWA

Следующее событие в service workers называется "fetch". Его цель - перехватить сетевой запрос при загрузке страницы и ответить на него самостоятельно, контролируя при этом кэширование и сетевые операции.

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

Сам код обработки этого события обычно выглядит так:

Событие "fetch" в service worker позволяет реализовать различные концепции и стратегии кэширования, и порой их даже сочетают.

Стратегии кэширования: предварительная и динамическая

Чаще всего обеспечение бесперебойной работы PWA в оффлайне осуществляется через предварительное и динамическое кэширование.

Предварительное кэширование

Предварительное кэширование ресурсов в PWA приложении, или Pre-Caching Assets, предусматривает хранение всех статических ресурсов еще во время установки или активации service workers.

Дальнейшие шаги просты:

1. Определение списка необходимых ресурсов для предварительного кэширования: JavaScript, CSS, шрифтов и HTML-страницы. Например:
   
   

   

2. Создание кэша, в который сохраненные ресурсы добавляют с помощью метода caches.open().
3. Обеспечение доступа к кэшу, чтобы service workers могли использовать эти данные во время события "fetch".
4. Обновление кэша при активированном 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 для пользователей, безграничные возможности для разработчиков и отличная перспектива в дальнейшем.