Что такое прогрессивные веб-приложения (PWA)?
Прогрессивные веб-приложения (PWA) популярны в наши дни. Многие известные сайты используют PWA.
Давайте познакомимся с этим новым форматом поближе.
PWA - это просто лучшее веб-приложение
PWA созданы с использованием HTML, CSS, JavaScript и опираются на экосистему инструментов и фреймворков. Они и выглядят как обычные веб-приложения. Они пахнут как обычные веб-приложения. Они, вероятно, даже на вкус как обычные веб-приложения.
Существует несколько требований, которым должно соответствовать веб-приложение PWA.
Быстро стартуют. Быстро работают.
Когда пользователь взаимодействует с PWA, он не сталкивается с медленным откликом и другими подобными признаками плохо работающих веб-приложений.
Являются отзывчивыми и адаптивными
Пользователи должны получать доступ к контенту на различных устройствах и размерах экрана! Хорошее PWA будет работать хорошо на всех них.
Без проблем справляются с прерывистым соединением
Большая часть классических веб-приложений перестает работать, как только интернет-соединение становится нестабильным.
Приложения PWA учитывается нестабильность интернет-соединения, поэтому пользователи не потеряют ценные данные. Для реализации этого принципа могут использоваться офлайн-сообщения.
Также можно предоставлять полностью автономную версию своего контента, в которой все кэшируется.
Многие PWA учитывают нестабильность соединения с интернетом и предоставляют набор функций, который должен помочь пользователям.
Заимствуют нужные функции у нативных приложений
В приложения PWA внедряются функциональные возможности, которые есть у нативных приложений. Одной из таких функций является способность обрабатывать push-уведомления.
Другая функция - это возможность запуска 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 - это фоновый скрипт, который запускается, даже когда браузер не работает.
Кроме этого service worker позволяет перехватывать все сетевые события приложения. Это позволяет написать собственный JavaScript-код, чтобы разрешить сетевой запрос, заблокировать запрос, вернуть файл из кэша, обработать push-уведомление и так далее. Если вы хотите узнать больше, прочитайте Service Workers: Введение.
Является ли PWA просто другим названием веб-приложений?
PWA - это просто веб-приложение, которое обеспечивает удобное взаимодействие с пользователем, использует HTTPS для безопасного обслуживания контента, предоставляет дополнительные метаданные через манифест и использует service worker для обработки действий, связанных с сетью и кэшированием. Когда мы смотрим на PWA под этим углом, они не кажутся такими уж удивительными?
Основная причина, почему progressive web app вызвали настолько большой интерес, заключается в названии. Так как термин веб-приложения используется уже в течение долгого времени.
Заключение
PWA вошли в нашу жизнь надолго. Google изначально возглавил инициативу PWA. Но сегодня все, начиная с Samsung, Mozilla, Microsoft и других компаний, совместно работают над разработкой следующего набора функций, которые сделают PWA еще лучше!