PWAマニフェスト：Webアプリマニフェストを簡単に作成する

公開: 2020-07-28

適切に構成されたWebアプリマニフェストは、PWAのインストールプロセスにとって非常に重要です。これがないと、プロセス全体が不可能になるためです。そして驚くべきことに、Webアプリのマニフェストを適切に構成することもそれほど難しくありません。

それはなんのためですか？

Webアプリマニフェストは、スプラッシュ画面とユーザーのホーム画面でアプリがユーザーにどのように表示されるかを決定するため、PWAの重要な部分です。これらはすべて、アプリに対するユーザーの印象の形成に寄与する重要な初期段階です。そのため、アプリを正しく理解することが重要です。

マニフェスト.jsonを構成する方法

ゼロから始める

JSONデータ形式に少し慣れれば、労力をかけずに独自のWebアプリマニフェストを作成できます。

典型的なmanifest.jsonは次のようになります。

 {{
    "theme_color"： "＃f69435"、
    "background_color"： "#ffffff"、
    「ディスプレイ」：「フルスクリーン」、
    "スコープ"： "/"、
    "start_url"： "/"、
    "app_name"： "SimiCart"、
    "short_name"： "SimiCart"、
    「説明」：「Magento向けの次世代eコマースソリューション」、
    「アイコン」：[
        {{
            "src"： "/icon-192x192.png"、
            「サイズ」：「192x」、
            "タイプ"： "image / png"
        }、
        {{
            "src"： "/icon-256x256.png"、
            「サイズ」：「256x」、
            "タイプ"： "image / png"
        }、
        {{
            "src"： "/icon-384x384.png"、
            「サイズ」：「384x」、
            "タイプ"： "image / png"
        }、
        {{
            "src"： "/icon-512x512.png"、
            「サイズ」：「512x」、
            "タイプ"： "image / png"
        }
    ]
}

コードの一部を省略できますが、必要なメンバーがいくつか残っているため、ユーザーはPWAをインストールできません。

 名前、短い名前、アイコン、ディスプレイ、start_url

name ：ホーム画面やその他のさまざまな場所でアプリのアイコンの下に表示されるアプリの名前。 nameプロパティの値は短くシンプルにしてください。

short-name ： nameプロパティの値がユーザーの画面に収まらない場合、このプロパティの値が使用されます。 short-nameは20文字未満にすることをお勧めします。実際、10人のキャラクターを撃ちます。

icons ：アプリのアイコン。さまざまなOSやデバイスの複数の画像で構成できます。ホーム画面、スプラッシュ画面などに追加するために使用するブラウザのアイコンのセットを定義できます。

たとえば、iOSだけでも、4つのデバイスに4つの異なるサイズが必要です。

iPhone：120 x 120ピクセル＆180 x180ピクセル
iPad Pro：167x167ピクセル
iPad＆iPad mini：152x152ピクセル

Google Chromeでさえ、iOSとAndroidで完全に使用するには、少なくとも2つの異なるサイズが必要です。

512x512ピクセル
192x192ピクセル

画像アイコンが呼び出されるために、一連のプロパティ、つまりsrc 、 type 、 sizesが使用されます。

src ：アイコンの画像ファイルへのパス
types ：画像ファイルタイプ
sizes ：画像の幅x高さ（ピクセル単位）

 「アイコン」：[ 
    {{
       "src"： "/imgs/icon152.png"、
       "タイプ"： "image / png"、
       "サイズ"： "192x192"
    }、
    {{
       "src"： "/imgs/icon215.png"、
       "タイプ"： "image / png"、
       「サイズ」：「512x512」
    }
]

display ：アプリの表示方法を示します。没入型でアプリのようなエクスペリエンスを実現するには、 fullscreen （UIなし）に設定することをお勧めします。ただし、 standalone 、 minimal-uiなどのオプションも利用でき、パフォーマンスの点でコストは低くなりますが、没入型のエクスペリエンスが失われるという犠牲が伴います（ステータスバーが表示される場合があります）。

start_url ：アプリケーションの開始パスを示します。 start_url値は単純である可能性があります/アプリケーションがmanifest.jsonが保存されているのと同じ.rootディレクトリから開始する場合。

オプションメンバー

本を読むことは一つのことですが、あなたがより良くしようとする余地は常にあります。以下は、より優れた、より詳細なWebアプリマニフェストのための推奨キーです。

scope ：ユーザーが移動できる範囲を制限します。ユーザーがスコープ外に移動すると、ブラウザのタブまたはウィンドウ内の通常のWebページに戻ります。 Webサイトのスコープを設定するには、 /またはWebサイトの完全なURLを入力するだけです。

注：
– scopeのデフォルトの動作は、 manifest.jsonが提供されるディレクトリです。
– Webアプリで開かれたリンクは、既存のPWAウィンドウ内にレンダリングされます。ブラウザタブでリンクを開くには、 <a>タグにtarget="_blank"を追加する必要があります。
start_urlはスコープ内にある必要があります。

background_color ：特定のアプリコンテキストの背景色を示します。具体的には、このフィールドを使用して、スプラッシュ画面の背景色を設定できます。

theme_color ：アドレスバーなどのWebアプリのUI要素のテーマの色を示します。変更はサイト全体に適用され、サイトがホーム画面から起動された場合にのみ有効になります。

注：ページレベルの構成（例：theme-colorメタタグ： <meta name="theme-color" content="#3367D6"> ）は、Webアプリマニフェストのtheme_colorの値を上書きします。

description ：これは自明のはずです。

shortcuts ：Webアプリ内のページへのショートカットを定義します。アプリのショートカットにアクセスするには、Androidでアプリのランチャーアイコンを長押しするか、タスクバー（Windows）/ドック（macOS）でアプリアイコンを右クリックします。

 「ショートカット」：[
  {{
    "名前"： "通知"、
    "url"： "/ user / notifys /"、
    「説明」：「見逃したニュース」
  }、
  {{
    "名前"： "新しい注文を作成"、
    "url"： "/ create / order"
  }、
  {{
    "名前"： "私のウィッシュリスト"、
    "url"： "/ user / wishlist"
  }
]

Webアプリマニフェストジェネレーターの使用

これを行うためのより簡単で簡単な方法は、Webアプリマニフェストジェネレーターを使用することです。ジェネレーターは入力を受け取り、それに基づいて、そのまま使用できる完全に機能するWebアプリマニフェストを生成します。

SimiCartWebアプリマニフェストジェネレーター — マニフェストジェネレーターを使用してWebアプリマニフェストを自動的に生成する

あなたのmanifest.jsonをリンクします

すべてが適切に構成されたら、次のステップはHTMLヘッダーでWebアプリマニフェストを参照することです。

 <link rel = "manifest" href = "/ manifest.webmanifest">

Webアプリのマニフェストを参照した後、サポートされているすべてのブラウザーがmanifest.json .jsonを正しく認識するようになりました。現在サポートされているブラウザの完全なリストについては、CanIUseを確認してください。

結論

これで、単純なWebアプリマニフェストは終わりです。完全に機能するmanifest.jsonを作成するのにまったく時間がかからないはずです。さらにいくつかの調整を加えるだけで、他のPWAと同じようにWebアプリをインストール可能にすることができます。