プログレッシブ ウェブアプリのタブを使用して、一度に複数のドキュメントを操作する
コンピューティングの世界では、デスクトップ メタファーは、ユーザーがコンピュータをより簡単に操作できるように、グラフィカル ユーザー インターフェース（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" が設定されている場合、アプリの起動時に既存のアプリ ウィンドウに新しいタブが開きます。
デモ
タブ形式のアプリケーション モードを試すには、ブラウザ フラグを設定します。
#enable-desktop-pwas-tab-stripフラグを設定します。- アプリ 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 が確認しました。ウィキメディア コモンズの Till Niermann によるヒーロー画像。
