React Native - Universal Linking

網址跳轉手機原生 App 功能，iOS 稱 Universal Links ，Android 稱 Deep Linking，原理是在裝置上新增 URL Scheme 設定，當開啟特定規則的連結時可以開啟 App，用這個方法可以提升應用程式跨 Web 與 Mobile App 平台的使用體驗，當使用者開啟連結時，判斷裝置上是否有安裝 App ，有的話會直接開啟 App，若沒有則使用瀏覽器開啟網頁版提供檢視，或者直接導向到該裝置平台的 App 下載畫面 (iOS 的 App Store / Android 的 Google Play)

設定方法

設定希望開啟 App 的 url scheme，你可以自定義一組 url 並且在安裝 App 時向裝置註冊這個 url 與 App 的綁定。例如你做了一個 ToDoApp，你可以設定開啟你ToDoApp的連結為 myToDo://blabla ，由於安裝時，會對這個 url 做註冊，當你開啟這個連結時就會跳轉到你的 App。

如果你想註冊自己的 domain 為 url ，iOS 上需要額外做 domain 的驗證，確認你是 domain 的擁有者，帶來的好處是可以達到當使用者開啟 domain 連結時，如果有安裝 mobile App 可以直接用 native App 開啟，如果沒有的話則會自動使用瀏覽器打開網站。

iOS 設定 Associated Domains

需要在你網站上新增一個 route ，你可以選擇直接掛在 domain 根目錄下或是多一層 .well-known 範例如下

https://<fully qualified domain>/apple-app-site-association

或是

https://<fully qualified domain>/.well-known/apple-app-site-association

接下來要讓這個 route 回傳 JSON 格式的內容 內容範例：

{
   "webcredentials": {
       "apps": [ "D3KQX62K1A.com.example.DemoApp" ]
    },
   "applinks": {
        "apps": [],
        "details": [
            {
                "appID": "D3KQX62K1A.com.example.DemoApp",
                "paths": [ "/app/*" ]
            }
        ]
    }
}

App ID 格式

<Team Identifier>.<Bundle Identifier>

paths 可以設定想要跳轉的 url 路徑規則

設定 App Url Scheme

iOS

Info.plist ​

<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>https://your.domain.com</string>
		</array>
		<key>CFBundleURLName</key>
		<string></string>
	</dict>
</array>

AppDelegate.m

#import "RCTLinkingManager.h" // import

// ADD THIS METHOD
- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity
 restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler
{
 return [RCTLinkingManager application:application
                  continueUserActivity:userActivity
                    restorationHandler:restorationHandler];
}

Android

<intent-filter android:label="<YOUR_APP_NAME>">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="https" android:host="<YOUR_DOMAIN>" />
</intent-filter>

React Native 端處理

新增監聽 UniversalLinking 函式，並在 App 進入點的 componentDidMount 執行

listenUniversalLinking = () => {
  // 當 App 從關閉狀態，被 universal links 呼叫開啟時，執行 restStackToProperRoute
  Linking.getInitialURL()
    .then((url) => {
      if (url) {
        this.resetStackToProperRoute(url);
      }
    })
    .catch((e) => {});

  // 當 App 因為 universal links 從背景被叫醒時，執行 this.appWokeUp 
  Linking.addEventListener('url', this.appWokeUp);
};

在 componentWillUnmount 事件加上移除監聽事件

componentWillUnmount() {
    // Remove the listener
    Linking.removeEventListener('url', this.appWokeUp);
}

appWokeUp 處理

appWokeUp = (event) => {
  console.log('appWokeUp', event);
  this.resetStackToProperRoute(event.url);
};

resetStackToProperRoute 處理

resetStackToProperRoute = (url) => {
// 在這邊判斷 url，導向到對應的畫面
 };

測試方法 Test Universal Links, Deep Linking

可以在裝置或模擬器上的瀏覽器輸入網址來進行測試 或是更方便的透過下列指令來直接在裝置或模擬器上開啟網址

iOS

xcrun simctl openurl booted "https://domain.com/something"

Android

adb shell am start -a android.intent.action.VIEW -d "https://domain.com/something"