プログレッシブ ウェブアプリでタブを使用して、一度に複数のドキュメントで作業する
コンピューティングの世界では、デスクトップ メタファーは、ユーザーがコンピュータをより簡単に操作できるように、グラフィカル ユーザー インターフェース（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 でバグを報告します。できる限り詳細な情報と再現手順を記載し、[Components] ボックスに「UI>Browser>WebAppInstalls」と入力します。Glitch は、すばやく簡単に再現するケースの共有に最適です。
API のサポートを表示する
タブ形式アプリケーション モードを使用する予定はありますか？一般公開のサポートにより、Chrome チームが機能に優先順位を付け、他のブラウザ ベンダーをサポートすることがいかに重要であるかを示します。
ハッシュタグ #TabbedApplicationMode を使用して @ChromiumDev 宛てにツイートを送信し、使用場所と使用方法をお知らせください。
役に立つリンク
- 説明
- ウェブアプリ マニフェストの仕様に関する問題
- Chromium のバグ
- Blink コンポーネント:
UI>Browser>WebAppInstalls
謝辞
タブ付きアプリケーション モードについては、Matt Giuca が検討しました。Chrome での試験運用版の実装は、Alan Cutter 氏によるものです。この記事は Joe Medley によってレビューされました。ヒーロー画像（作成者: Till Niermann、Wikimedia Commons）。
