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

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

Thomas Steiner

Примечание. Режим приложений с вкладками является частью проекта возможностей и доступен в ChromeOS.

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

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

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

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

Примечание. Эта функция представляет собой отдельное окно приложения с несколькими вкладками, содержащими отдельные документы внутри области приложения. Это отличается от display: browser , который предполагает, что приложение открывается в обычной вкладке браузера.

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

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

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

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

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

Отличия от "display": "browser"

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

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

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

Настройка "display": "browser" фактически позволяет вам отказаться от помещения в окно приложения.

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

Шаг	Статус
1. Создайте объяснитель	Завершенный
2. Создайте первоначальный проект спецификации.	Завершенный
3. Соберите отзывы и доработайте дизайн	Завершенный
4. Пробная версия происхождения	Завершенный
5. Запуск	Завершено (ChromeOS)

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

Чтобы использовать режим приложения с вкладками, разработчикам необходимо включить свои приложения, установив определенное значение режима "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-интерфейс Launch Handler позволяет сайтам перенаправлять запуски приложений в существующие окна приложений, чтобы предотвратить открытие дубликатов окон. Когда приложение с вкладками устанавливает "client_mode": "navigate-new" , при запуске приложения будет открываться новая вкладка в существующем окне приложения.

Демо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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