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

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

Thomas Steiner

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

Прогрессивные веб-приложения могут работать в различных режимах отображения, определяемых свойством 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" содержит информацию о специальной вкладке "home", которая служит меню верхнего уровня для приложения. Она содержит следующий член:

• "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 ( исходный код ).
2. Нажмите на различные ссылки на разных вкладках.

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

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

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

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

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

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

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

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

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

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

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

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

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