読者です 読者をやめる 読者になる 読者になる

黄色は止レマ

エッセイあるいはただの戯言

iOSのwebアプリモードでの注意点

その他

引越しのドタバタで全然更新できていません・・・。
溜まっているネタはまた今度にして、今回は仕事の備忘録です。iOSのwebアプリモードですね。
正直言って、誰がこの機能を使うんだろう・・・という気がしてなりませんが。

metaタグの設定

webアプリモードの設定

<meta name="apple-mobile-web-app-capable" content="{yes,no}">

上記のmetaタグを設定した状態でブラウザからホーム画面へショートカットを登録し、そのショートカットから遷移した際にwebアプリモードが適用される。

ステータスバーの表示設定

<meta name="apple-mobile-web-app-status-bar-style" content="{default,black,black-translucent}">
  • default -> 不透明で表示
  • black -> 不透明(黒)で表示
  • black-translucent -> 半透明で表示 ※未設定の場合はdefaultになる

jsでの処理分け

if( window.navigator.standalone ) {
    // ホーム画面から立ち上げました
} else {
    // ブラウザからアクセスしました
}

webアプリモードを実装する際の注意点

通常のリンクはSafariへ遷移してしまう

->要素は一ページに収めるか、遷移処理はjsで行う

戻るボタン・更新ボタンが無くなってしまう

->要件によって自前でボタンを実装する必要あり

webアプリモードとSafariは別物

->恐らくwebviewと同等の表示。Safariで発生するバグがwebアプリモードでは出なかったりする。逆もまた然り。
私が見た限りでは、iOS9.3時点で、iOS7時代のSafariのバグがwebアプリモードで発生していました。


要チェックポイントとしては、jsの処理訳方法と、webアプリモードとSafariは別物というところですかね。

おおよその情報は丸の内テック様の記事を参考にさせて頂きました。

丸の内テック
http://marunouchi-tech.i-studio.co.jp/1434/