PWA のタブ形式アプリケーション モード

プログレッシブ ウェブアプリのタブを使用して、一度に複数のドキュメントを操作する

Thomas Steiner

コンピューティングの世界では、デスクトップのメタファーとは、グラフィカル ユーザー インターフェース（GUI）で使用されるコンセプトを統合し、ユーザーがパソコンをより簡単に操作できるようにするためのインターフェースのメタファーです。デスクトップのメタファーに沿って、GUI タブは書籍、紙のファイル、カード索引に挿入される従来のカードタブをモデルにしています。タブ付きドキュメント インターフェース（TDI）またはタブは、複数のドキュメントまたはパネルを 1 つのウィンドウに含めることができるグラフィック コントロール要素です。タブは、ドキュメントセットを切り替えるためのナビゲーション ウィジェットとして使用されます。

プログレッシブ ウェブアプリは、ウェブアプリ マニフェストの display プロパティで指定されたさまざまな表示モードで実行できます。例は、fullscreen、standalone、minimal-ui、browser です。これらのディスプレイ モードは、明確に定義された代替チェーン（"fullscreen" → "standalone" → "minimal-ui" → "browser"）に従います。ブラウザが特定のモードをサポートしていない場合、チェーン内の次のディスプレイ モードにフォールバックします。デベロッパーは、必要に応じて "display_override" プロパティを使用して独自のフォールバック チェーンを指定できます。

タブ付きアプリケーション モードとは

これまでこのプラットフォームには、PWA デベロッパーがタブ形式のドキュメント インターフェースをユーザーに提供できる方法がありませんでした。たとえば、同じ PWA ウィンドウで異なるファイルを編集できるようにする方法です。タブ形式のアプリモードでは、このギャップが解消されます。

タブ付きアプリケーション モードで推奨されるユースケース

タブ付きアプリケーション モードを使用する可能性のあるサイトの例を次に示します。

  • 複数のドキュメント（またはファイル）を同時に編集できる生産性向上アプリ。
  • ユーザーがタブごとに異なる部屋で会話できるコミュニケーション アプリ。
  • 記事のリンクを新しいアプリ内タブで開く読書アプリ。

デベロッパーが作成したタブとの違い

ドキュメントを別のブラウザタブに配置すると、リソースの分離が無料で行われます。これは、現在のウェブでは不可能です。デベロッパーが作成したタブは、ブラウザのタブのように数百のタブにスケーリングすることはできません。ナビゲーション履歴、「このページの URL をコピー」、[このタブをキャスト]、[このページをウェブブラウザで開く] などのブラウザのアフォーダンスは、デベロッパーが作成したタブ形式のインターフェース ページには適用されますが、現在選択されているドキュメント ページには適用されません。

"display": "browser" との違い

現在の "display": "browser" には、すでに特定の意味があります。

ユーザー エージェントでハイパーリンクを開くためのプラットフォーム固有のコンベンション（ブラウザのタブや新しいウィンドウなど）を使用して、ウェブ アプリケーションを開きます。

ブラウザは UI に関して何でもできますが、"display": "browser" が突然「ブラウザのアフォーダンスはなく、タブ付きドキュメント インターフェースの別のアプリケーション固有のウィンドウで実行」を意味するようになった場合、これは明らかにデベロッパーの期待を大きく裏切ることになります。

"display": "browser" を設定すると、アプリケーション ウィンドウに表示されることのオプトアウトが有効になります。

現在のステータス

ステップ ステータス
1. 説明を作成する 完了
2. 仕様の最初の下書きを作成する 開始していません
3. フィードバックを収集してデザインを反復する 作成中
4. オリジン トライアル 作成中
5. リリース 開始していません

タブ形式のアプリケーション モードを使用する

タブ付きアプリケーション モードを使用するには、デベロッパーはウェブアプリ マニフェストで特定の "display_override" モード値を設定してアプリをオプトインする必要があります。

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

次に、必要に応じてプロパティ "tab_strip" を使用して、タブの動作を微調整できます。使用できるサブプロパティは "home_tab" と "new_tab_button" の 2 つです。"tab_strip" プロパティが存在しない場合、特定のプロパティの "auto" 値が使用されます。"auto" に使用する値はブラウザによって決定されます。

[ホーム] タブ

[ホーム] タブは固定されたタブで、アプリで有効にすると、アプリが開いているときは常に表示されます。このタブは移動しないでください。このタブでクリックしたリンクは、新しいアプリタブで開きます。アプリは、このタブがロックされる URL とタブに表示されるアイコンをカスタマイズできます。

"home_tab" に指定できる値は次のとおりです。

  • "auto": ブラウザが処理を決定できるようにします。
  • "absent": ホームタブを表示しないようにブラウザに指示します。
  • 次の 2 つのサブプロパティを持つオブジェクト。
    • "url": 使用できる値は "auto" または、ホームページ タブをロックする URL です。
    • "icons" は、使用できる "auto" の値、またはメインの "icons" プロパティにあるアイコンの配列に置き換えます。

新しいタブボタン

新しいタブボタン（存在する場合）は、アプリのスコープ内の URL で新しいタブを開く必要があります。アプリでは、このボタンにカスタム URL とアイコンを設定できます。ブラウザは、これらのタブをドラッグして新しいウィンドウを作成したり、ブラウザのタブと結合したりする方法を選択できます。

"new_tab_button" に指定できる値は以下のとおりです。

  • "auto": ブラウザが処理を決定できるようにします。
  • "absent": 新しいタブボタンを表示しないようにブラウザに指示します。
  • 次の 2 つのサブプロパティを持つオブジェクト。
    • "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 または JavaScript で display-mode CSS メディア機能を確認することで、タブ付きアプリケーション モードで実行されているかどうかを検出できます。

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

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

Launch Handler API との連携

Launch Handler API を使用すると、サイトはアプリの起動を既存のアプリ ウィンドウにリダイレクトして、重複するウィンドウが開かないようにできます。タブ形式のアプリで "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 チームが機能の優先度を判断し、そのサポートの重要性を他のブラウザ ベンダーに説明するのに役立ちます。

ハッシュタグ #TabbedApplicationMode を使用して @ChromiumDev にツイートを送信し、どこでどのように使用しているかをお知らせください。

謝辞

タブ形式のアプリケーション モードは Matt Giuca が検討しました。Chrome での試験運用版の実装は、Alan Cutter によるものです。この記事は Joe Medley が確認しました。Wikimedia Commons の Till Niermann 氏によるヒーロー画像。