Webアプリマニフェストのdisplayによる違い

Webアプリのインストールバナーを表示するためにはマニフェストファイルが必要ですが、中身にも決まりがあります。

Google Developers の「ウェブアプリのインストール バナー」では、必要なメンバ(キーと値の組み合わせ)として、

  • short_name(ホーム画面で使用)
  • name(バナーで使用)
  • 192×192 の png アイコン(アイコンの宣言には MIME タイプ image/png の指定が必要)
  • 読み込み先の start_url

が挙げられています。前回書いたのは、これに従ったマニフェストです。

でも、これって実は「こうしないとインストールバナーを表示しないよ」よりも、「インストールバナーを表示するときに使われるのはこれだよ」に近い意味なのではないかと思います。

というのは、これだけだとインストールバナーは表示されないようだからです。

Webアプリマニフェストの書き方の資料としては、Google Developers の「ウェブアプリ マニフェスト」 というのがあって、その中に「起動時のスタイルを指定する」という節があります。

display” について説明している節なのですが、インストールバナーを表示するにはこれも必要らしいのです。

display” が取ることのできる値は、MDN Web Docs の「Web App Manifest」に詳しい説明があります(ウェブアプリマニフェストからもリンクされてます)。

fullscree“, “standlone“, “minimal-ui“, “browser“, と4つあるのですが、実際にどうなるのか検索してみてもなかなかヒットせず、今ひとつピンときません。なので、テストページを自作してみました。

リンクをスマホで開くと、たぶん「ホーム画面に追加」のバナーが表示されると思います。メニューからホーム画面に追加しても構いません。

fullscreenは、動画やゲームで使われるようなフルスクリーン表示で起動します。

画面上端の通知エリアと、画面下端のナビゲーションボタン(戻る・ホーム・履歴の各ボタン)は消えますが、画面外から画面内に向かって上または下にスワイプすれば一時的に表示されます。

でも、知らない人だと「終われない!」ってパニクっちゃいますよね。WordPressに限らず、ブログには指定しないほうがいいです。海外SEO情報ブログさまはfullscreenだったりしますけど、それはサンプルの意味もあるということで。

なお、テストページには気休め的にJavaScriptの window.close() を実行するリンクを付けてみたのですが、動作しない場合もあるみたいです。たぶん、画面の移動が発生した後だと効きません。

standaloneは、ネイティブアプリと同様の外観になります。

通知エリアとナビゲーションボタンは表示されますが、これもブログには向いてないように思います。「進む」が表示されないと、回遊率に影響しちゃいそうです。行きはよいよい帰りは怖い的な。

minimal-uiは、テストページを作成する前は謎の存在で、やってみてから分かった(というか調べた)のですが、いわゆる「アプリ内ブラウザ」と同じになるみたいです。以下のjuggly.cnさまの記事が分かりやすいです。

Android用Chrome 63に新しいWEBアプリの表示モード「Minimal UI」が導入 | juggly.cn

standaloneとの違いは、ブラウザっぽいインターフェイスが表示される点です。ページのURLが表示されて(編集は不可)、メニューボタンから「進む」などを実行できます。なお、古いChrome(62以前)はminimal-uiに対応してないので、browserにフォールバックするはずです。

そのbrowserは、一番意外な結果になりました。リファレンスではブラウザと同じ外観になると説明されていますが、実際はそうではなくて、「Webアプリ扱いせずにブラウザで表示する」でした。

browser以外の三つは、指定するとWebアプリになります。ホーム画面に追加するとインストールが行われて、アプリの一覧に表示されますし、アンインストールも行えます(というか、削除するにはアンインストールしないといけません)。

一方、browserは指定してもWebアプリにならず、インストールバナー自体が表示されません。手動でホーム画面に追加してもアプリの一覧には表示されず、ホーム画面から起動するとChromeで開きます。Webアプリマニフェストがない場合と同じです。

browser指定時にWebアプリ扱いされないのは、どうやらChromeの仕様らしいです。開発ツールで “Audits” からPWAの検証を実行すると(Lighthouse)、 “Manifest’s `display` value is not one of: minimal-ui | fullscreen | standalone” と警告されます。

Webアプリマニフェストの仕様に沿ってないChromeの独自仕様になっちゃうんじゃないの的な議論もあったようですが、minimal-uiが追加されたからいいじゃんて感じになったっぽい?

というわけで、インストールバナーを出したい場合、Webアプリマニフェストにはdisplayが必要で、browser以外の値を指定しないといけない、ということになります。

でも、どんな環境でも表示されるかというと、そうではないのでした。つづく。

コメントを残す

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