Что такое прогрессивные веб-приложения (PWA)?

Прогрессивные веб-приложения (PWA) популярны в наши дни. Многие известные сайты используют PWA.

Давайте познакомимся с этим новым форматом поближе.

PWA - это просто лучшее веб-приложение

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

PWA - это просто лучшее веб-приложение

Существует несколько требований, которым должно соответствовать веб-приложение PWA.

Быстро стартуют. Быстро работают.

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

Являются отзывчивыми и адаптивными

Являются отзывчивыми и адаптивными

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

Без проблем справляются с прерывистым соединением

Большая часть классических веб-приложений перестает работать, как только интернет-соединение становится нестабильным.

Без проблем справляются с прерывистым соединением

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

Без проблем справляются с прерывистым соединением - 2

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

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

Заимствуют нужные функции у нативных приложений

В приложения PWA внедряются функциональные возможности, которые есть у нативных приложений. Одной из таких функций является способность обрабатывать push-уведомления.

Заимствуют нужные функции у нативных приложений

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

Заимствуют нужные функции у нативных приложений - 2

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

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

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

Технические стандарты, на которые должно полагаться PWA

Есть несколько технических решений, которые должны быть использованы в прогрессивном веб-приложении:

  • HTTPS для безопасной доставки контента.
  • Укажите манифест веб-приложения, чтобы предоставить дополнительные мета-данные. В прошлом у нас были мета-теги, которые предоставляли поисковым системам дополнительную информацию контенте. Манифест веб-приложенияпохож на мета-теги 2.0:
{
  "short_name": "KIRUPA",
  "name": "KIRUPA",
  "icons": [
    {
      "src": "/images/orange_192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/orange_512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/index.html?source=pwa",
  "background_color": "#0099fe",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#0099fe"
}

Указывая манифест, вы предоставляете дополнительную информацию о своем приложении, которую браузеры, поисковые системы и ОС смогут использовать для обеспечения более естественного взаимодействия с приложением.

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

Кроме этого service worker позволяет перехватывать все сетевые события приложения. Это позволяет написать собственный JavaScript-код, чтобы разрешить сетевой запрос, заблокировать запрос, вернуть файл из кэша, обработать push-уведомление и так далее. Если вы хотите узнать больше, прочитайте Service Workers: Введение.

Является ли PWA просто другим названием веб-приложений?

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

Основная причина, почему progressive web app вызвали настолько большой интерес, заключается в названии. Так как термин веб-приложения используется уже в течение долгого времени.

Заключение

PWA вошли в нашу жизнь надолго. Google изначально возглавил инициативу PWA. Но сегодня все, начиная с Samsung, Mozilla, Microsoft и других компаний, совместно работают  над разработкой следующего набора функций, которые сделают PWA еще лучше!