【JavaScript】「iPhone iOS ホームボタン ホーム画面 追加」での諸注意まとめ

jiraisurfer

すげぇややこしい…

  • iOS、iPhoneでしか現状利用できないっぽい？
    →AndroidでもChromeならなんとかなるっぽいけど普及度的に…
  • ホームに入れたか入れてないかの判定はフロントだけでは難しい。ただしホーム画面のときだけ利用できるフルスクリーンモード（スタンドアローンモード？<head>内に<meta name=”apple-mobile-web-app-capable” content=”yes” />を入れたWebページをホーム画面から起動した際に利用が可能）ではJSの「window.navigator.standalone」がtrueになるので判別が可能
  • フルスクリーンモードになるのは嫌という場合、「ホームに入れたか入れてないかの判定」がフロントだけでは困難なので、例えばホーム画面の追加を促すホップアップ（bookmark_bubble.jsなど）を実装していた場合、追加済のユーザーにも表示されてしまう問題がある。
  • 逆にフルスクリーンモードでは、「JSの処理が遅くなる」「通常版SafariのCookieやlocalStorageなどを利用できない（あくまで別ブラウザのような振る舞いをする」「普通にaタグでリンクすると通常版SafariにジャンプしてしまうのでJS側での制御が必須」など問題が山積み

どうするか

例えばフルスクリーン登録用の画面を作って、そこのURLをワンタイムセッションみたいな扱いとし、24時間以内にフルスクリーンモードでそのURLが開かれたらセッションを引き継ぐ（＋ホーム画面に追加したフラグをサーバ側で持っておく？）といった処理が必要になるかもしれない

aタグでのリンクが全て標準版Safariに遷移してしまう

こんな感じのJSを読み込んでおく

(function($) {
    $(function(){
        //ホーム画面対策
        if(("standalone" in window.navigator) && window.navigator.standalone) {
            //ページ内のaタグ群を取得。aTagsに配列として代入。
            var aTags = $('a');
            //全てのaタグについて処理
            aTags.each(function(){
                //aタグのhref属性からリンク先url取得
                var url = $(this).attr('href');

                if(url) {
                    //念のため、href属性は削除
                    $(this).removeAttr('href');
                    //クリックイベントをバインド
                    $(this).click(function(){
                        location.href = url;
                    });
                }
            });
        }
    });
})(jQuery);

参考：https://creativeweb.jp/archive/8633/

JSでwindow.open的なものをしても、新しいウインドウで表示されない

window.openさせたいタイミングで、以下のようなコードを走らせれば良い

JQuery（安定していないかも）

//window.open('http://google.com/');

var $a = $("<a></a>", {
    href: "http://www.nicovideo.jp/watch/"+videoId,
    target: "_blank",
});
$a[0].click()

JavaScript

//window.open('http://google.com/');

var a = document.createElement('a');
a.setAttribute("href", 'http://google.com/');
a.setAttribute("target", "_blank");

var dispatch = document.createEvent("HTMLEvents");
dispatch.initEvent("click", true, true);
a.dispatchEvent(dispatch);