次の方法で共有

Microsoft Edge でサイドバーの PWA を構築する

  • [アーティクル]

プログレッシブ Web アプリ (PWA) は、Microsoft Edge のサイドバーにピン留めするようにオプトインできます。

Microsoft Edge のサイドバーを使用すると、ユーザーはブラウザー タブと共に人気のある Web サイトやユーティリティに簡単にアクセスできます。 サイドバーのコンテンツは、サイドバイサイドブラウズを有効にし、ブラウザタブ間でコンテキストを切り替える必要性を最小限に抑えることによって、ユーザーの主なタスクを強化します。

意図をサイドバーにピン留めすることで、PWA には次の利点があります。

  • PWA は、Microsoft Edge サイドバー ストアで昇格できます。
  • PWA は、Microsoft Edge サイドバーで実行されているかどうかを検出できます。
  • PWA では、独自のスタイルとレイアウトを定義して、ユーザーフレンドリなサイドバー エクスペリエンスを提供します。

PWA でサイドバーのサポートを有効にする

PWA を Microsoft Edge のサイドバーにピン留めする準備を整えるには、 edge_side_panel マニフェスト メンバーを使用します。

  1. PWA に、少なくとも name、 short_name、 description、および icons メンバーを含む Web アプリ マニフェスト ファイルがあることを確認します。 詳細については、「 Web アプリ マニフェストを使用して PWA を OS に統合する」を参照してください。

  2. edge_side_panel メンバーを Web アプリ マニフェストに追加します。 例:

    {
  "name": "PWAmp music player",
  "lang": "en-US",
  "start_url": "/",
  "short_name": "PWAmp",
  "description": "A skinnable music player app to play your favorite mp3 files",
  "display": "standalone",
  "icons": [
    {
      "src": "./favicon-256.png",
      "sizes": "256x256"
    }
  ],
  "edge_side_panel": {}
}

サイドバーの最小幅にアプリを適応させる

Microsoft Edge のサイドバーの既定の最小幅は 376 ピクセルで、ユーザーがサイズを変更できます。 そのため、アプリのレイアウトでは 376 ピクセルの最小幅がサポートされ、応答性が高い必要があります。

アプリのビルド中に、Microsoft Edge DevTools の デバイス エミュレーション ツールを使用して、アプリのレイアウトが狭い場合に使用可能かどうかをテストし、デザインが異なる幅で応答性を確認できます。 詳細については、「 狭い場合に Web ページ レイアウトが使用可能であることを確認する」を参照してください。

アプリのレイアウトで 376 ピクセルの最小幅をサポートできない場合は、Web アプリ マニフェストの preferred_width プロパティを使用して、任意の幅を定義できます。 例:

{
  "name": "PWAmp music player",
  "lang": "en-US",
  "start_url": "/",
  "short_name": "PWAmp",
  "description": "A skinnable music player app to play your favorite mp3 files",
  "display": "standalone",
  "icons": [
    {
      "src": "./favicon-256.png",
      "sizes": "256x256"
    }
  ],
  "edge_side_panel": {
    "preferred_width": 480
  }
}

アプリのマニフェストで推奨される幅を定義すると、次の処理が行われます。

  • サイドバーでアプリを開くと、サイドバーのサイズが自動的に任意の幅に変更されます。

  • ユーザーはサイドバーのサイズを変更して、376 ピクセルの最小幅まで、好みの幅より大きくしたり、小さくしたりできます。

サイドバー専用アプリを構築する

PWA としてアプリを構築する最も重要な利点の 1 つは、1 つのコード ベースから、アプリが機能や画面サイズに関係なく、すべてのデバイスとオペレーティング システムに適応できることです。

edge_side_panel マニフェスト メンバーを使用すると、アプリをスタンドアロン アプリとしてインストールでき、Microsoft Edge のサイドバーにアプリをピン留めできます。

ただし、サイドバーにのみピン留めできるがスタンドアロン アプリとしてインストールできないアプリを構築する場合は、次に示すように、 display メンバーの値を browserに設定します (または、Web アプリ マニフェストから display メンバーを省略します)。

{
  "name": "PWAmp music player",
  "lang": "en-US",
  "start_url": "/",
  "short_name": "PWAmp",
  "description": "A skinnable music player app to play your favorite mp3 files",
  "display": "browser",
  "icons": [
    {
      "src": "./favicon-256.png",
      "sizes": "256x256"
    }
  ],
  "edge_side_panel": {
    "preferred_width": 480
  }
}

サイドバーで使用状況を検出する

サイドバーでアプリが実行されているタイミングを検出すると、このブラウザー パネルでアプリを実行するときに、ユーザーに最良のエクスペリエンスを提供するのに役立ちます。

User-Agent クライアント ヒントを使用して、サイドバーでアプリが実行されるタイミングを検出できます。 クライアント ヒントの User-Agent の詳細については、「 Web サイトからの Microsoft Edge の検出」を参照してください。

サイドバーでアプリがいつ実行されるかを検出するには、次のいずれかの操作を行います。

  • Web サーバーで、 Sec-CH-UA HTTPS 要求ヘッダーを読み取り、 Edge Side Panel ブランドを探します。 例:

    Sec-CH-UA: "Microsoft Edge";v="112", "Edge Side Panel";v="1", "Placeholder;Browser Brand";v="99"

  • または、ブラウザーで、 navigator.userAgentData JavaScript API を使用し、 brands プロパティの値を読み取ります。 例:

    const brands = navigator.userAgentData.brands;
const sidebarBrandInfo = brands.find(b => b.brand === "Edge Side Panel");
if (sidebarBrandInfo) {
  console.log(sidebarBrandInfo); // { brand: "Edge Side Panel", version: "1" }
} else {
  console.log("App is not running in the Microsoft Edge sidebar");
}

アプリがサイドバーで実行されているかどうかを検出するには、User Agent 文字列を使用することもできます。

注: ユーザー エージェント文字列ではなく、ユーザー エージェント クライアント ヒントを使用することを強くお勧めします。 ユーザー エージェント文字列は、ブラウザー検出を実行するための古いメカニズムであり、Web サイトの互換性の問題があります。

アプリでユーザー エージェント クライアント ヒントを使用できない場合は、ユーザー エージェント文字列で Edge Side Panel を探します。 Edge Side Panel値を含むユーザー エージェント文字列の例を次に示します。

User-Agent: ... (Edge Side Panel)...
User-Agent: ... (..., Edge Side Panel)...
User-Agent: ... (Edge Side Panel, ...)...

モバイル アプリとの関係

アプリのデスクトップバリアントとアプリのモバイルバリアントを作成するとします。 このシナリオでは、アプリがサイドバーにピン留めされるときに、デスクトップバリアントが使用されます。 既定では、 edge_side_panel マニフェスト メンバーを使用するサイドバー内のアプリは、Microsoft Edge デスクトップ ユーザー エージェント クライアント ヒントを受け取ります。

Sec-CH-UA-Mobile: ?0

「 最小サイドバー幅にアプリを適応させる」で説明されているように、1 つのコード ベースを使用して複数のフォーム ファクターに適応できるように、アプリのレイアウトを応答性にすることをお勧めします。

ただし、 Edge Side Panel ユーザー エージェント クライアント ヒント ブランドを使用して、Microsoft Edge サイドバーでアプリのモバイルバリアントを再利用できます。

サイドバーでアプリのモバイルバリアントを使用する場合は、次の推奨事項に従います。

  • アプリ ストアからアプリをダウンロードするようにユーザーに指示するすべての "アプリで開く" メッセージを削除します。

  • マウス、キーボード、タッチなど、すべての入力方法でアプリのアクセシビリティと使いやすさをテストします。 アプリのアクセシビリティのテストについては、「 アクセシビリティテスト機能」を参照してください。

デモ アプリ

PWAmp は、Microsoft Edge のサイドバーにピン留めできる音楽プレーヤー PWA デモ アプリケーションです。 サイドバー アプリとして PWAmp をテストするには:

  1. Microsoft Edge を開き、サイドバーが表示されていることを確認します。 サイドバーが表示されない場合は、[ edge://settings/sidebar ] に移動し、[ 常にサイドバーを表示 する] トグルをオンにします。

    [Edge Settings]\(エッジ設定\) ページの [常にサイドバーを表示する] 設定

  2. 新しいウィンドウまたはタブで PWAmp に移動します。アプリをインストールする必要はありません。

  3. サイドバーを開き、[ カスタマイズ] をクリックし、[ サイドバーで開く] をクリックします。

    [サイドバーのカスタマイズ] パネルと [サイドバーで開く] ボタン

    PWAmp 音楽プレーヤー アプリがサイドバーに表示されます。

  4. サイドバーの PWAmp アイコンをクリックしてアプリを開き、他のタブと一緒に使用します。

    TODO リスト アプリで 1 つのタブが開き、サイドバーに PWAmp が表示された Microsoft Edge

PWAmp デモ アプリのソース コードは、Microsoft Edge サイドバーをサポートするために次のとおりです。

  • manifest.json ファイル内のedge_side_panel メンバー。

  • app.jsファイル内の navigator.userAgentData JavaScript API を使用する isSidebarPWA 変数。

PWAmp のデモ ソース コード全体は 、MicrosoftEdge/Demos > pwamp にあります。 ソース コードをローカルにダウンロードするには、「DevTools のサンプル コード」の「Demos リポジトリをダウンロードまたは複製する」を参照してください。

フィードバックの提供

Microsoft Edge チームは、この機能に関するフィードバックを歓迎します。 Microsoft Edge Web プラットフォーム の Explainer リポジトリでサイド パネルの説明 を読み、リポジトリに 新しい問題を作成 するか、 既存の問題を検索して既存 の会話に参加することでフィードバックを残します。