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

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

Томас Штайнер

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

Текущее состояние

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

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

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

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

Далее свойство "tab_strip" можно дополнительно использовать для точной настройки поведения вкладок. У него есть два разрешенных подсвойства: "home_tab" и "new_tab_button" . Если свойство "tab_strip" отсутствует, используются значения "auto" конкретных свойств. Браузер определяет, какие значения использовать для "auto" .

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

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

Допустимые значения для "home_tab" :

  • "auto" чтобы браузер мог определить, что делать.
  • "absent" , чтобы браузер не отображал домашнюю вкладку.
  • Объект с двумя подсвойствами:
    • "url" с допустимыми значениями "auto" или URL-адресом для блокировки домашней вкладки.
    • "icons" с допустимыми значениями "auto" или массивом значков, как в основном свойстве "icons" .

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

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

Допустимые значения для "new_tab_button" :

  • "auto" чтобы браузер мог определить, что делать.
  • "absent" , чтобы сообщить браузеру не отображать кнопку новой вкладки.
  • Объект с двумя подсвойствами:
    • "url" с допустимыми значениями "auto" или URL-адрес в области действия, по которому можно открывать новые вкладки.
    • "icons" с допустимыми значениями "auto" или массивом значков, как в основном свойстве "icons" .

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

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

{
  "display_override": ["tabbed"],
  "tab_strip": {
    "home_tab": {
      "url": "./home/",
      "icons": [
        {
          "src": "./home.svg",
          "sizes": "any",
          "type": "image/svg+xml"
        }
      ]
    },
    "new_tab_button": {
      "url": "./new-tab/",
      "icons": [
        {
          "src": "./new-tab.svg",
          "sizes": "any",
          "type": "image/svg+xml"
        }
      ]
    }
  }
}

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

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

Демо

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

  1. Установите флаг #enable-desktop-pwas-tab-strip .
  2. Установите приложение tabbed-application-mode.glitch.me ( исходный код ).
  3. Нажимайте на разные ссылки на разных вкладках.

Снимок экрана с демонстрацией режима приложения с вкладками на tabbed-application-mode.glitch.me.

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

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

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

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

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

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

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

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

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

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

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