[レベル: 上級]
PWAをサポートしていないブラウザでもホーム画面アイコンを追加できる仕組みとして、PWACompat を Google は公開しました。
PWACompat を構成すると、Web App Manifest を解釈しないブラウザために、関連する meta タグや link 要素を自動的に挿入してくれます。
PWACompat で iOS 版 Safari にもホーム画面アイコンを追加
iOS 版 Safari は Service Worker のサポートに着手しましたが、完成にはまだほど遠い状態です。
たとえば、Web App Manifest（マニフェスト ファイル）によるホーム画面アイコン追加の機能をまだサポートできていません。
iOS にホーム画面アイコンを追加させようとしたら、link rel="apple-touch-icon" のようなタグを別途追加する必要があります。
加えて、各サイズのアイコン画像の設定用・レイアウト指定用の link 要素も追加する必要があります。
PWACompat はこうした追加の作業を省くことができるのです。
PWACompat の実装方法
PWACompat の実装方法は簡単です。
2つのコードを追加するだけです。
まず、次の link 要素を挿入します。
<link rel="manifest" href="manifest.webmanifest" />
link 要素なので通常は head セクション内になりますかね。
そして、次の JavaScript を挿入します。
<script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.6/pwacompat.min.js"
integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA"
crossorigin="anonymous"></script>1つ目の link 要素よりも後であれば場所はどこでも構いません。
このコードによって PWACompat を実装すると、iOS 版 Safari や古いブラウザのために必要なアイコンやファビコン、カラー、スタートアップモードなどの要素がすべて自動的に作成されます。
具体的には、次の処理をします。
- マニフェストにあるすべてのアイコンに対応した meta icon タグを作成
- さまざまなブラウザに対する、ウェブアプリの開き方を指定するためのフォールバック用の meta タグを作成
- マニフェストに基づいたテーマカラーの指定
特に、iOS 版 Safari のためには次のようなことを PWACompact はやってくれます。
standaloneとfullscreen、minimal-uiのディスプレイモード指定に必要なapple-mobile-web-app-capableを設定apple-touch-icon用の画像を作成- スプラッシュスクリーン用のダイナミックスプラッシュ画像の作成
PWACompact の詳細はデベロッパーサイトで解説されています。
Airhorner と Emojityper がすでに実装しているとのことなので、PWACompact の動きを実装前に体験してみるのもいいでしょう。
ホーム画面アイコンは PWA の代表的な機能です。
シンプルなわりに大きな効果を期待できます。
PWA を実装しているならぜひ試してみましょう。