React Native Firebase Dynamic Linksの設定

Firebase Dynamic Links を使用した React Native での Deep Link の実現方法について説明します。

概要

この記事は 公式サイト を参考にReactNativeにてDynamicLinksを導入する手順をまとめたものである。

可能であれば公式サイトの副読本として読むことを推奨する。

インストール

下記で説明する手順の前に、Firebaseの設定 が完了していることを前提とする。

# app module のインストール
yarn add @react-native-firebase/app

# dynamic-links module のインストール
yarn add @react-native-firebase/dynamic-links

# podのインストール
npx pod-install

ドメインの登録

 Dynamic Links ではトリガーとなるURLのドメインを予め決める必要がある。 そのための手順を完結に説明する。

  1. Firebaseコンソールを開き Dynamic Links のタブを押下する、その後ドメインを登録する。(この例では https://rnfbtestapplication.page.link. というURLを登録している Firebaseコンソール

  2. 登録したドメイン一覧が表示されていることを確認する。この例だと https://rnfbtestapplication.page.link/Eit5 がDynamic Links として登録され、このリンクを開くときにアプリケーションが呼び出される。 Firebaseコンソール一覧

iOSの設定

iOSの設定を行うためにはまずApple Developer のアカウント登録が必要である。

IDの登録

  1. App Store ID と Team ID をFirebaseコンソールに加える必要がある。 App Store ID をまだ持っていない場合 , 一時的に適当な数字を入力することができる。 Team ID はApple developerコンソールで見つけることができる。 IDの登録

ドメインの検証

  1. 「ドメインの登録」で作成したドメインが正しく登録されているかのテストを行う。ブラウザに移動し、[your domain]/apple-app-site-association と打ち込む。 このレスポンスには appID というプロパティを持つオブジェクトの配列 detailsが含まれる 。またこの時ドメインの登録処理が走るため、レスポンスを返すのに少し時間がかかる可能性がある。 処理を行う前にappIdが登録されているか確認する。
  2. 一度ドメインが登録されていることが確認できれば、次にApple developer コンソールへ向かいアプリの provisioning profile を作成する必要がある。 Associated Domain capability が有効になっていることを確認する。 ドメインの登録

アプリ設定

  1. アプリのprojectをXcodeで開き、TARGETSヘッダー配下のアプリを開く。Signing & Capabilitiesタブをクリックする。 Teamが登録されており、Provisioning Profileフィールドが完了していることを確認する。Firebaseコンソールで作成したドメインをapplinks: という接頭辞をつけてAssociated Domainsに登録する。 Xcode設定

Info設定

  1. Infoタブをクリックし、URL Type をプロジェクトに加える。The IdentifierはBundle Idまたは好きな値を使用できる。bundle identifierをURL Schemesプロパティに加える。 Info設定

カスタムドメインの使用

カスタムドメインをFirebaseプロジェクトで設定が完了している場合、Info.plistにFirebaseDynamicLinksCustomDomainsキーを使用してURL接頭辞を加えなくてはならない。 また複数のURLを加えることもできる。

例:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>FirebaseDynamicLinksCustomDomains</key>
  <array>
    <string>https://custom.domain.io/bla</string>
    <string>https://custom.domain.io/bla2</string>
  </array>
  
  ...other settings
  
</dict>
</plist>

もしこの設定を加えなかった場合、dynamic link でアプリケーションを呼び出したときに、後述する onLinkまたは getInitialLinkで urlを取得することができない。

iOSでのDynamic Linksのテスト

シミュレーターでは動作しないため、dynamic link を試すには実機が必要である。

検証用アプリケーション

iOSに標準インストールされているノートアプリにdynamic linkを貼り付け開くことで簡単にテストを行うことができる。

Androidの設定

fingerprintの登録

  1. 今後の手順で使用するためSHA-256 fingerprintを作成し、Firebaseコンソールにて対象のアプリに追加する Android設定1

ドメインの検証

  1. Firebaseコンソールにて作成したドメインが正常か確認を行う。ブラウザーで [your-domain]/.well-known/assetlinks.json と打ち込む。package_nameというキー名でアプリのパッケージ名を値として含むtargetオブジェクトをレスポンスとして返す。 このレスポンスは登録処理を挟んでいるためレスポンスが返ってくるまで少し時間がかかる可能性がある。
  2. エミュレータのノートやemailなどにdynamic link を貼り付け正常に動作しているかのテストを行う。(その前にアプリケーションがインストールされている必要がある)

Dynamic Linkの処理方法

Dynamic Link ではアプリケーションがforegroundかbnackground/quitそれぞれの状態に関連した２つのやり方を提供している。

Foreground events

アプリケーションがforegroundの状態の時、dynamic linkを押下したイベントを購読するため onLink というメソッドを使用することができる。

import dynamicLinks from '@react-native-firebase/dynamic-links';

function App() {
  const handleDynamicLink = link => {
    // ここでlinkを取得し、処理を書く
    if (link.url === 'https://invertase.io/offer') {
      // ○○画面に遷移する処理
    }
  };

  useEffect(() => {
    const unsubscribe = dynamicLinks().onLink(handleDynamicLink);
    // unmount時に購読を解除する
    return () => unsubscribe();
  }, []);

  return null;
}

Background/Quit events

もしアプリケーションがbackgroundか完全に停止している状態の時、アプリケーションがdynamic linkによって開かれたかを検出するため getInitialLinkというメソッドを使用することができる。

import dynamicLinks from '@react-native-firebase/dynamic-links';

function App() {
  useEffect(() => {
    dynamicLinks()
      .getInitialLink()
      .then(link => {
        if (link.url === 'https://invertase.io/offer') {
          // ○○画面に遷移する処理
        }
      });
  }, []);

  return null;
}

©Tsurutan. All Rights Reserved.