ReactNative Firebase Dynamic Links導入

# Dynamic Links
Dynamic LinksはFireBaseが提供しているディープリンク(リンクからアプリを起動して特定ページまで直接遷移させるやつ)を実現するためのサービス。
Dynamic LinksをReactNativeに導入する手順を書いていきます。

Firebaseのセットアップは[初期のセットアップ](https://rnfirebase.io/docs/v5.x.x/installation/initial-setup)を参照してください。


## iOS
### Pods
```:Podfile
pod 'Firebase/DynamicLinks', '~> 5.11.0'
```
今回は上記バージョンですが、適宜バージョンは変更してください。

```terminal
$ pod update
```
### RN Firebase Linksのインポート
```appName/AppDelegate.m
#import "RNFirebaseLinks.h"
```
`@implementation AppDelegate` 以下に

```appName/AppDelegate.m
- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
            options:(NSDictionary<NSString *, id> *)options {
    return [[RNFirebaseLinks instance] application:application openURL:url options:options];
}

- (BOOL)application:(UIApplication *)application
continueUserActivity:(NSUserActivity *)userActivity
 restorationHandler:(void (^)(NSArray *))restorationHandler {
     return [[RNFirebaseLinks instance] application:application continueUserActivity:userActivity restorationHandler:restorationHandler];
}
```

### XCode
`Info`タブのURL TypesのIdentifierを一意の値に設定、下記のようにする。
![スクリーンショット 2019-03-10 21.51.02.png](https://qiita-image-store.s3.amazonaws.com/0/173323/12226d09-13b5-e3b8-0e2a-d00f80ca4335.png)

`Capabilities`タブで、Associate Domainを有効にして、次のように `applinks:設定したdomain(後述)`のように設定。
![スクリーンショット 2019-03-10 20.59.06.png](https://qiita-image-store.s3.amazonaws.com/0/173323/e5136cf8-9705-01ec-1b1c-2116dc3c605c.png)


## Android
### 依存関係の設定
こちらもバージョンは適宜設定してください。

```gradle:android/app/build.gradle
implementation "com.google.firebase:firebase-invites:16.0.4"
```

### RNFirebaseLinksPackageの追加
```java:android/app/src/main/java/com/appName/MainApplication.java
import io.invertase.firebase.links.RNFirebaseLinksPackage; // 追加
// ...
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        // ...
        new RNFirebaseLinksPackage() // 追加
      );
    }
// ...
```

### intent-filterの追加
```xml:android/app/src/main/AndroidManifest.xml
<intent-filter>
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.DEFAULT"/>
    <category android:name="android.intent.category.BROWSABLE"/>
    <data android:host="example.page.link" android:scheme="http"/>
    <data android:host="example.page.link" android:scheme="https"/>
</intent-filter>
```

## Firebaseコンソール
Firebaseのコンソール画面でサイドバーのDynamic Linksで新しいURL接頭辞を作成したあと、リンクを作成していきます。
### 新しいダイナミックリンクを作成
![スクリーンショット 2019-03-10 20.54.22.png](https://qiita-image-store.s3.amazonaws.com/0/173323/8d520b6e-ff54-4dbe-dbb8-fe63d0c635ca.png)
### 短縮URLを作成
あとでわかりやすいやつを適当に設定します。
![スクリーンショット 2019-03-10 22.02.52.png](https://qiita-image-store.s3.amazonaws.com/0/173323/17a133fb-f9fd-a9a3-5632-e30fcb852cba.png)

### ダイナミックリンクの設定
キャプチャに書いてあるとおりですが、ディープリンクURLはPCでリンクを踏んだ場合に飛ばしたり、モバイルでもアプリが入っていない場合に飛ばす先のurlになります。
![スクリーンショット 2019-03-10 20.55.51.png](https://qiita-image-store.s3.amazonaws.com/0/173323/25ae44db-d559-85c8-2e40-f9c01e3e9e17.png)

### iOS用のリンク設定
iOS端末でリンクを踏んだ時の設定です。
ブラウザディープリンクのURLを開くを選択した場合は↑で設定したページに飛びます。
ディープリンクでiOSアプリで開く選択をした場合は、選択したアプリのApp Storeに飛ばすような処理や、カスタムURLを設定でき、そこに飛ばすような処理が可能になります。
![スクリーンショット 2019-03-10 20.56.07.png](https://qiita-image-store.s3.amazonaws.com/0/173323/3af013a1-f3a8-152d-7bf4-46819f60125a.png)

### Android用のリンク設定
iOS同様、アプリが入っていないときにGooglePlayに飛ばしたり、カスタムのurlを設定できます。
![スクリーンショット 2019-03-10 20.56.16.png](https://qiita-image-store.s3.amazonaws.com/0/173323/0c3c4bb9-eacb-be04-4ef3-da13f7021e43.png)

### オプション
今回はプレビューページをスキップするのみチェックしましたが、これも適宜設定してください。
![スクリーンショット 2019-03-10 20.56.32.png](https://qiita-image-store.s3.amazonaws.com/0/173323/b41da12f-a112-1a8a-19b9-06c7be41678d.png)

# Methods
[invertase/react-native-firebase-docs](https://github.com/invertase/react-native-firebase-docs/blob/master/docs/links/reference/links.md)
以下、ReactNative側での記述になります。

## getInitialLink
作成したリンクからアプリが開かれた場合、getInitialLinkは踏まれたURLを返し、そうでない場合は、nullを返します。

```js
firebase.links() // -> Promise <string | null>
    .getInitialLink()
    .then((url) => {
        if (url) {
            // app opened from a url
        } else {
           // app NOT opened from a url
        }
    });
```

## onLink
アプリが実行中、バックグランドにいる場合にリンクが踏まれたときにurlをキャッチできるリスナーを追加できます。
下記のようにonLinkからの返り値を実行することでリスナーが止まります。

```js
// subscribe
const unsubscribe = firebase.links().onLink((url) => {
  // ...
});

// unsubscribe
unsubscribe();
```

以上です。