Устанавливаемость для PWA¶
Добро пожаловать на четвертую неделю, первый день серии 30 Days of PWA! Теперь, когда мы увидели, как начать строить PWA и какие базовые и расширенные возможности они предоставляют, пришло время разобраться в том, как на самом деле выглядит хороший PWA и как мы можем превратить наши PWA в качественные приложения. Четвертая неделя посвящена лучшим практикам и технологиям, которые можно использовать для улучшения качества PWA.
Краткое примечание¶
Эта статья посвящена лучшим практикам установки и тому, когда добавление установки имеет смысл для веб-приложения. Если вы ищете основы того, как добавить установку в PWA, ознакомьтесь со статьей Core Concepts article on Installation из первой недели.
Вы не устанавливаете веб-сайты, вы устанавливаете приложения¶
Одним из наиболее важных моментов в установке PWA является понимание того, что PWA — это приложения в первую очередь, а веб-сайты — во вторую. Когда пользователь устанавливает приложение на устройство, он ожидает от него определенных стандартов использования и дизайна, которые он привык видеть на любой платформе. PWA — это не просто устанавливаемые веб-сайты, это функциональные и интегрированные приложения, которые соответствуют ожиданиям платформы.
Ну и что? Приложения, веб-сайты, какая разница?¶
Восприятие PWA как приложения, а не как веб-сайта, устанавливает иные стандарты разработки продукта. Кроме того, это заставляет разработчика задуматься о том, имеет ли его продукт смысл в качестве PWA. Приложение, которое будет устанавливаться, должно иметь смысл в контексте платформы, и если это не так, то, возможно, его лучше использовать в качестве веб-сайта.
Вот несколько вопросов, которые можно задать при планировании разработки PWA:
- Что получит пользователь от установки этого приложения?
- Имеет ли мое приложение потенциал для интеграции с операционной системой?
- Есть ли у моего приложения мотивация к регулярному использованию и повторному вовлечению?
- Как мое приложение будет вести себя в автономных условиях?
- Соответствует ли внешний вид и функциональность моего приложения сопоставимому опыту, характерному для конкретной платформы?
Возможно, не обязательно применять все эти вопросы к своему приложению, но это отличная отправная точка для размышлений о том, какие типы приложений вообще следует устанавливать в качестве PWA.
Представьте, что ваше приложение установлено и находится на главном экране или панели задач. Имеет ли оно там смысл?
Тогда покажите нам хороший PWA¶
Существует множество отличных PWA, но Twitter — это отличный пример известной платформы, которая создала действительно качественный PWA для своих пользователей. PWA Twitter использует многие из доступных веб-возможностей для создания интегрированного приложения.
Некоторые моменты, которые мне нравятся в PWA Twitter:
Плавный, похожий на приложение пользовательский опыт
PWA Twitter не демонстрирует многих особенностей поведения, присущих типичным веб-сайтам:
- Он использует
standalone
режим отображения для представления окна в виде приложения. - Окно никогда не обновляется, пользовательская оболочка всегда видна, а при взаимодействии с пользователем изменяется только область основного содержимого.
- Задержка при навигации очень мала. Загрузка найденного содержимого (например, самих твитов) может занять секунду, но сама интерактивность пользовательского интерфейса происходит практически мгновенно.
Более подробно о лучших практиках для PWA UI/UX мы узнаем в День 7 недели платформ и практик.
Согласованное поведение в автономном режиме
Несмотря на то, что Twitter в значительной степени зависит от подключения, при потере связи он сохраняет максимум взаимодействия с приложением (как и любое приложение, ориентированное на конкретную платформу).
При потере соединения приложение продолжает загружать свой вид, а пользовательский интерфейс остается доступным для навигации. Если есть твиты, сохраненные локально, они будут отображены. В противном случае пользователь получит уведомление, которое не будет мешать остальной части пользовательского интерфейса:
Мы уже немного узнали о поведении в автономном режиме в Day 5 недели 1, и еще больше мы узнаем в reliability article в конце этой недели.
Интеграция с ОС и множество веб-возможностей
Twitter также отлично использует имеющиеся веб-возможности для интеграции с вашим устройством. Вот лишь некоторые из них:
- Push-уведомления
- Совместный доступ из Twitter
- Передача данных в Twitter
- Бейджинг
- Ярлыки
О том, как использовать все эти и другие возможности, мы уже рассказывали в Неделя 2: Расширенные возможности. Ознакомьтесь с ними!
Опубликовано в Microsoft Store
Twitter использует одно из лучших преимуществ PWA: возможность обнаружения и установки в Интернете и в магазинах приложений.
Тот же PWA, который можно установить из браузера, может распространяться в магазинах приложений. Подробнее об упаковке для магазинов вы можете узнать из нашей статьи о PWABuilder, а более подробная информация о лучших практиках распространения в различных магазинах приложений появится позднее на этой неделе.
Резюме¶
В конце концов, лучшие практики по установке PWA — это лучшие практики для PWA в целом. Когда вы предлагаете пользователю установить ваше приложение на его машину, это приложение должно соответствовать ожиданиям, предъявляемым к приложениям на данной платформе. К счастью, мы собираемся провести всю неделю, развивая то, что уже узнали о PWA, и рассматривая некоторые лучшие практики создания надежных PWA. Если вы хотите начать с нуля, посмотрите PWA Starter — это шаблон PWA, созданный с учетом лучших практик.
Упражнение¶
Подумайте о некоторых из ваших любимых веб-приложений, которые вы используете или создали сами.
Может ли что-нибудь из них стать хорошим PWA? А может быть, и нет?
Что можно было бы получить, воспользовавшись некоторыми возможностями, которые предоставляют PWA?