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

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

  • Статья

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

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

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

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

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

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

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

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

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

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

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

Сведения об использовании Построителя PWA и публикации в Microsoft Store см. в статье Публикация PWA в 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, чтобы автоматически запускать приложение при открытии определенного файла пользователем в операционной системе.

См . раздел Обработка файлов в PWA.

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

См . статью Обработка ссылок на протоколы PWA и Обработка протоколов в PWA.

Виджеты

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

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

См. раздел Отображение мини-приложения PWA на доске мини-приложений Windows.

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

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

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

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

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

См. также:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

См. также

Локальный: PWA:

Local: DevTools:

MDN:

Википедия:

GitHub:

Другой: