ウェブアプリの設計、コードと Service Worker の作成が完了しました。最後に、ウェブアプリ マニフェストを追加して、ユーザーのデバイスに「インストール」したときの動作を記述しました。たとえば、スマートフォンのランチャーやアプリ スイッチャーなどに使用する高解像度のアイコンや、ユーザーのホーム画面から開いたときのウェブアプリの起動方法などです。
多くのブラウザではウェブアプリ マニフェストが優先されますが、指定したすべての値がすべてのブラウザで読み込まれ、尊重されるとは限りません。ここでは、ウェブアプリ マニフェストを取得して、さまざまなサイズのアイコン、ファビコン、起動モード、色などに関連する meta タグまたは link タグを自動的に挿入するライブラリである PWACompat を使用します。
これにより、標準のタグや標準以外のタグ（<link rel="icon" ... /> や <meta name="orientation" ... /> など）をページに追加する必要がなくなります。また、iOS ホーム画面アプリの場合、PWACompat はスプラッシュ画面を動的に作成するため、画面サイズごとに生成する必要はありません。
PWACompat の使用
PWACompat を使用するには、すべてのページでウェブアプリ マニフェストにリンクします。
<link rel="manifest" href="manifest.webmanifest" />
次に、このスクリプトを含めるか、非同期読み込みバンドルに追加します。
<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>
PWACompat は、マニフェスト ファイルを取得して、ユーザーがモバイル デバイスかデスクトップかに関係なく、ユーザーのブラウザに必要な処理を実行します。
その場合でも、検索インデックスに登録するために、高品質のショートカット アイコンを 1 つ以上追加することをおすすめします。
<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />
詳しくは、ベスト プラクティスをご覧ください。
<script type="module">
// detect iOS Safari
if (('standalone' in navigator) && (!navigator.standalone)) {
import('https://unpkg.com/pwacompat');
}
</script>
詳細
サポートされているブラウザで、PWACompat は実際に何を行いますか。PWACompat は、ウェブアプリ マニフェストを読み込み、次の処理を実行します。
- マニフェスト内のすべてのアイコンにメタタグを作成する（ファビコン、古いブラウザなど）
- さまざまなブラウザ（iOS、WebKit、Chromium のフォークなど）用に、ウェブアプリを開く方法を示す代替メタタグを作成します。
- マニフェストに基づいてテーマカラーを設定します。
Safari の場合、PWACompat は次の機能も備えています。
- 表示モード
standalone、fullscreen、minimal-uiでapple-mobile-web-app-capable（ブラウザの Chrome なしで開く）を設定する apple-touch-icon画像を作成し、透明なアイコンにマニフェストの背景を追加します。追加しない場合、iOS は透明度を黒としてレンダリングします- Chromium ベースのブラウザ用に生成されたスプラッシュ画像にほぼ一致する動的なスプラッシュ画像を作成します。
その他のブラウザ サポートへの貢献や、その他のブラウザ サポートへのご協力が必要な場合は、PWACompat が GitHub に用意されています。
試してみる
PWACompat は、Airhorner、v8.dev、Emojityper で公開されています。サイトのヘッダー HTML はシンプルにすることができます。マニフェストを指定するだけで、残りは PWACompat に処理させることができます。
📢🤣🎉