カスタムPWAスプラッシュ画面の作成
公開: 2020-08-31目次
PWAマニフェストチュートリアルで前述したように、 manifest.json内に数行のコードを含めるだけで、PWA専用のスプラッシュ画面を作成できます。 プロセスは予想されるほど複雑ではなく、実際にはすべてを短時間で実行できます。 さっそく始めましょう。
PWAのスプラッシュスクリーンの場合
構成されていない場合、PWAを開いているユーザーは、デフォルトで空白の白い画面で迎えられます。 最近のデバイスでは、アプリを開くまでの時間はほぼ瞬時であるため、これはそれ自体で問題ないはずです。 ただし、低速のデバイスでは、アプリに対するユーザーの最初の認識が損なわれるため、これが問題になる可能性があります。 1GBのRAMを搭載した低スペックのデバイスが依然として最も一般的であるという事実と相まって、あなたのブランドを代表するユニークなスプラッシュスクリーンは必須です。
独自のスプラッシュ画面を作成する方法
Androidでは、プロセスは3行のコードを入力するのと同じくらい迅速です。 ただし、iOSの場合は、画面サイズごとに異なるスプラッシュ画像サイズを作成する必要があるため、話は異なります。
アンドロイド用
手動で行う
manifest.jsonファイルで、 name 、 background_color 、 iconsの3つのプロパティが適切に構成されていることを確認します。
-
name：PWAの名前 background_color：スプラッシュ画面の背景色。 有効なCSSカラー値のみが認識されます。-
icons：最小サイズが192×192ピクセルの.pngアイコン。
たとえば、適切に構成されたmanifest.jsonは次のようになります。 iconsプロパティには4つの異なるサイズがあることに注意してください。これらの異なるサイズのアイコンは、さまざまなデバイスに最適な互換性を提供するために提供されています。
{{
"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"
}
]
} プロパティ（およびmanifest.jsonファイル）の設定が完了すると、PWA（通常はChrome）をサポートするブラウザーは、スプラッシュ画面用にさまざまなアイコンサイズを自動的に生成し、それに応じて表示します。
かなり楽ですね。 あなたが私たちに尋ねるならば、私たちはこれが開発経験がどのように感じられるべきかであると思います。
推奨読書：PWAマニフェスト：Webアプリマニフェストを簡単に作成する
マニフェストジェネレータの使用
マニフェストジェネレータを使用すると、このプロセスを簡単に自動化できます。 必要な情報を入力するだけで、ジェネレーターが必要なすべての情報を含む.zipを生成します。
iOSの場合
Appleは確かに、開発者がこのプロセスを簡単にすることを望んでいません。 これを書いている時点では、Webアプリマニフェストサポートのステータスはまだ部分的にサポートされていると記載されています—最初の登場から2年後も変更されていません。 これは、PWAがicons 、 minimal-ui 、 fullscreen 、 theme-color 、およびorientationをサポートしていないことを意味します。
幸い、これを回避する方法はまだあります。それは、 <apple-touch-startup-image>メタタグを使用することです。 理想的な解決策ではありませんが、機能します。
<！-iPhone Xのスプラッシュ画面（1125px x 2436px）-> <link rel = "apple-touch-startup-image" media = "（device-width：375px）and（device-height：812px）and（-webkit-device-pixel-ratio：3）" href = "/ apple -launch-1125x2436.png ">
<apple-touch-startup-image>メタタグを使用すると、PWAのスプラッシュ画面に固定解像度の画像（つまりstartup-image ）を指定できます。 このカスタムスプラッシュ画面は1つの画面サイズとのみ互換性があり、市場に出回っているApple製品のさまざまな画面サイズに対応するには、さらに多くのさまざまな画像サイズが必要になります。
つまり、画面サイズごとに2つのスプラッシュ画面を作成する必要があります。1つは向き（横向きと縦向き）ごとです。 リストにあるいくつかのデバイスをカバーした場合、コードは次のようになります。
<！-iPhone X（1125px x 2436px）-> <link rel = "apple-touch-startup-image" media = "（device-width：375px）and（device-height：812px）and（-webkit-device-pixel-ratio：3）" href = "/ apple -launch-1125x2436.png "> <！-iPhone 8、7、6s、6（750px x 1334px）-> <link rel = "apple-touch-startup-image" media = "（device-width：375px）and（device-height：667px）and（-webkit-device-pixel-ratio：2）" href = "/ apple -launch-750x1334.png "> <！-iPhone 8 Plus、7 Plus、6s Plus、6 Plus（1242px x 2208px）-> <link rel = "apple-touch-startup-image" media = "（device-width：414px）and（device-height：736px）and（-webkit-device-pixel-ratio：3）" href = "/ apple -launch-1242x2208.png"> <！-iPhone 5（640px x 1136px）-> <link rel = "apple-touch-startup-image" media = "（device-width：320px）and（device-height：568px）and（-webkit-device-pixel-ratio：2）" href = "/ apple -launch-640x1136.png "> <！-iPad Mini、Air（1536px x 2048px）-> <link rel = "apple-touch-startup-image" media = "（device-width：768px）and（device-height：1024px）and（-webkit-device-pixel-ratio：2）" href = "/ apple -launch-1536x2048.png"> <！-iPad Pro 10.5 "（1668px x 2224px）-> <link rel = "apple-touch-startup-image" media = "（device-width：834px）and（device-height：1112px）and（-webkit-device-pixel-ratio：2）" href = "/ apple -launch-1668x2224.png "> <！-iPad Pro 12.9 "（2048px x 2732px）-> <link rel = "apple-touch-startup-image" media = "（device-width：1024px）and（device-height：1366px）and（-webkit-device-pixel-ratio：2）" href = "/ apple -起動-2048x2732.png">
このコードをindex.htmlの<head>にリンクし、PWAの動作を有効にするために、下に<meta>タグを挿入することを忘れないでください。そうしないと、スプラッシュ画面がまったく機能しません。
<meta name = "apple-mobile-web-app-capable" content = "yes">
これで、すべての設定が完了しているはずです。 iOS PWAを起動すると、スプラッシュ画面が表示されます。
iOSスプラッシュスクリーンジェネレーターの使用
もちろん、このプロセスを自動化するためのより良い方法があります。それは、iOSスプラッシュスクリーンジェネレーターを使用することです。 画像をソースとして、ジェネレーターは、 index.htmlに挿入する必要のあるHTMLコードとともに、さまざまなサイズの画像を生成します。
結論
オンボーディングエクスペリエンスの一部ではありませんが、スプラッシュスクリーンは、ブランドの肯定的な認識を生み出す上で重要な役割を果たします。これは、予想外の結果をもたらす可能性のある、手に負えない成果です。
このチュートリアルがあなたの正確な問題を解決することを願っています。 PWAの実装とカスタマイズは、あなたとあなたのチームがPWAの経験があまりない場合、頭痛の種になる可能性があります。 SimiCartのようなプロのPWA開発ソリューションは、それをはるかに簡単にするのに役立ちます。