Что такое PWA: подробная инструкция с примерами кода - Изображение №1
01

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

Содержание:
Как вам статья?
Спасибо за отзыв!
5.0
Просмотров: 3917

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 (Progressive Web App) приложения - изображения


Минусы: ограничения и затруднения

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: подробная инструкция с примерами кода - Изображение №5

Если пользователь нажмет на баннер, на рабочем столе его устройства появится иконка приложения.


Страница поддержки в автономном режиме PWA

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


Так выглядит процесс создания страницы поддержки:

  • Составление HTML-страницы с соответствующей информацией, что приложение находится в автономном режиме.
  • Сохранение этой страницы в кэше в виде статического ресурса при помощи методов caches.open() и cache.addAll():

    Что такое PWA: подробная инструкция с примерами кода - Изображение №6

  • Во время события "fetch", что означает "запрос" или "получение", с помощью service worker можно проверить, доступен ли нужный ресурс в кэше. Если его там нет, и в этот момент отсутствует интернет, нужно ответить страницей поддержки для автономного режима:

    Что такое PWA: подробная инструкция с примерами кода - Изображение №7

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


Стратегии и концепции кэширования в PWA

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


Установка кэша в PWA приложении

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


Часть скрипта service workers - обработчик событий "install", обычно имеет следующий вид:


Что такое PWA: подробная инструкция с примерами кода - Изображение №8


Код для кэширования ресурсов для PWA находится в функции event.waitUntil. Благодаря ей браузер "ждет", пока завершатся определенные асинхронные операции в приложении и можно будет переходить к следующему этапу.


Удаление и обновление кэша в PWA приложении

Как только новая версия service workers была успешно установлена и активирована, наступает событие "activate". Его основная цель - подготовить приложение к работе этой версии service workers. Во время этого события выполняются следующие действия:

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

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


Что такое PWA: подробная инструкция с примерами кода - Изображение №9


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

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


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


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


Что такое PWA: подробная инструкция с примерами кода - Изображение №10


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


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


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


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

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


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

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

    Что такое PWA: подробная инструкция с примерами кода - Изображение №11

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

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


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

Динамическое кэширование в PWA, или Dynamic Caching, предусматривает кэширование ресурсов в реальном времени, на основе текущих сетевых запросов. Эта стратегия позволяет более гибко управлять кэшем, реагируя на действия пользователя или изменение контента.


Реализация динамического кэширования происходит таким путем:

  • Событие "fetch" в service worker: 

    Что такое PWA: подробная инструкция с примерами кода - Изображение №12

  • Проверка кэша. Чтобы проверить ответ в кэше во время сетевого запроса, используется метод caches.match(event.request):

    Что такое PWA: подробная инструкция с примерами кода - Изображение №13

  • Обновление кэша. В зависимости от полученного ответа, кэш для этого ресурса можно обновить:

    Что такое PWA: подробная инструкция с примерами кода - Изображение №14

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


В целом логика кэширования, выбор и сочетание стратегий зависит от требований к PWA приложению.


Концепции кэширования: Conditional Fallbacks


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


Conditional Fallbacks реализуется следующим путем:

  • Определение условий, при которых должны меняться резервные ресурсы: геолокация, тип устройства, размер экрана, наличие интернет-соединения и т.д.
  • Создание резервных ресурсов в PWA в виде разных версий страниц под разные условия и типы устройств.
  • Опциональный код в обработчике событий "fetch" гибко подберет нужный резервный ресурс под текущие условия:

    Что такое PWA: подробная инструкция с примерами кода - Изображение №15

Сами резервные ресурсы, которые определены в обработчике "fetch", при необходимости кэшируются в обработчике "install" или других местах кода.


Благодаря Conditional Fallbacks содержимое PWA гибкое и адаптируется к условиям и потребностям пользователя, что и обеспечивает безупречный опыт взаимодействия с ним.


Ограничение размера кэша в прогрессивных приложениях (PWA)


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

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

Так может выглядеть сам процесс удаления кэша:


Что такое PWA: подробная инструкция с примерами кода - Изображение №16


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


Работа с локальной базой: IndexedDB и LocalStorage

Для правильного сохранения данных на устройстве пользователя во время работы PWA приложения офлайн используются локальные хранилища LocalStorage и IndexedDB. Это базы данных внутри самого браузера, которые позволяют хранить структурированные данные и иметь к ним доступ.


LocalStorage отлично подходит для хранения небольших объемов данных в виде строка-строка, или ключ-значение. Эта база данных имеет ограничения на объем данных и быстрый, но простой API, помогающий хранить, получать и удалять информацию по ключу. Но если объем данных планируется больше 10 мб, нужны более мощные механизмы, и в таком случае дополнительно задействуют IndexedDB.


IndexedDB работает с более сложными данными и предоставляет разветвленный API для комплексных запросов и формирования индекса для быстрого доступа к данным.


Рассмотрим этапы работы с IndexedDB:

  • Создание базы данных IndexedDB через JavaScript:

    Что такое PWA: подробная инструкция с примерами кода - Изображение №17

  • Создание Object Store как контейнера для хранения данных:

    Что такое PWA: подробная инструкция с примерами кода - Изображение №18

  • Добавление и получение данных из Object Store:

    Что такое PWA: подробная инструкция с примерами кода - Изображение №19

  • Обновление и удаление данных из объектного хранилища.
  • Закрытие и открытие соединения и транзакций с Object Store.

IndexedDB поддерживается большинством современных веб-браузеров и идеально подходит для разработки PWA.


Как проверить, работает ли PWA?

Для проверки работы PWA используют инструмент Lighthouse от Google. Он измеряет эффективность различных аспектов приложения, как производительность, доступность, загрузка страниц и прочее:

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

После своего аудита Lighthouse предоставит подробный отчет с рекомендациями для улучшения работы PWA.


Обновление UI в прогрессивных веб-приложениях (PWA)

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


В разработке PWA обновление UI реализуют такими инструментами:

  • Через JavaScript есть возможность обратиться к DOM-элементам, изменить их свойства и контент:

    Что такое PWA: подробная инструкция с примерами кода - Изображение №20

  • Через AJAX запросы, такие как Fetch API или XMLHttpRequest, есть доступ к получению или отправке данных на сервер и обновлению на их основе UI.
  • Через фреймворки и библиотеки используются инструменты для декларативного обновления интерфейса при изменении данных.
  • WebSockets и Server-Sent Events технологии позволяют установить бесперебойное соединение с сервером для мгновенного обновления UI приложения.
  • Push-уведомления через service workers оповещают пользователей об обновлении даже при неактивном PWA.

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

Следующая статья Что такое Single Page Application?
Предыдущая статья Зачем нужна CRM-система: понятие, преимущества, разновидности
Давайте обсудим ваш проект
Нажимая кнопку "Отправить", вы соглашаетесь с обработкой персональных данных.Подробнее
Блог
#0000

Читайте также другие статьи в нашем блоге

Yii или Laravel: что лучше для вашего проекта?
02 Янв, 2024
Благодаря технологическому развитию, писать на PHP код с нуля теперь не обязательно: существует множество фреймворков. готовых моделей, «шаблонов» для программных платформ, среди которых самыми популярными стали Yii2 и Laravel. В чем их и какой из фреймворков для создания продукта выбрать? Рассказываем и сравниваем структуры в этом материале.
ПРОСМОТРЕТЬ СТАТЬЮ
Что такое PWA: подробная инструкция с примерами кода - Изображение №21
Зачем нужна CRM-система: понятие, преимущества, разновидности
22 Фев, 2024
CRM — это программное обеспечение для автоматизации и управления взаимодействия с клиентами. В нем хранятся данные о заказах, клиентах, их предпочтениях и взаимодействии с брендом. CRM помогает увеличить прибыль и удовлетворить потребности клиента.
ПРОСМОТРЕТЬ СТАТЬЮ
Что такое PWA: подробная инструкция с примерами кода - Изображение №22
Что такое Single Page Application?
06 Мар, 2024
За последнее десятилетие появилось огромное количество веб-приложений на любой вкус. Все их объединяет фокус на легком взаимодействии с пользователем: быстрая загрузка, интуитивный интерфейс и бесшовность взаимодействия.
ПРОСМОТРЕТЬ СТАТЬЮ
Кроссбраузерная верстка — что это значит?
25 Июл, 2023
Кроссбраузерная верстка — это методика создания веб-страниц, которая обеспечивает корректное и одинаковое отображение сайта на различных браузерах и их версиях.
ПРОСМОТРЕТЬ СТАТЬЮ
 
Контакты
#0000

Готовы начать?
Свяжитесь с нами!

Телефон:
+ 38 (096) 880 99 00
Адрес:

Украина, Житомир
ул. Витрука 9в

График:

Пн – Пт 9.00 – 19.00

Телефон:
+48 570 337 815
Адрес:

Poland, Warsaw, 00-842
Łucka street 15/204

График:

Пн – Пт 9.00 – 19.00

 
 
Свяжитесь с нами
#0000

Остались вопросы?

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