webclip から url scheme でパラメータを渡してアプリを起動する
ユースケース
- エンドユーザーに任意のページを webclip してもらう
- エンドユーザーはiOSホーム画面に webclip されているページを Safari の standalone モードで起動する
- そのままネイティブアプリにディープリンクでリダイレクト
- その際に 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