[レベル: 上級]

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 はやってくれます。

  • standalonefullscreenminimal-ui のディスプレイモード指定に必要な apple-mobile-web-app-capable を設定
  • apple-touch-icon 用の画像を作成
  • スプラッシュスクリーン用のダイナミックスプラッシュ画像の作成

PWACompact の詳細はデベロッパーサイトで解説されています。

AirhornerEmojityper がすでに実装しているとのことなので、PWACompact の動きを実装前に体験してみるのもいいでしょう。

ホーム画面アイコンは PWA の代表的な機能です。
シンプルなわりに大きな効果を期待できます。

PWA を実装しているならぜひ試してみましょう。

このエントリーが役に立ったらシェアしてください

[Ads & Featured Articles]

海外SEO情報ブログTOPモバイルSEO › iOS版Safariにホーム画面アイコンを簡単に追加できるPWACompat

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


▲ページの一番上に戻る