Введение в PWA¶
Добро пожаловать на Неделю 1 День 1 проекта #30DaysOfPWA! Хотите узнать больше об этом проекте? Ознакомьтесь с нашим постом Вступление, чтобы получить более подробную информацию о дорожной карте и участниках проекта. А теперь давайте погрузимся в работу!
Что вы узнаете сегодня
- Что такое прогрессивное веб-приложение (PWA)?
- Чем оно отличается от существующих веб-приложений и приложений для конкретных платформ?
- Каковы преимущества PWA для реальных развертываний?
- Что характеризует хороший PWA?
Что такое прогрессивное веб-приложение (PWA)?¶
Прогрессивное веб-приложение Progressive Web App (PWA) — это традиционное веб-приложение, которое прогрессивно совершенствуется с помощью открытых веб-технологий, чтобы обеспечить лучшую возможную работу на каждом устройстве, исходя из имеющихся возможностей.
Это означает, что пользователи современных браузеров и новых устройств получают улучшенные возможности, которые конкурируют с приложениями для конкретной платформы (установленными на ней), а пользователи старых браузеров и устройств продолжают получать пригодные возможности в виде привычных веб-сайтов.
Это позволяет прогрессивным веб-приложениям сочетать охват (широкую доступность и доступ) веб-сайтов с возможностями (аппаратными возможностями и богатыми ресурсами) приложений для конкретной платформы.
Как это происходит? Давайте поговорим о прогрессивных улучшениях!
Что такое прогрессивное улучшение?¶
Progressive Enhancement — это философия дизайна, которая делает упор на контентноориентированный опыт, где разработчики
- обеспечивают наличие базового взаимодействия, чтобы пользователи могли использовать основной контент с любого устройства, даже с устаревшими браузерами.
- обнаруживают существование новых возможностей (например, в современных браузерах, на новых устройствах) и улучшают взаимодействие на этих устройствах для их использования.
Чтобы лучше понять это, посмотрите на рисунок ниже.
Сегодня, когда пользователи думают о приложениях, они имеют в виду либо приложения, устанавливаемые на платформу (синий цвет), либо браузерные "веб-приложения" (желтый цвет) — когда браузер сам устанавливается как платформоспецифичное приложение на платформы устройств.
- Платформоспецифичные приложения работают только на своей платформе устройства. Вам нужна своя кодовая база для каждой платформы и, возможно, специализированная команда разработчиков (знакомых с инструментами, языками) — но вы получаете доступ ко всем возможностям платформы.
- Web-приложения работают везде с единой кодовой базой. Они могут работать во всех браузерах и на всех устройствах, на которых работают браузеры, используя единую кодовую базу. Однако это ограничивает их возможности использования специфических возможностей платформы, которые могут поддерживаться не везде.
Прогрессивные веб-приложения используют преимущества открытых веб-технологий — таких как сервис-воркеры, HTTPS, Web App Manifest, Push Notifications и другие веб-интерфейсы и возможности — для определения и адаптации опыта в соответствии с возможностями платформы.
- На старых устройствах и браузерах, где ничего нового не обнаружено, обеспечивается базовая работа сайта.
- На более новых устройствах — определение форм-факторов устройств и предоставление отзывчивого опыта, который соответствует поведению, характерному для конкретной платформы.
- На современных браузерах он может обнаружить поддержку сервис-воркеров и Web App Manifest и использовать их для разблокировки и поддержки таких функций, как инсталлируемость и оффлайн-работа — как и в приложениях для конкретной платформы.
По мере развития платформ и смещения их вправо (в плане поддержки возможностей) разработка PWA станет ключевым фактором для обеспечения масштабируемого опыта на широком спектре устройств.
Чем PWA отличаются от веб-приложений и приложений для конкретных платформ?¶
Прогрессивные веб-приложения позволяют получить лучшее из двух миров, предлагая надежный базовый опыт, который улучшается в зависимости от растущей поддержки этих открытых веб-технологий каждым браузером и ОС. Вот несколько преимуществ:
- Они имеют охват веб-сайтов. Они могут индексироваться поисковыми системами, обнаруживаться или передаваться по URL, использоваться с любого устройства, имеющего браузер.
- Они могут вести себя как приложения для конкретной платформы. Они могут работать в автономном режиме, устанавливаться на устройство, работать с push-уведомлениями и получать доступ к разным аппаратным средствам устройства.
- Они могут использовать широкие возможности платформы. Например, в Windows PWA можно добавлять в меню "Пуск", размещать на панели задач, предоставлять Share Targets для других приложений и публиковать в Microsoft Store вместе с другими приложениями Windows.
- Они позволяют снизить затраты. PWA разрабатываются для всех платформ на основе одной кодовой базы — это не только снижает затраты на сопровождение, но и требует участия одной команды разработчиков, а не нескольких команд, специализирующихся на разных платформах, для обеспечения одинаковых возможностей.
Что характеризует "хороший" PWA?¶
Давайте рассмотрим пример PWA, чтобы иметь его в виду во время обсуждения на этой неделе. Выберите один из этих образцов PWA — они содержат живые демо-версии и исходный код. Я буду использовать для исследования PWA DevTools Tips. (См.: Исходные коды)
Что делает это хорошим опытом PWA? Поскольку PWA базируется на философии дизайна, не существует предписывающих правил — только желательные характеристики, которые делают впечатления выгодно отличающимися от существующих приложений для конкретных платформ и веб-приложений:
| Характеристика | Почему это желательно? |
|---|---|
| Возможность обнаружения | Я могу найти PWA в магазинах приложений или через веб-поиск. |
| Возможность установки | Я могу добавить PWA на главный экран своего устройства и запускать их, как любое приложение для конкретной платформы. |
| Re-Engageability | Я могу получать push-уведомления (даже если PWA активно не используется) — как и любое другое приложение для конкретной платформы. |
| Независимость от сети | Я могу пользоваться PWA, как и любым приложением для конкретной платформы. |
| Прогрессивное совершенствование | Мой опыт PWA масштабируется вверх (как у приложений для конкретной платформы) или вниз (как у веб-сайта) в зависимости от возможностей устройства. |
| Безопасность | Мой PWA использует безопасные сетевые соединения с гарантиями конфиденциальности. |
| Отзывчивость | Мой PWA адаптируется к размеру экрана устройства, его ориентации и способу ввода. |
| Возможность размещения ссылок | Я могу ссылаться на URL PWA, делиться им, добавлять в закладки и посещать его, как и любой другой веб-сайт. |
Попробуйте использовать образец PWA для изучения его характеристик.
- Можете ли вы найти его в результатах веб-поиска?
- Можно ли найти его в магазине приложений (попробуйте: webboard).
- Можно ли получить доступ к нему в автономном режиме (попробуйте: режим полета)?
- Обслуживается ли он по протоколу HTTPS?
- Адаптируется ли он к размеру экрана (мобильный или настольный)?
Как мы можем разработать PWA, которые будут лучше отвечать этим требованиям? Смотрите соответствующие посты в Week 4: Platforms And Practices. А пока давайте завершим эту дискуссию рассмотрением реальных примеров внедрения PWA.
Что способствует внедрению PWA в реальном мире?¶
Используются ли PWA в реальном мире сегодня? Что побуждает разработчиков приложений внедрять PWA в производство — и каковы при этом проблемы и преимущества?
Давайте рассмотрим некоторые истории успеха для PWA:
 |  |  |
|---|---|---|
| 2020 — Lyft | 2018 — Starbucks | 2017 — Trivago |
| PWA получает на 40% больше кликов на "Установить PWA" по сравнению с опцией "Скачать приложение". | При запуске PWA было в 2 раза больше ежедневных активных пользователей. Количество заказов на настольных и мобильных компьютерах было сопоставимо. | После установки PWA было получено на 150% больше вовлеченности, а количество выходов на связь увеличилось на 97%. |
| Изображение предоставлено: Lyft на AppScope | Изображение предоставлено: Starbucks Case Study | Изображение предоставлено: Windows Latest |
Выше приведены метрики с сайта PWAStats.com — изучите сайт, чтобы увидеть больше подобных примеров и метрик. В целом развертывание PWA можно оценить по таким показателям, как снижение затрат, повышение эффективности и рост числа пользователей:
- App Installs — больше ли пользователей установили PWA (по сравнению с загрузкой приложения для конкретной платформы)
- Доход от приложения — увеличилось ли количество конверсий или доход от рекламы при использовании PWA?
- Приобретение пользователей — привело ли использование PWA к появлению новых пользователей (росту) для приложения?
- Удержание пользователей — увеличилось ли количество ежемесячных активных пользователей приложения с помощью PWA?
- Производительность приложения — уменьшился ли размер приложения, время загрузки страниц и т.д. с помощью PWA?
Основными проблемами остаются кроссбраузерная совместимость (для обеспечения единообразия восприятия) и сложность переноса на PWA крупномасштабных приложений из существующих кодовых баз, ориентированных на веб-приложения или конкретные платформы. Для решения этих проблем мы рассмотрим инструменты и лучшие практики разработчиков в следующих неделях.
В следующем посте мы рассмотрим структуру прогрессивных веб-приложений (PWA), чтобы понять основные технологии, на которых базируется наша реализация, а также рассмотрим ключевые инструменты разработчика, которые помогут нам в этом.
Упражнение: Установка первого PWA¶
Готовы приступить к выполнению первого упражнения? Попробуйте сделать следующее:
- Выберите образец PWA и изучите его демонстрацию в реальном времени.
- Попробуйте установить его на настольном компьютере и на мобильном. Чем отличаются впечатления? В чем сходство?
В нашей следующей заметке мы рассмотрим составные части PWA — и на примере этого образца PWA увидим, как они используются на практике.
Источник — 1.1: Introducing PWA