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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что такое прогрессивные веб-приложения (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 еще лучше!

Источник

Просмотров:

Добавить комментарий