relux iOSアプリでディープリンク対応
relux iOSアプリでディープリンク対応を行いました。
ちょうどiOS9.3がリリースされたあとに着手しはじめ、
iOSの不具合でUniversalLinksが全く動かずかなりハマりました。
ブラウザがまともに動かず悩まされた人も多いのではないでしょうか？
今回はディープリンクを以下と定義し対応方法を紹介したいと思います。
- Universal Links
- Facebook App Links
Universal Linksとは？
iOS9から導入された仕組みです。
Universal Linksでは通常のURLから直接アプリを起動することができるようになります。
- アプリがインストール済：アプリが開く
- アプリが未インストール：Webページが開く
CustomURLSchemeではSafariを経由してアプリを起動しますが、
Universal Linksではアプリにシームレスに遷移するのでUXがかなり改善されます。
また、CustomURLSchemeとは違いschemeが衝突する心配もありません。
実際の画面はこのような動きになります。
Googleの検索結果からアプリを起動しています。
Facebook App Linksとは？
Facebookアプリから直接アプリを起動することができるようになります。
Universal LinksはiOS9以降のみ対応ですが、こちらはそれ以前のOSでも動作します。
- アプリがインストール済：アプリが開く
- アプリが未インストール：AppStoreが開く
App Links - 参考資料 - 開発者向けFacebook
実際の画面はこのような動きになります。
Facebookからアプリを起動しています。
対応するページ
reluxの旅館・ホテルの施設詳細ページのみ対応しました。
Facebook, Instagram, Twitter などのSNSでURLがシェアされた際に
アプリが起動されることを想定しています。
※2016年4月現在
サーバサイドの対応
apple-app-site-associationファイルを作成してルート直下に配置します。
Universal Links
apple-app-site-associationファイル
{
"applinks": {
"apps": [],
"details": [
{
"appID": "4M2H9MG272.com.loco-partners.relux",
"paths": [
"/2????/",
"/5????/"
]
}
]
}
}appID: TeamID + BundleIndentifierの組み合わせです。
paths: 対応するパスを記載します。
施設詳細のURLは
https://rlx.jp/20000/ もしくは https://rlx.jp/50000/ のように2または5からはじまる5桁の数字と決まっています。
パスは一般的な正規表現には対応していないので "2????", "5????" としました。
ポイント
Facebook App Links
WebページにMETAタグを入れる必要があります。
<meta property="og:url" content="https://rlx.jp/27500" /> <meta property="og:image" content="https://s3-ap-northeast-1.amazonaws.com/relux/img/hotelpictures/RP27500_1046.jpg" /> <meta property="og:site_name" content="relux" /> <meta property="fb:app_id" content="482299358457316" /> <meta property="al:ios:url" content="rlx://hotels/27500/" /> <meta property="al:ios:app_store_id" content="843104033" /> <meta property="al:ios:app_name" content="relux" />
al:ios:url CustomURLSchemeを指定
al:ios:app_store_id AppleIDを指定
al:ios:app_name アプリ名を指定
ポイント
- FacebookDebuggerで警告がでているとうまく動作しません
- METAタグが存在しない状態でキャッシュされると動作しません
iOSアプリ側の対応
Capabilitiesの設定
Associated DomainsのDomainsを設定します。
applinks:url という形で指定します。
Universal Links
- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler { if ([userActivity.activityType isEqual:NSUserActivityTypeBrowsingWeb]) { int hotelId = [self matchHotelId:userActivity.webpageURL pattern:UNIVERSAL_LINKS_PATTERN]; if (hotelId) { [self pushHotelDetailViewController:hotelId]; } else { [application openURL:userActivity.webpageURL]; return NO; } } return YES; }
ポイント
- ActivityTypeはNSUserActivityTypeBrowsingWebになります
- 対応しないURLの場合は openURL でブラウザを開いたほうが良いです
Facebook App Links
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation { if ([url.scheme isEqualToString:CUSTOM_URL_SCHEME]) { int hotelId = [self matchHotelId:url pattern:CUSTOM_URL_SCHEME_PATTERN]; if (hotelId) { [self pushHotelDetailViewController:hotelId]; return YES; } } return NO; }
ポイント
- CustomURLSchemeに関する実装がされていれば、追加で実装する必要はありません
