Blazor WebAssemblyアプリ (PWA) をMicrosoft Storeで公開した際のマニフェストファイル

# はじめに

[マークシートシステム Mark2](https://mark2.sfc.keio.ac.jp/ja/)はBlazor WebAssemblyのPWAで動作する[Web版](https://omr.mark2.org/)と、UWPで開発してMicrosoft Storeで公開している[デスクトップ版](https://apps.microsoft.com/store/detail/mark2-desktop/9NRJC7500P6M?hl=ja-jp&gl=jp)がありました。2023年8月まではWeb版をメインに開発して、デスクトップ版はメンテナンスのみをしている状況でした。

これまではデスクトップ版も利用されている状況だったのでデスクトップ版に大きな変更をしないで維持していましたが、ここ最近はWeb版への移行が進んできました。Microsoft StoreはPWAも登録できるようになっていて、Web版をPWAとしてMicrosoft Storeに登録することにしました。

https://learn.microsoft.com/ja-jp/microsoft-edge/progressive-web-apps-chromium/how-to/microsoft-store

# パッケージの作成

マニフェストファイルを編集して、PWABuilderでパッケージを作成します。

## マニフェストファイルの編集

Mark2の場合は以下のようにマニフェストファイルを編集しました。

```json:wwwroot/manifest.webmanifest
{
    "name": "Mark2 Desktop",
    "short_name": "Mark2 Desktop",
    "description": "Mark2 is an application for mark recognition.",
    "categories": [
        "utilities",
        "education"
    ],
    "start_url": "./",
    "display_override": [
        "window-controls-overlay"
    ],
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#03173d",
    "shortcuts": [
        {
            "name": "Mark2 Desktop",
            "url": "/",
            "description": "Mark2 is an application for mark recognition."
        }
    ],
    "prefer_related_applications": false,
    "icons": [
        {
            "src": "icon-512.png",
            "type": "image/png",
            "sizes": "512x512",
            "purpose": "any"
        },
        {
            "src": "icon-192.png",
            "type": "image/png",
            "sizes": "192x192",
            "purpose": "any"
        }
    ],
    "screenshots": [
        {
            "src": "screenshot-1.png",
            "sizes": "1024x768",
            "type": "image/png"
        }
    ],
    "orientation": "any",
    "edge_side_panel": {}
}
```

マニフェストファイルを編集したらデプロイしてWebに公開します。PWABuilderを開いて、PWAのURLを指定して`Start`ボタンをクリックします。

https://www.pwabuilder.com/

マニフェストファイルの検証がされて、その結果が表示されます。私が作成したマニフェストファイルだと`Required`はすべて満たしていますが、`Recommended`と`Optional`はすべてを満たすことはできていません。

![check.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2238166/288c24c6-a8e9-3077-205c-9ac394f87a42.jpeg)

MDNにマニフェストファイルに関するドキュメントがあったので、これを参考に記入をしていきました。何を記入すればよいかわからなかった項目は未記入のままにしているので、これから記入方法がわかった項目は記入していきたいと思います。

https://developer.mozilla.org/ja/docs/Web/Manifest

## Microsoft Storeの登録情報を確認

PWABuilderで`Package for Stores`のボタンをクリックすると、各種ストア向けのパッケージの作成画面が開きます。`Windows`を選択すると以下のような入力画面が表示されます。

![37d057d05b9f-20230913.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2238166/d6d5b9a8-d55c-8cf1-443c-22730048aebc.jpeg)

この画面で`Package ID`、`Publisher display name`、`Publisher ID`を入力します。Microsoft Storeに既存のアプリがある場合、これらの情報はパートナーセンターの`製品管理 > 製品ID`で確認することができます。

# Microsoft Storeにパッケージを登録

作成したパッケージをダウンロードしてMicrosoft Storeに登録します。

## DisplayNameが一致していない場合のエラー

Microsoft Storeにパッケージを登録した際、DisplayNameとマニフェストファイルのアプリ名が一致していないと`このパッケージのマニフェスト (Package/Properties/DisplayName) では、予約していない表示名が使用されています。`というエラーが表示されます。マニフェストファイルのアプリ名を修正してパッケージを再作成しましょう。

## Microsoft Storeの審査

Microsoft Storeに提出すると審査され、不備などがあるとレポートが返ってきます。Mark2 Desktopの場合、操作手順が以前のバージョンのまま変更していなかったのでエラーが出ていたようで、この点を修正して再提出して、審査に合格しました。

![246bb95bbc9d-20230915.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2238166/bfa02d3b-992d-bd4f-ea74-035edda3589f.png)

https://apps.microsoft.com/store/detail/mark2-desktop/9NRJC7500P6M?hl=ja-jp&gl=jp

# おわりに

これまではUWPとBlazor WebAssemblyの両方をメンテナンスしていたので、これでBlazor WebAssemblyに統一できて、メンテナンスが簡単になりそうです。