LoginSignup
5

More than 1 year has passed since last update.

ブラウザショートカットとしてのA2HS

Last updated at Posted at 2021-12-05

mediba Advent Calendar 2021の5日目です。

「WebサイトへのショートカットをOSのホーム画面へ追加可能する」施策を検討しておりまして、私自身がホーム画面追加(Add to home screen/A2HS)における実装方法やブラウザ挙動についてよく理解していなかったため、いくつかのブラウザで検証してみました。

ホーム画面追加とは

PWAにおけるホーム画面追加は「Webアプリ扱いでのインストール」と「ブラウザショートカット追加」の2つのモードがありますが、今回はあくまでブラウザ利用の延長として考えていたため、この記事では後者の実装について触れています。

ブラウザが対応していれば、メニューから操作することでmanifest.jsonで指定された固定のURL・タイトル文字・画像URLでホーム画面へのショートカット追加が可能となります。

メニューとしての表示

今回は「ホーム画面に追加」と表示されていますが、一定の条件を満たすとアプリ扱いになり「アプリをインストール」と表示されます。

cap.png

ホーム画面追加後の表示

manifest.jsonで指定した任意のタイトル文字、遷移先URL、画像が設定され、Androidであれば対応するブラウザのロゴも重なって表示されます。

Screenshot_20211204-211755_One UI Home.jpg

icons配列の各オブジェクトで"purpose": "maskable"と指定することで、上記画像の左側のようにマスクを掛けることもできます。
https://web.dev/maskable-icon/

ホーム画面に追加するだけの場合にPWAと言っていいのかわかりませんが、ブラウザはWeb App Manifestを解釈しているようですので、いったんPWAとしておきます。

manifest.jsonの有無による挙動の違い

さて、manifest.jsonで"display":"browser"としてiOS Safari、Chrome for Android v96、Firefox for Android v94で検証してみたところ、以下のような挙動となりました。

タイトル文字の参照

iOS Safariはapple-mobile-web-app-titleに対応していますが、manifest.jsonにshort_name指定があればそちらが優先されます。

manifest.jsonが無い場合 manifest.jsonで指定した場合
iOS Safari metaタグのapple-mobile-web-app-title manifest.jsonのshort_name
Chrome for Android titleタグ manifest.jsonのshort_name
Firefox for Android titleタグ titleタグ ※

遷移先URLの参照

iOS SafariとChrome for Androidは同じ挙動となりました。
manifest.jsonでstart_urlを指定することでURLを固定させることができます。

manifest.jsonが無い場合 manifest.jsonで指定した場合
iOS Safari ホーム画面追加時のlocation.href manifest.jsonのstart_url
Chrome for Android ホーム画面追加時のlocation.href manifest.jsonのstart_url
Firefox for Android ホーム画面追加時のlocation.href ホーム画面追加時のlocation.href ※

アイコン画像URLの参照

iOS Safariの場合はmanifest.jsonのiconsが反映されず、apple-touch-icon-precomposedで指定された画像が固定で読み込まれるようでした。

manifest.jsonが無い場合 manifest.jsonで指定した場合
iOS Safari linkタグのapple-touch-icon-precomposed linkタグのapple-touch-icon-precomposed
Chrome for Android linkタグのapple-touch-icon-precomposed manifest.jsonのicons配列
Firefox for Android linkタグのapple-touch-icon-precomposed linkタグのapple-touch-icon-precomposed ※
※Firefoxではdisplayがbrowserの場合にはmanifest.jsonの内容が反映されません。
※ブラウザショートカットに限定すればServiceWorkerは不要となります。

というわけで

ブラウザショートカットとしてのA2HSを設定するには最低限以下の内容で実装すれば良さそうです。

・manifest.jsonを設定

アイコン画像URL、遷移先URL、タイトル文字列、表示モード(display)、アイコンのマスクの有無を指定します。

今回は"display":"browser"としていますが、前述したようにFirefoxはbrowserの場合にmanifest.jsonを参照しないため、Firefoxも含める場合にはminimal-ui等を検討してもいいかもしれません。

{
  "icons": [
    {
      "src": "/img/icon_192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/img/icon_512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "name": "アプリ名",
  "display": "browser",
  "short_name": "アプリ名",
  "start_url": "/?ref=a2hs"
}

start_urlで任意のURLパラメータを指定することで、アクセス解析等でホーム画面経由でのユーザー数を計測できるようになります。

・HTMLからmanifest.jsonの参照

各ページのhead内でmanifestを読み込みます。

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

・linkタグでアイコン画像を指定

iOS Safari向けにapple-touch-icon-precomposedで画像URLを別途指定します。

<link rel="apple-touch-icon-precomposed" href="/img/icon_192.png">

おわりに

今回調査するまで、そもそもiOS Safariがmanifest.jsonを参照していることを知りませんでした。can i useを見る限りiOS11.3からブラウザショートカットとしてのA2HSに対応していたようです。

ホーム画面追加だけを意識してmanifest.jsonを設定することはあまりないと思いますが、アイコン画像や飛び先URLを設定できるので忘れずに指定しておくとよさそうです。

※後日、A2HS対応の効果検証を別記事にしました。

参考URL

Webアプリインストールも含めたA2HS全体の細かい仕様は以下のページが参考になります。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5