Режим приложений с вкладками для PWA

Работайте с несколькими документами одновременно с помощью вкладок в вашем Progressive Web App

Thomas Steiner

В мире вычислений метафора рабочего стола — это метафора интерфейса, которая представляет собой набор объединяющих концепций, используемых графическими пользовательскими интерфейсами (GUI), чтобы помочь пользователям более интуитивно взаимодействовать с компьютером. В соответствии с метафорой рабочего стола, вкладки GUI смоделированы по образцу классических карточных вкладок, вставленных в книги, бумажные файлы или картотеки. Интерфейс с вкладками документов (TDI) или вкладка — это графический элемент управления, который позволяет содержать несколько документов или панелей в одном окне, используя вкладки в качестве навигационного виджета для переключения между наборами документов.

Progressive Web Apps могут работать в различных режимах отображения , определяемых свойством display в манифесте веб-приложения. Возможные варианты: fullscreen , standalone , minimal-ui и browser . Эти режимы отображения следуют четко определенной цепочке отката ( "fullscreen" → "standalone" → "minimal-ui" → "browser" ). Если браузер не поддерживает заданный режим, он возвращается к следующему режиму отображения в цепочке. Используя свойство "display_override" , разработчики могут указать собственную цепочку отката, если им это необходимо.

Что такое режим вкладок приложения?

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

Варианты использования режима вкладок приложения

Примеры сайтов, которые могут использовать режим вкладок:

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

Отличия от вкладок, созданных разработчиками

Наличие документов в отдельных вкладках браузера сопровождается изоляцией ресурсов, что невозможно при использовании веба сегодня. Вкладки, созданные разработчиками, не масштабируются приемлемым образом до сотен вкладок, как это делают вкладки браузера. Возможности браузера, такие как история навигации, «Копировать URL этой страницы», «Транслировать эту вкладку» или «Открыть эту страницу в веб-браузере», будут применены к странице интерфейса с вкладками, созданной разработчиком, но не к выбранной странице документа.

Различия с "display": "browser"

Текущий "display": "browser" уже имеет конкретное значение :

Открывает веб-приложение, используя специфичное для платформы соглашение об открытии гиперссылок в пользовательском агенте (например, во вкладке браузера или в новом окне).

Хотя браузеры могут делать все, что им заблагорассудится в отношении пользовательского интерфейса, это, несомненно, стало бы серьезным нарушением ожиданий разработчиков, если бы "display": "browser" внезапно означало «запускать в отдельном окне, специфичном для приложения, без каких-либо возможностей браузера, но с интерфейсом документов с вкладками».

Установка "display": "browser" - это то, как вы отказываетесь от того, чтобы быть помещенным в окно приложения.

Текущий статус

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

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

{
  "display": "standalone",
  "display_override": ["tabbed"]
}

Далее, свойство "tab_strip" может быть опционально использовано для тонкой настройки поведения вкладки. Оно имеет два разрешенных подсвойства: "home_tab" и "new_tab_button" . Если свойство "tab_strip" отсутствует, по умолчанию будет использоваться следующий объект:

"tab_strip": {
  "new_tab_button": {
    "url": <start_url>,
  },
}

Вкладка «Главная»

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

Член "home_tab" объекта "tab_strip" содержит информацию о специальной "домашней вкладке", которая предназначена для использования в качестве меню верхнего уровня для приложения. Он содержит следующий член:

• "scope_patterns" : элемент "scope_patterns" представляет собой список шаблонов URL , которые определяют область действия домашней вкладки относительно URL-адреса манифеста.

Кнопка новой вкладки

Член "new_tab_button" объекта "tab_strip" описывает поведение возможности пользовательского интерфейса (например, кнопки), которая при нажатии/активации открывает новый контекст приложения в окне приложения. Он имеет следующий член:

• "url" : элемент "url" — это строка, представляющая URL-адрес относительно URL-адреса манифеста, находящегося в области действия обработанного манифеста.

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

Полный пример

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

{
  "name": "Tabbed App Example",
  "start_url": "/",
  "display": "standalone",
  "display_override": ["tabbed"],
  "tab_strip": {
    "home_tab": {
      "scope_patterns": [
        {"pathname": "/"},
        {"pathname": "/index.html"}
      ]
    },
    "new_tab_button": {
      "url": "/create"
    }
  }
}

Определить режим приложения с вкладками

Приложения могут определить, работают ли они в режиме вкладок, проверив функцию CSS-медиа display-mode в CSS или JavaScript:

@media (display-mode: tabbed) {
  /* Styles to apply in tabbed application mode. */
}

const tabbedApplicationModeEnabled = window.matchMedia('(display-mode: tabbed)').matches;

Взаимодействие с API обработчика запуска

API обработчика запуска позволяет сайтам перенаправлять запуски приложений в существующие окна приложений, чтобы предотвратить открытие дублирующих окон. Когда приложение с вкладками устанавливает "client_mode": "navigate-new" , запуски приложений будут открывать новую вкладку в существующем окне приложения.

Демо

Вы можете попробовать приложение с вкладками на ChromeOS:

1. Установите приложение tabbed-application-mode.glitch.me ( исходный код ).
2. Нажмите на различные ссылки на разных вкладках.

Обратная связь

Команда Chrome хочет узнать о вашем опыте использования режима вкладок в приложениях.

Расскажите нам о дизайне API

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

Сообщить о проблеме с реализацией

Вы нашли ошибку в реализации Chrome? Сообщите об ошибке на new.crbug.com . Обязательно включите как можно больше подробностей, инструкции по воспроизведению и введите UI>Browser>WebAppInstalls в поле Components .

Показать поддержку API

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

Отправьте твит @ChromiumDev , используя хэштег #TabbedApplicationMode , и расскажите нам, где и как вы его используете.

Полезные ссылки

• Объяснитель
• Проблема спецификации манифеста веб-приложения
• Ошибка хрома
• Компонент Blink: UI>Browser>WebAppInstalls

Благодарности

Режим вкладок был исследован Мэттом Джиукой . Экспериментальная реализация в Chrome была работой Алана Каттера . Этот документ был рассмотрен Джо Медли . Изображение героя от Тилла Ниермана на Wikimedia Commons .