apple-mobile-web-app-capableの挙動について

2013/09/11 20:45:15

通常のWebページを、Safariではなく独自のアプリっぽい見せ方で表示できるという噂のプロパティです。

ただこのプロパティ、情報なさすぎや・・・。
とりあえずわかったことのメモ。

設定するには、以下を指定。

<meta name="apple-mobile-web-app-capable" content="yes">

iPhone5の場合、あわせて以下を指定。

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

キモは、widthの指定をしていないところと、initial-scale=1なところ。
こうしないと、iPhone5では上下のセンター寄せみたいになります。

使う分にはコレだけです。

上記設定でフルスクリーン化しているときは、

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

このプロパティで、唯一残存するステータスバーの色や挙動を変えられます。

つぎ。

このフルスクリーン状態は、以後便宜上「スタンドアロンモード」と呼称します。

聞くところによると、

なのですが、これがどうやら仕様が変わっているぽい。

手元で試したところだと、一旦スタンドアロンモードに入ってしまえば、
"同一オリジン"ならスタンドアロンモードが継続する、模様。
・・・まじか！w

そしてそして、

location.href = 'http://www.google.com/'

まさかのこれも同じくスタンドアロンモード継続。

調べてみたところ、
別オリジンへ向いたanchorタグを直接踏む"以外"なら、スタンドアロンモードが継続するっぽい。
たぶんformもアウトですね、たぶん。
サーバーサイドでリダイレクトするにしても、上記の通りjsで遷移するにしても、直接踏まなければOKっぽい。

うーん、要検証。

ページ読み込みが完了しない間際にリンクを連打したりすると、同一オリジンであってもSafariが立ち上がってきたり、よーわからんです。

window.navigator.standalone

これがスタンドアロンモードではtrueになる。
一旦スタンドアロンモードになっていれば、例のmetaタグがなくてもtrueが返る。

そして、これは実機でしか取れない・・・。

リロードもできないので404系のエラーとか、jsのエラーでアンコントローラブルになってしまうと、本当にツミマス。
自サイトは徹底的に導線精査して解決するにしても、完全に他サイトに行かれてしまうと、もちろん戻るリンクなんて存在しないので、サヨナラです。

iOS7のSafari対策として使えそうで使えないようで使える・・うーん。

リンク、置いておきます。

iOS7 Pre-Releaseのドキュメント(要AppleID)：Safari Web Content Guide

通常iOSのドキュメント：Safari Web Content Guide