Поделиться через

Рекомендации по PWA

  • Статья

В этой статье перечислены рекомендации по созданию приложения PWA для пользователей. Когда пользователи устанавливают приложения, у них есть определенные ожидания относительно того, что эти приложения могут делать, например работать в автономном режиме, глубоко интегрироваться в операционную систему или выполнять нетривиальные вычислительные задачи.

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

На этой странице предполагается, что у вас уже есть PWA. Дополнительные сведения о создании простого PWA сначала см. в статье Начало работы с прогрессивными веб-приложениями.

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

Приложение уже можно установить с помощью кнопки Доступно приложение в адресной строке браузера, если вы выполните действия, описанные в разделе Начало работы с прогрессивными веб-приложениями.

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

Чтобы создать пользовательский интерфейс установки, используйте beforeinstallprompt событие и укажите собственную кнопку установки в приложении.

Чтобы просмотреть пример кода события, проверьте исходный beforeinstallpromptкод демонстрационного приложения PWAmp. Чтобы протестировать настраиваемую установку, откройте PWAmp, а затем щелкните Дополнительные средства (...) >Сведения об>установке приложения в приложении.

Отправка в магазины приложений

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

Вы можете опубликовать PWA в Microsoft Store для Windows, App Store для iOS или Play Store для Android с помощью Построителя PWA.

Сведения об использовании Построителя PWA и публикации в Microsoft Store см. в статье Публикация прогрессивного веб-приложения в Microsoft Store.

Значок создания отличного приложения

Многие пользователи находят приложения на своих устройствах по значкам. Чтобы облегчить пользователям поиск приложения, выберите узнаваемый значок, убедитесь, что оно выделяется и адаптируется к устройствам, на которые установлено приложение.

В Windows значок приложения отображается во многих местах, таких как панель задач, меню "Пуск" или переключатель задач ALT+TAB . Укажите несколько размеров изображений, чтобы значок приложения был легко распознан в этих местах.

Сведения о том, какой размер изображения требуется в Windows, см. в статье Размеры изображений значков в разделе Определение значков и цвета темы.

Использование окна автономного приложения

Собственные приложения имеют собственные выделенные окна. PWA могут определять, как они отображаются в операционной системе узла.

Чтобы отобразить PWA в автономном окне без пользовательского интерфейса навигации в браузере, используйте элемент отображения в файле манифеста веб-приложения и задайте для него значение standalone.

Если в вашем приложении есть несколько HTML-страниц, убедитесь, что пользователи могут переходить между страницами с помощью кнопок или ссылок в приложении. minimal-ui Используйте значение элемента манифестаdisplay, чтобы пользователи переходили между страницами с помощью кнопок предыдущего и следующего, отображаемых браузером в строке заголовка приложения.

Чтобы создать более иммерсивный интерфейс, похожий на собственный, классические PWA также могут скрыть строку заголовка операционной системы по умолчанию и отобразить собственное содержимое. Отображение содержимого, в котором обычно находится строка заголовка, может помочь PWA больше чувствовать себя как собственные приложения. Многие классические приложения, такие как Visual Studio Code, Microsoft Teams и Microsoft Edge, уже делают это.

Сведения о замене строки заголовка см. в статье Отображение содержимого в области заголовка с помощью наложения оконных элементов управления.

Интеграция в операционную систему

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

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

Ярлыки

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

См . раздел Определение ярлыков приложений.

Совместный доступ к приложениям

PWA могут предоставлять доступ к содержимому другим приложениям и получать содержимое из других приложений через диалоговое окно предоставления общего доступа операционной системы.

См. раздел Общий доступ к содержимому с другими приложениями.

Значки значков

PWA могут отображать индикаторы состояния на значках приложений, чтобы оповещать пользователей о наличии нового содержимого в приложении.

См. раздел Отображение значка приложения в статье Повторное вовлечение пользователей с помощью значков, уведомлений и push-сообщений.

Обработка файлов

Вы можете зарегистрировать PWA в обработчике файлов определенных типов.

Используйте функцию обработчика файлов PWA, чтобы автоматически запускать приложение при открытии определенного файла пользователем в операционной системе.

См . раздел Обработка файлов в прогрессивных веб-приложениях.

Регистрация приложения — это обработчик ссылок или протоколов, который автоматически запускает приложение при использовании определенных ссылок в других приложениях.

См . статью Обработка ссылок на прогрессивное веб-приложение и обработка протоколов в прогрессивных веб-приложениях.

Виджеты

Экспериментальная функция

Создайте собственные мини-приложения для отображения на панели мониторинга мини-приложений операционной системы, например на панели мини-приложений Windows 11.

См . раздел Создание мини-приложений на основе PWA.

Поддержка автономных сценариев

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

Чтобы улучшить хранение, добавьте рабочую роль службы в PWA. Вы можете использовать API и API рабочей роли FetchCache службы, а также доступ к локальному хранилищу данных, чтобы обеспечить хороший автономный интерфейс для пользователей.

Вы можете обеспечить хороший автономный режим в нескольких шагах:

  1. Кэшируйте все статические ресурсы, необходимые приложению для запуска, отображения содержимого и разрешения пользователям выполнять наиболее распространенные задачи.
  2. Перенаправление на пользовательскую автономную страницу для страниц, которые невозможно кэшировать.
  3. Корректно обрабатывайте задачи приложения, которые не могут использоваться без доступа к Интернету.
  4. Реализуйте расширенные сценарии, например разрешить пользователям загружать данные для просмотра в автономном режиме.

Дополнительные сведения см. в статье Использование рабочей роли службы для управления сетевыми запросами.

Локальное хранение данных

Чтобы обеспечить широкий и быстрый интерфейс для пользователей, используйте различные варианты постоянного хранилища данных, доступные для PWA, например:

  • Кэш хранилища для хранения статических ресурсов для приложения.
  • Локальное хранилище и хранилище сеансов для хранения небольших объемов данных пользователей.
  • IndexedDB— для хранения больших, структурированных данных пользователей.
  • API доступа к файловой системе для хранения файлов на диске.

Дополнительные сведения см. в статье Хранение данных на устройстве.

Использование расширенных возможностей

Установленные приложения обычно выполняют сложные вычислительные сценарии, которые веб-сайты обычно не поддерживают.

Чтобы обеспечить интерфейс, подобный приложению, используйте расширенные веб-возможности, такие как:

Убедитесь, что наиболее важные задачи приложения можно выполнять во всех браузерах и устройствах. См . раздел Тестирование в нескольких браузерах и устройствах.

Сделайте свое приложение выглядеть и чувствовать себя как реальное приложение

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

Чтобы пользователи легко и знакомым образом выполнять наиболее важные задачи приложения, сделайте следующие варианты:

  • Не используйте большую область заголовков, как веб-сайты для перехода на другие страницы. Вместо этого используйте метафору меню.
  • Не используйте большую область нижнего колонтитула, как веб-сайты делают для получения дополнительных ссылок и информации.
  • Используйте шрифт, system-ui чтобы ваше содержимое было более нативным и быстрее загружалось.
  • Используйте меньше ссылок и предпочитайте более крупные цели попадания.
  • Поддержка светлых и темных тем операционной системы с помощью функции css-мультимедиа prefers-color-scheme .
  • background-color Укажите и theme-color в манифесте веб-приложения, чтобы настроить окно приложения.
  • Сосредоточьтесь на самых важных задачах, обеззагромождите содержимое и упростите пользовательский интерфейс.
  • Переупорядочение пользовательского интерфейса на основе форм-фактора устройства с помощью сетки CSS, Flexbox, запросов мультимедиа и адаптивных изображений.
  • Повышение производительности путем немедленной регистрации взаимодействия с пользователем.
  • Рассмотрите возможность использования скелетных экранов , если отрисовка следующего экрана занимает время.

Тестирование в нескольких браузерах и устройствах

С помощью прогрессивных веб-приложений вы предоставляете приложение для всех устройств из одной базы кода. Чтобы убедиться, что приложение работает везде, протестируйте его в нескольких браузерах, операционных системах и устройствах.

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

Чтобы протестировать приложение в нескольких средах, рассмотрите следующие методы.

Поддержка глубокого связывания

Чтобы улучшить обнаружение и совместное использование приложения через Интернет и социальные сети, перенаправьте каждую страницу приложения по уникальному URL-адресу и поддерживайте глубокие ссылки.