PWA ワイブアプリマニフェストジェネレーター
ガイド
PWA ワイブアプリマニフェストジェネレーター
構築する manifest.json あなたのプログレッシブウェブアプリ用の有効なファイルを数秒で。アプリの識別情報を入力し、表示モードを選択し、配布するアイコンサイズを選択し、生成器はクリーンなJSONをあなたのプロジェクトに直接貼り付けるだけでなく、それに合わせた <link rel="manifest"> タグをHTMLに追加します。
使用方法
- あなたのアプリの 名前 と 短い名前を入力してください。完全な名前はインストールプロンプトに表示され、短い名前はホームスクリーンアイコンの下に表示されます。
- [名前]を設定してください 開始URL, スコープ、および任意の アプリID を設定し、ブラウザが何を起動し、どのようにナビゲーションを制御するかを知らせる。
- [表示モード]を選択してください 表示モード (スタンドアローン、フルスクリーン、ミニUI、ブラウザ) および オリエンテーション.
- [ブラウザのchrome]を選択し、 テーマカラー (スプラッシュスクリーン) を選択してください。 背景色 [アイコンサイズ] および
- [名前]を設定してください アイコンのベースパス ファイル名パターン を用いて {size} をプレースホルダーとして使用し、実際に配布するアイコンサイズにチェックをつけてください。
{size}生成された - をコピーするか、ダウンロードアイコンをクリックしてください。生成された
manifest.jsonタグをあなたの<link rel="manifest">に貼り付けてください。<head>.
機能
- すべての標準的なマニフェストフィールド – 名前、短い名前、説明、言語、方向、ID、開始URL、スコープ、表示、方向、テーマカラー、背景カラー。
- アイコンサイズチェックリスト – 72、96、128、144、152、192、384、および512px、ベースパスとファイル名パターンから自動生成された
srcURL。 - アイコンの目的サポート – 任意、マスク可能、「任意マスク可能」、モノクロ。
- リアルタイムJSONプレビュー – タイプ中に更新されるきれいなJSON形式とシンタックスハイライト。
- インストール可能性チェック – 名前、開始URL、または推奨される192x192および512x512アイコンが欠落している場合に警告を表示。
- コピーまたはダウンロード – 1クリックでコピー、または
manifest.jsonとしてダウンロードし、正しいMIMEタイプで保存。 - HTMLリンクタグ – 貼り付ける準備ができている
<link rel="manifest">スニペット。 - 100%クライアントサイド – あなたのブラウザから何も出ません。アカウントやクォータは一切ありません。
よくある質問
-
ウェブアプリマニフェストとは何ですか?
ウェブアプリマニフェストは、JSONファイルであり、ブラウザにあなたのプログレッシブウェブアプリがインストールされたときにどのように振る舞うべきかを伝えます。アプリの名前、アイコン、開始URL、表示モード、テーマカラー、およびその他のメタデータが、インストールプロンプト、スプラッシュスクリーン、ホームスクリーンランチャーアイコンに使用されます。
-
PWAがインストール可能になるために必要なフィールドはどれですか?
最低限、ブラウザは名前(または短い名前)、開始URL、表示モードをスタンドアローン、フルスクリーン、またはミニUIに設定し、少なくとも192x192および512x512のアイコンが必要です。テーマカラーおよび背景カラーを追加することは、スムーズなインストール体験を強化するために強く推奨されます。
-
表示モードの違いは?
スタンドアローンはブラウザUIを隠し、ネイティブアプリのように見えます。フルスクリーンもステータスバーを隠し、ゲームに適しています。ミニUIは小さなブラウザコントロールを維持します。ブラウザはアプリを通常のタブで開きます。ほとんどのPWAはスタンドアローンを選択します。
-
アイコンの目的フィールドとは何ですか?
目的はブラウザがアイコンをどのようにレンダリングするかを示します。任意はデフォルトで、ブラウザがアイコンをどのように合成するかを自由に決定できます。マスク可能とは、画像がOSが定義した安全ゾーンに設計されており、ランチャーアイコンが円、squircle、または丸角の四角に切り取る際に重要なコンテンツをカットしないようにするためです。
-
manifest.jsonとリンクタグをどこに置くべきですか?
manifest.jsonをサイトのルートまたは安定したパスに配置し、すべてのHTMLページから タグを含むように参照してください。ファイルがapplication/manifest+jsonのコンテンツタイプで提供されていることを確認してください。
恵 スコアボードが到着しました!
スコアボード ゲームを追跡する楽しい方法です。すべてのデータはブラウザに保存されます。さらに多くの機能がまもなく登場します!
