俺、サービス売って家買うんだ

Swift, Kotlin, Vue.js, 統計, GCP / このペースで作ってればいつか2-3億で売れるのがポっと出来るんじゃなかろうか

webclip から url scheme でパラメータを渡してアプリを起動する

f:id:ie-kau:20161220143209p:plain:w300


ユースケース

  1. エンドユーザーに任意のページを webclip してもらう
  2. エンドユーザーはiOSホーム画面に webclip されているページを Safari の standalone モードで起動する
  3. そのままネイティブアプリにディープリンクでリダイレクト
    • その際に url scheme を利用してパラメータをネイティブアプリに渡す

どういうメリットがあるか?

これにより webclip のURLに仕込んであるパラメータをアプリに渡せ、直接該当アプリの対象画面をパラメータ付きで開くことができます。
既に該当するアプリはユーザーのiOS端末にインストールしてあることが前提ですが、検索結果経由のurl scheme起動ではなく、まるでネイティブのアプリを開くかのように webclip から該当のアプリケーションの対象となる画面を開くことができるようになります。

Web側

<meta name="apple-mobile-web-app-status-bar-style" content="black" />                
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="[touchアイコンへのパス]">

以前は、下記記述でスプラッシュ画像を表示できたのですがiOS9からはできなくなったようです。

<link rel="apple-touch-startup-image" href="[スプラッシュ画像へのパス]">

standalon モードで起動した場合はwindow.navigator.standaloneがtrueになるので、 webclip からの起動と判断でき、それを条件に該当アプリにリダイレクト。

if (("standalone" in window.navigator) && window.navigator.standalone) {
  location.href = 'test_app://?id=1
}

スプラッシュ画像っぽくwebclipから起動した画面を見せたい場合は、こんな感じにすればいいかと。
※雑です。

  <head> 
-- 省略 --
  <style>
    body {
      width: 100%;
      height: 100%;
    }
    body > div {
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: cover;
    }
  </style>
  </head> 
  <body>
    <div style="background-image:url([スプラッシュ画像代わりの画像のパス])"></div>
  </body>
// ※要 jQuery
  $('body > div').hide();
  $(window).on('load', function() {
    if (('standalone' in window.navigator) && window.navigator.standalone) {
      var img = new Image();
      img.onload = function() {
        $('body > div').fadeIn(300, function() {
          setTimeout(function() {
            location.href = 'test_app://?id=1
          }, 500);
        });
      }
      img.src = '[スプラッシュ画像代わりの画像のパス]';
    }
  });

アプリ側

通常通り url scheme が使えるようにしておきます。
info.plist > URL types

f:id:ie-kau:20161218173028p:plain

参考