iphone
Development

[iOS] ホーム画面に追加したWebアプリのリンクをSafariに飛ばさない方法

今回はiOSの話と言ってもネイティブアプリじゃなくWebアプリの方です。

iOSのSafariに「ホーム画面に追加」というオプションありますよね。
フルスクリーンで見せたかったりするときは使うべしなんですが、困ったことにリンクをタップすると通常のSafariに戻されるんですよね…

まぁフルスクリーンなので戻るボタンとか無いからの配慮なんでしょうけど、ユーザーはinterruptされるし、フルスクリーンで統一できなくなっちゃうし正直うざいです。

対策その1:Ajaxで逃げ切る

対処法の1つとしてページの内容をXHRでとってきて書き換えればページ遷移は起こりませんよね。

$(document).on('click', 'a', function(e) {
  var $a = $(e.target);
  if (!$a.attr('href').match(/^#/)) {
    e.preventDefault();
    $.get($a.attr('href'), function(data) {
      var $body = $('body');
      $body.children().remove();
      $body.append($(data));
    })
  }
});

試してないけど多分こんなかんじでしょうか。
でもこれだとサーバーサイドも合わせなくちゃいけなくてめんどくさいなーとか、ページ遷移したと見せかけてwindowのonloadイベントとか発火されないし $(document).ready() みたいのは動かないですよね。

対策その2(おすすめ):一旦preventDefaultしてからのlocationに突っ込む

でたどり着いたのがこれです。
どうやら一旦preventDefaultしてしまったらページ遷移してもSafariに飛ばされないみたいです。

$(document).on('click', 'a', function(e) {
  var $a = $(e.target);
  if (!$a.attr('href').match(/^#/)) {
    e.preventDefault();
    window.location = $a.attr('href');
  }
});

いい感じに動いてます

標準