【JavaScript】「iPhone iOS ホームボタン ホーム画面 追加」での諸注意まとめ
すげぇややこしい…
- 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);