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

[アーティクル]
02/27/2024

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

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

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

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

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

PWA に、および icons のメンバーが少なくともdescriptionnameshort_name含まれる Web アプリマニフェストファイルがあることを確認します。

詳細については、「 Web アプリマニフェストを使用してプログレッシブ Web アプリをオペレーティングシステムに統合する」を参照してください。

メンバーを 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 サーバーで、HTTPS 要求ヘッダーを Sec-CH-UA 読み取り、ブランドを Edge Side Panel 探します。例:
```
Sec-CH-UA: "Microsoft Edge";v="112", "Edge Side Panel";v="1", "Placeholder;Browser Brand";v="99"
```

または、ブラウザーで JavaScript API を navigator.userAgentData 使用し、プロパティの値を 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 をテストするには:

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

$[Edge Settings]$エッジ設定$ ページの [常にサイドバーを表示する] 設定$
新しいウィンドウまたはタブで PWAmp に移動します。アプリをインストールする必要はありません。
サイドバーを開き、[ カスタマイズ] をクリックし、[ サイドバーで開く] をクリックします。

PWAmp 音楽プレーヤーアプリがサイドバーに表示されます。
サイドバーの PWAmp アイコンをクリックしてアプリを開き、他のタブと一緒に使用します。

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

edge_side_panelmanifest.json ファイル内のメンバー。
app.jsisSidebarPWA ファイルで JavaScript API を使用navigator.userAgentDataする変数。

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

フィードバックの提供

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

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

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

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

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

モバイルアプリとの関係

デモアプリ

フィードバックの提供

その他のリソース

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

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

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

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

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

モバイル アプリとの関係

デモ アプリ

フィードバックの提供

その他のリソース

モバイルアプリとの関係

デモアプリ