Начало работы

Прогрессивные веб-приложения по-прежнему остаются веб-сайтами с расширенными функциями и возможностями. Они не привязаны к определенному стеку технологий, и вы можете начать с нуля с нового сайта или обновить существующий сайт без полной переработки. В этом руководстве вы научитесь создавать хорошую реализацию шаблона 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-адреса и что поисковые системы могут индексировать ваш сайт.

Работает с любым типом ввода

Пользователи должны иметь возможность беспрепятственно переключаться между типами ввода при использовании вашего приложения, а методы ввода не должны зависеть от размера экрана.

Предоставляет контекст для запросов разрешений

Запрашивайте запросы на такие разрешения, как уведомления, геолокация и учетные данные, только после предоставления контекстного обоснования, чтобы повысить вероятность того, что пользователь примет запросы.

Соблюдает лучшие практики для здорового кода

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

Ресурсы