PWA を Microsoft Store に公開する

プログレッシブ Web アプリ (PWA) を Microsoft Store に公開すると、次の利点があります。

メリット 説明
見つかりやすさ ユーザーは自然にアプリ ストアでアプリを探します。 Microsoft Store に公開すると、何百万人もの Windows ユーザーが他の Windows アプリと並んで PWA を検出できます。 Microsoft Store では、カテゴリ、キュレーションされたコレクションなどを通じてアプリを紹介します。 アプリ検出ポータルは、アプリの潜在的なユーザーに簡単な閲覧とショッピングのエクスペリエンスを提供します。 スクリーンショット、ヒーロー画像、ビデオ トレーラーを使用して Store 登録情報を強化することもできます ( アプリのスクリーンショット、画像、トレーラーを参照)。
信頼性 Windows ユーザーは、厳格な Microsoft Store ポリシーに準拠しているため、Microsoft Store での購入やダウンロードを信頼できることを知っています。
簡単なインストール Microsoft Store は、すべての Windows 10 以降のアプリで、一貫性のあるユーザー フレンドリーなインストール エクスペリエンスを提供します。
アプリ分析 パートナー センター ダッシュボード には、アプリの正常性、使用状況などに関する詳細な分析 (分析情報) が表示されます。 「アプリとゲームの概要」を参照してください。

PWA を Microsoft Store に公開するために、コードを変更する必要はありません。 代わりに、Microsoft パートナー センターでアプリの予約を作成し、 PWA Builder を使用して PWA をパッケージ化してから、パッケージを Microsoft Store に送信します。 次のセクションでは、これらの手順について説明します。

関連項目:

アプリの予約を作成する

アプリを Microsoft Store に提出するには、 Microsoft パートナー センターを使用します。

アプリの予約を作成するには:

  1. アプリの予約を作成するには、Windows 開発者プログラムに登録されている 個人用の Microsoft アカウント (職場の Microsoft アカウントまたは学校の Microsoft アカウントではない) が必要です。

    1. まだお持ちでない場合は、 account.microsoft.com で個人用の Microsoft アカウントを作成します。
    2. 「 パートナー センターで開発者アカウントを開く」の手順に従って、Windows 開発者プログラムに登録します。

  2. アカウントがアプリ開発者プログラムに登録されたら、次の手順に従ってアプリの予約を作成します。

    1. パートナー センター ダッシュボードに移動します。 登録したアカウントでサインインします。
    2. [ ワークスペース] で、[ アプリとゲーム] を選択します。 アプリとゲーム |概要ページが表示されます。
    3. [新しい製品>MSIX] または [PWA アプリ] を選択します。
    4. メッセージが表示されたら、予約の名前を入力し、[ 製品名の予約] を選択します。

    Microsoft パートナー センターでアプリの予約を作成する

  3. [PWA のパッケージ化] セクションで使用する発行元の詳細を表示するには、[製品管理]>[製品 ID] を選択します。

    Microsoft パートナー センターからパブリッシャー情報をコピーする

  4. 次の値をコピーして保存します。

    • パッケージ ID
    • パブリッシャー ID
    • パブリッシャーの表示名

Microsoft Store 用に PWA をパッケージ化する

アプリに関する公開情報を収集したので、PWA Builder を使用して PWA 用の Windows アプリ パッケージを生成します。

アプリ パッケージを生成するには:

  1. PWA Builder に移動します。

  2. [PWA をアプリ ストアに発送する] で、テキスト ボックスに PWA の URL を入力し、[スタート] ボタンをクリックします。

    PWA は、ストアの準備が完了していることを確認するために評価されます。

  3. PWABuilder レポート カード ページの評価から、PWA をパッケージ化する準備ができていることが示されている場合は、次の手順に進みます。 PWA をパッケージ化する準備ができていないことが評価によって示されている場合は、「 アクション アイテム」 セクションを調べて、PWA を改善する方法を確認してください。

    レポート カード ページ

  4. PWA をパッケージ化する準備ができたら、PWABuilder レポート カード ページの右上隅にある [Package For Stores] ボタンをクリックします。 ダイアログが開き、「素晴らしい!PWA の保存準備完了です。

  5. [Windows] で、[パッケージの生成] ボタンをクリックします。 [Windows パッケージ オプション] ダイアログが開きます。

  6. 上記の「 アプリの予約の作成 」セクションで保存した次の値を貼り付けます。

    • パッケージ ID
    • パブリッシャーの表示名
    • パブリッシャー ID

    パブリッシャー情報を Windows の [パッケージ オプション] ページに貼り付けています

  7. [ パッケージのダウンロード] ボタンをクリックして、Windows パッケージをダウンロードします。

ダウンロードは、.msixbundle ファイルと .classic.appxbundle ファイルを含む.zip アーカイブです。 この 2 つのアプリ パッケージにより、PWA をさまざまな Windows バージョンで実行できます。

関連項目:

アプリ パッケージを Microsoft Store に提出する

アプリを Microsoft Store に提出するには:

  1. Microsoft パートナー センターに移動します。

  2. アプリを選択します。

  3. [ Start your submission ] ボタンをクリックします。

    Microsoft パートナー センターで新しいアプリの申請を開始する

  4. メッセージが表示されたら、価格や年齢別レーティングなど、アプリに関する情報を入力します。

  5. パッケージ プロンプトで、[PWA のパッケージ化] セクションで生成した.msixbundleファイルと .classic.appxbundle ファイルを選択します。

アプリを送信すると、通常は 24 から 48 時間以内にアプリが審査されます。 アプリが承認されると、PWA を Microsoft Store で使用できるようになります。

Microsoft Store からインストールした PWA の使用状況を測定する

PWA が最初に起動されたときに、PWA が Microsoft Store からインストールされている場合、Microsoft Edge には、Web アプリの最初のナビゲーションの要求に次の Referer ヘッダーが含まれます。

Referer: app-info://platform/microsoft-store

この機能を使用して、Microsoft Store からインストールされた PWA からの個別のトラフィックを測定します。 トラフィックに基づいて、アプリのコンテンツを調整してユーザー エクスペリエンスを向上させることができます。 この機能は、クライアント コードとサーバー コードの両方からアクセスできます。 クライアント側でこの情報にアクセスするには、JavaScript で document.referrer クエリを実行します。

追加の UI を表示せずにロケール固有のドメインにリダイレクトする

既定では、 Microsoft Store からインストールされた PWA では、アプリがロケール固有のドメインにリダイレクトされたときに追加の UI が表示されます。 追加された UI には、URL とページ タイトルが表示されます。 この UI は、ロケール固有のドメインへのナビゲーションが スコープ外と見なされるために追加されています。

ユーザーが PWA の範囲外に移動すると、次の UI が導入されます。

アプリが別のドメインにリダイレクトされたときの URL とページ タイトルを含む追加の UI

ブラウザーからインストールされた PWA を使用したドメイン リダイレクト

Web アプリ マニフェストは 1 つのドメインに関連付けられています。 ただし、PWA によっては、世界の特定の地域の顧客に対してロケール固有のドメインを使用しています。 Web ブラウザーで PWA にアクセスすると、Web サイトの初期読み込み中にリダイレクトが行われるため、顧客はプリンシパル ドメイン ( contoso.com など) からロケール固有のドメイン ( contoso.co.ke など) にシームレスに移行されます。

そのため、Microsoft Edge から PWA をインストールしたお客様は、ロケール固有のドメインから PWA をインストールします。 それ以降の PWA の起動では、最初にプリンシパル ドメインにアクセスするのではなく、そのロケール固有のドメインに直接移動します。

Microsoft Store からインストールされた PWA を使用したドメイン リダイレクト

Microsoft Store からインストールされた PWA には、プリンシパル ドメインを指すハードコーディングされた開始 URL があります。 PWA が起動されると、PWA は最初にプリンシパル ドメインに移動し、その後、顧客は (必要に応じて) ロケール固有のドメインにリダイレクトされる場合があります。 そのリダイレクトが発生した場合、ナビゲーションは "スコープ外" と見なされます。 その結果、アプリのページの上部に URL とページ タイトルが表示されます。

URL とページ タイトルの表示は、PWA のコンテキストから離れたことをユーザーが確実に知らせるためのセキュリティ機能です。 この追加された UI は、ユーザーが PWA のコンテキストで別の Web サイトからページを読み込むときに理にかなっています。 ただし、追加された UI は、ユーザーが同じ Web サイトの一部であるドメイン間を移動する場合には不適切な場合があります。

ロケール固有の URL とタイトルが表示されないようにする

現在、Microsoft Store からインストールされたアプリの場合、ロケール固有のドメインにリダイレクトするときに、追加の URL とタイトル UI が表示されないようにすることはできません。

将来的には、 スコープ拡張によって 、PWA がパス、サブドメイン、または独自のスコープ以外のサイトへのナビゲーションをキャプチャできるようになります。 スコープ拡張機能は現在開発中であり、まだ使用する準備ができていません。 Chromium でのこの機能の開発状況の詳細については、Chrome プラットフォーム ステータスの Web アプリ スコープ拡張機能機能をチェックしてください。

この機能が Microsoft Edge で使えるようになったら、ここに文書化します。 それまでの間、スコープ拡張のしくみの詳細については、 WICG リポジトリの説明ドキュメントを参照してください。

アプリを更新する

通常、PWA コードを更新するときは、新しいアプリ パッケージを作成して Microsoft Store にもう一度送信する必要はありません。 たとえば、アプリのフロントエンド HTML、CSS、JavaScript コード、またはサービス ワーカーに変更を加えるとします。 次にユーザーがアプリを起動すると、アプリを実行しているブラウザーによって Web サーバーから変更がダウンロードされます。

ただし、Web アプリのマニフェスト ファイルを変更する場合は、新しいアプリ パッケージを作成して、Microsoft Store にもう一度送信する必要があります。 たとえば、マニフェスト内でアプリ アイコンやアプリ名を変更したり、 file_handlers、 protocol_handlers、 share_target などのマニフェスト メンバーを追加したりできます。 マニフェストが変更されたとき、新しいアプリ パッケージを作成して送信する必要があります。これは、Windows との統合を改善するために、Web アプリ マニフェスト ファイル内の情報が Windows アプリ パッケージにコピーされるためです。

関連項目

PWA Builder リポジトリのドキュメント:

  • 最終更新: