Первые шаги
Прогрессивные веб-приложения по-прежнему остаются веб-сайтами с расширенными функциями и возможностями. Они не привязаны к определенному стеку технологий, и вы можете начать с нуля с нового сайта или обновить существующий сайт без полной переработки. В этом руководстве вы научитесь создавать хорошую реализацию шаблона PWA. Вот несколько стратегий, с которых можно начать:
Сделайте его доступным для установки
Начните с малого! Этот подход включает в себя создание базового файла манифеста, простой автономной страницы и сервисного работника для обслуживания автономной страницы и кэширования некоторых важных CSS и JavaScript. Благодаря критически важному кэшированию CSS и JavaScript вы подготовите существующее веб-приложение к работе в автономном режиме, одновременно повысив его производительность.
Сосредоточьтесь на функции
Выберите одну новую функцию, например push-уведомления или обработку файлов, которая существенно повлияет на ваших пользователей или ваш бизнес. Это позволит вам окунуться в пул PWA, не внося слишком много изменений одновременно.
Создайте простую версию
Возьмите существующий раздел вашего приложения или конкретный путь пользователя, например воспроизведение видео или доступ к посадочному талону, и заставьте его работать как PWA, работающий в автономном режиме, либо автономно, либо в контексте. Это позволяет провести эксперимент с низкими ставками, позволяющий переосмыслить опыт работы ваших пользователей с PWA.
Начните с нуля
Если вы проводите редизайн своего веб-сайта или можете начать с нуля, эта стратегия имеет большой смысл. Он позволяет вам легче создавать шаблоны проектирования PWA, чем другие стратегии, в частности, позволяя вам с самого начала воспользоваться всей мощью сервисных работников.
Обновление приложения магазина
Благодаря возможности публиковать PWA в магазинах приложений, вы можете поместить PWA в средство запуска PWA и загрузить его в такие магазины, как Google Play Store или Windows Store. Если у вас есть приложение для конкретной платформы, вы можете заменить его своим PWA, опубликованным в магазине.
При таком подходе ваши существующие пользователи получают обновление до PWA, а новые пользователи по-прежнему могут использовать или устанавливать ваше PWA из браузера или магазинов приложений. И у вас будет одно приложение для всех, что сэкономит затраты, время и улучшит взаимодействие с пользователем.
Контрольный список PWA
Прогрессивное веб-приложение — это веб-сайт, поэтому возникает вопрос: когда оно станет прогрессивным веб-приложением? Ответ не так прост, поскольку концепция PWA не относится к конкретной технологии или стеку, PWA представляет собой шаблон, включающий различные технические компоненты.
Хотя для всех браузеров не существует уникальных правил, существует набор рекомендаций, называемый Контрольным списком прогрессивных веб-приложений , которые помогут вам создать PWA, которое понравится пользователям.
Основные требования
Поскольку PWA охватывают все устройства, от мобильных до настольных компьютеров, основной контрольный список прогрессивных веб-приложений описывает то, что вам нужно сделать, чтобы сделать ваше приложение доступным для установки и надежным для всех пользователей, независимо от размера экрана или типа ввода.
Основные требования:
Начинается быстро, остается быстрым
Производительность играет важную роль в успехе любого онлайн-опыта, поскольку высокоэффективные сайты привлекают и удерживают пользователей лучше, чем неэффективные. Сайты должны сосредоточиться на оптимизации показателей производительности, ориентированных на пользователя.
Работает в любом браузере
Прогрессивные веб-приложения — это прежде всего веб-приложения, а это означает, что они должны работать во всех браузерах, а не только в одном из них. Однако этот опыт не обязательно должен быть одинаковым во всех браузерах. Могут быть функции, которые не поддерживаются одним браузером, и есть запасной вариант, обеспечивающий удобство работы.
Адаптивность к любому размеру экрана
Пользователи могут использовать PWA на экране любого размера, и весь контент доступен при любом размере области просмотра.
Предоставляет пользовательскую автономную страницу.
Когда пользователи находятся в автономном режиме, сохранение их в PWA обеспечивает более плавный и естественный опыт, чем возврат к автономной странице браузера по умолчанию.
Можно установить
Пользователи, которые устанавливают или добавляют приложения на свои домашние экраны, как правило, больше взаимодействуют с этими приложениями, и когда PWA установлено, оно может использовать больше возможностей для лучшего взаимодействия с пользователем.
Оптимальные характеристики PWA
Чтобы создать действительно великолепное прогрессивное веб-приложение, которое будет выглядеть как лучшее в своем классе, вам нужно нечто большее, чем просто основной контрольный список. Оптимальный контрольный список прогрессивных веб-приложений направлен на то, чтобы ваше PWA выглядело функциональным и надежным, используя при этом преимущества, которые делают Интернет мощным.
Обеспечивает офлайн-опыт
Разрешив пользователям использовать ваше PWA в автономном режиме, вы создадите для них аутентичный опыт работы с приложением. Сделайте это, определив те функции, которые не требуют подключения, чтобы пользователи могли получить доступ хотя бы к некоторым функциям.
Полностью доступен
Убедитесь, что все содержимое и взаимодействие приложения понятны программам чтения с экрана, можно использовать только с клавиатуры, указан фокус и сильный цветовой контраст. Сделав PWA доступным, вы гарантируете, что им сможет пользоваться каждый.
Использует мощные возможности там, где они доступны.
От push-сообщений, WASM и WebGL до доступа к файловой системе, средств выбора контактов и интеграции с магазинами приложений. Здесь представлены инструменты для создания высокопроизводительных, глубоко интегрированных PWA, позволяющие вам создать полнофункциональный пользовательский интерфейс, ранее предназначенный для платформенных приложений, который ваши пользователи смогут брать с собой куда угодно.
Можно обнаружить через поиск
Более половины всего трафика на сайт приходится на органический поиск. Чтобы пользователи могли найти ваш PWA, крайне важно убедиться, что для контента существуют канонические URL-адреса и что поисковые системы могут индексировать ваш сайт.
Работает с любым типом ввода
Пользователи должны иметь возможность беспрепятственно переключаться между типами ввода при использовании вашего приложения, а методы ввода не должны зависеть от размера экрана.
Предоставляет контекст для запросов разрешений
Запрашивайте запросы на такие разрешения, как уведомления, геолокация и учетные данные, только после предоставления контекстного обоснования, чтобы повысить вероятность того, что пользователь примет запросы.
Соблюдает лучшие практики для здорового кода
Поддержание актуальности вашего приложения и исправности вашей кодовой базы упрощает предоставление новых функций, которые соответствуют другим целям, изложенным в этом контрольном списке.