なぜ WEBMANIFEST を PNG に変換するのですか？
webmanifest から .png への変換を検索する開発者は、マニフェスト内のアイコン項目を確認し、それらの項目が指し示す実際の画像ファイルを必要としています。PWA には通常、1つの高解像度ソースから生成された 192x192 PNG、512x512 PNG、および 512x512 の maskable な PNG が必要です。マニフェストはそれらを参照するだけであり、ツールがピクセルを作成して JSON スニペットを返します。
WEBMANIFEST から PNG への変換方法
pwa-asset-generator OPEN-SOURCE
npx pwa-asset-generator logo.svg ./icons を実行して、アイコンとスプラッシュ PNG を自動生成し、マニフェストと HTML を更新します。
これらの形式について
.WEBMANIFEST
Web Application Manifest
.webmanifestファイルは、Progressive Web Appのインストール方法や表示方法（名前、アイコン、開始URL、色など）をブラウザに伝えるための小さなJSONテキストファイルです。ウェブページのHTMLからリンクされ、直接開くのではなくブラウザによって読み取られます。プレーンテキストであるため、Visual Studio Code、Sublime…
.WEBMANIFEST の詳細を開く →
.PNG
Portable Network Graphics
PNG (Portable Network Graphics) は、ロスレス（可逆）圧縮のラスター画像形式です。最新のすべての OS、ブラウザ、画像アプリでネイティブに開くことができ、ダブルクリックするだけで表示されます。よくある質問は、開き方ではなく、透明度、ファイルサイズ、および JPG や SVG への変換に関するものです。
.PNG の詳細を開く →品質と注意点
- マニフェストには画像データが含まれていないため、品質は提供するソースロゴに完全に依存します。512x512 以上から始めてください。
- maskable な PNG にはロゴの周囲にセーフパディングが必要です。そうしないと、Android で重要な端が切り取られてしまいます。
- 生成されたアイコンが自動的に何かを置き換えることはありません。新しい
iconsブロックをマニフェストにコピーする必要があります。
よくある質問
マニフェストファイル自体から PNG を抽出できますか？
いいえ。マニフェストはパスとサイズを保存しているだけです。実際の PNG は、ロゴから生成した個別のファイルとして存在します。
どのサイズが必要ですか？
最低でも 192x192 と 512x512 の PNG、さらに Android 用の 512x512 の maskable な PNG が必要です。
どのようなソース画像が最適ですか？
縮小しても鮮明さを保てるよう、正方形の SVG または 512x512 以上の PNG/JPG が最適です。
ツールはマニフェストを更新してくれますか？
準備された
icons JSON が提供されます。pwa-asset-generator のような CLI ツールは、それを自動的に書き込むことができます。
