Создание PWA для боковой панели в Microsoft Edge

Статья
02/27/2024

Прогрессивные веб-приложения (PWA) могут согласиться на закрепление на боковой панели в Microsoft Edge.

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

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

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

Чтобы подготовить PWA к закреплению на боковой панели в Microsoft Edge, используйте элемент манифеста edge_side_panel :

Убедитесь, что в PWA есть файл манифеста веб-приложения, содержащий по крайней nameмере элементы , short_name, descriptionи icons .

Дополнительные сведения см. в статье Использование манифеста веб-приложения для интеграции прогрессивного веб-приложения в операционную систему.

Добавьте участника в edge_side_panel манифест веб-приложения. Например:

{
  "name": "PWAmp music player",
  "lang": "en-US",
  "start_url": "/",
  "short_name": "PWAmp",
  "description": "A skinnable music player app to play your favorite mp3 files",
  "display": "standalone",
  "icons": [
    {
      "src": "./favicon-256.png",
      "sizes": "256x256"
    }
  ],
  "edge_side_panel": {}
}

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

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

Если макет приложения не поддерживает минимальную ширину в 376 пикселей, вы можете определить предпочитаемую ширину с помощью preferred_width свойства манифеста веб-приложения. Например:

{
  "name": "PWAmp music player",
  "lang": "en-US",
  "start_url": "/",
  "short_name": "PWAmp",
  "description": "A skinnable music player app to play your favorite mp3 files",
  "display": "standalone",
  "icons": [
    {
      "src": "./favicon-256.png",
      "sizes": "256x256"
    }
  ],
  "edge_side_panel": {
    "preferred_width": 480
  }
}

При определении предпочтительной ширины в манифесте приложения происходит следующее:

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

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

Элемент edge_side_panel манифеста делает приложение устанавливаемым как автономное приложение и позволяет закрепить приложение на боковой панели в Microsoft Edge.

Однако если вы предпочитаете создать приложение, которое может быть закреплено только на боковой панели, но не может быть установлено как автономное приложение, задайте для элемента browserзначение display , как показано ниже (или опустите display его из манифеста веб-приложения):

{
  "name": "PWAmp music player",
  "lang": "en-US",
  "start_url": "/",
  "short_name": "PWAmp",
  "description": "A skinnable music player app to play your favorite mp3 files",
  "display": "browser",
  "icons": [
    {
      "src": "./favicon-256.png",
      "sizes": "256x256"
    }
  ],
  "edge_side_panel": {
    "preferred_width": 480
  }
}

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

Вы можете определить, когда приложение запускается на боковой панели, используя указания клиента User-Agent. Дополнительные сведения о User-Agent указаниях клиентов см. в статье Обнаружение Microsoft Edge с веб-сайта.

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

На веб-сервере Sec-CH-UA прочтите заголовок запроса HTTPS и найдите фирменную марку Edge Side Panel . Например:
```
Sec-CH-UA: "Microsoft Edge";v="112", "Edge Side Panel";v="1", "Placeholder;Browser Brand";v="99"
```

Или в браузере используйте navigator.userAgentData API JavaScript и считайте значение brands свойства . Например:

const brands = navigator.userAgentData.brands;
const sidebarBrandInfo = brands.find(b => b.brand === "Edge Side Panel");
if (sidebarBrandInfo) {
  console.log(sidebarBrandInfo); // { brand: "Edge Side Panel", version: "1" }
} else {
  console.log("App is not running in the Microsoft Edge sidebar");
}

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

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

Если в приложении не удается использовать подсказки клиента агента пользователя, найдите Edge Side Panel их в строке агента пользователя. Ниже приведены некоторые примеры строк агента пользователя, Edge Side Panel содержащих значение:

User-Agent: ... (Edge Side Panel)...
User-Agent: ... (..., Edge Side Panel)...
User-Agent: ... (Edge Side Panel, ...)...

Связь с мобильным приложением

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

Sec-CH-UA-Mobile: ?0

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

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

Следуйте этим рекомендациям при использовании мобильного варианта приложения на боковой панели:

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

Демонстрационная версия приложения

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

Откройте Microsoft Edge и убедитесь, что отображается боковая панель. Если боковая панель не отображается, перейдите по и edge://settings/sidebar включите переключатель Всегда показывать боковую панель :
Перейдите к PWAmp в новом окне или вкладке. Вам не нужно устанавливать приложение.
Откройте боковую панель, нажмите кнопку Настроить, а затем — Открыть на боковой панели:

На боковой панели появится приложение "Музыкальный проигрыватель PWAmp".
Щелкните значок PWAmp на боковой панели, чтобы открыть приложение и использовать его вместе с другими вкладками:

Исходный код демонстрационного приложения PWAmp имеет следующий код для поддержки боковой панели Microsoft Edge:

Элемент edge_side_panel в файле manifest.json .
Переменная isSidebarPWA , которая использует navigator.userAgentData API JavaScript в файлеapp.js .

Весь исходный код демонстрации PWAmp можно найти на странице MicrosoftEdge / Demos > pwamp. Сведения о локальной загрузке исходного кода см. в статье Скачивание или клонирование репозитория демонстраций в разделе Пример кода для средств разработки.

Предоставление отзывов

Команда Microsoft Edge приветствует ваши отзывы об этой функции. Прочтите описание боковой панели в репозитории объяснителя веб-платформы Microsoft Edge и оставьте отзыв, создав новую проблему в репозитории или выполнив поиск существующих проблем и присоединившись к существующим беседам.

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

Включение поддержки боковой панели в PWA

Адаптация приложения к минимальной ширине боковой панели

Создание приложения только на боковой панели

Обнаружение использования на боковой панели

Связь с мобильным приложением

Демонстрационная версия приложения

Предоставление отзывов

Дополнительные ресурсы