網址跳轉手機原生 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 格式的內容 內容範例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"webcredentials": {
"apps": [ "D3KQX62K1A.com.example.DemoApp" ]
},
"applinks": {
"apps": [],
"details": [
{
"appID": "D3KQX62K1A.com.example.DemoApp",
"paths": [ "/app/*" ]
}
]
}
}

App ID 格式

1
<Team Identifier>.<Bundle Identifier>

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

設定 App Url Scheme

iOS

Info.plist

1
2
3
4
5
6
7
8
9
10
11
<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

1
2
3
4
5
6
7
8
9
10
#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

1
2
3
4
5
6
<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 執行

1
2
3
4
5
6
7
8
9
10
11
12
13
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 事件加上移除監聽事件

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

appWokeUp 處理

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

resetStackToProperRoute 處理

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

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

iOS

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

Android

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