深度連結
深層連結(deep links)是指不僅能開啟應用程式,還能將使用者導向應用程式內部特定位置的連結。例如,來自一則運動鞋廣告的深層連結可能會開啟購物應用程式,並直接顯示該雙鞋子的商品頁面。
Flutter 在 iOS、Android 以及網頁上皆支援深度連結。開啟一個 URL 會在你的應用程式中顯示對應的螢幕。透過以下步驟,你可以使用命名路由(named routes)(可透過 routes 參數或 onGenerateRoute),或是使用 Router 元件(Widget)來啟動並顯示路由。
如果你在網頁瀏覽器中執行應用程式,則無需額外設定。路由路徑的處理方式與 iOS 或 Android 的深層連結相同。預設情況下,網頁應用程式會從 URL 的 hash fragment(雜湊片段)讀取深層連結路徑,使用的模式為:/#/path/to/app/screen,但你可以透過設定 URL 策略來變更此行為。
如果你偏好視覺化學習,歡迎觀看以下影片:
開始使用
#請參考我們針對 Android 與 iOS 的教學:
從基於插件的深度連結遷移
#如果你曾經依照 Deep Links and Flutter applications (a free article on Medium) 撰寫插件來處理深層連結,則應該停用 Flutter 預設的深層連結處理器。你可以在 Info.plist 中將 FlutterDeepLinkingEnabled 設為 false,或 在 AndroidManifest.xml 中將 flutter_deeplinking_enabled 設為 false。
行為說明
#根據平台以及應用程式是否已啟動,行為會略有不同。
| 平台 / 情境 | 使用 Navigator | 使用 Router |
|---|---|---|
| iOS(未啟動) | 應用程式會取得 initialRoute("/"),並在短時間後收到 pushRoute | 應用程式會取得 initialRoute("/"),並在短時間後使用 RouteInformationParser 解析路由,然後呼叫 RouterDelegate.setNewRoutePath,將對應的 Page 設定給 Navigator。 |
| Android(未啟動) | 應用程式會取得包含路由("/deeplink")的 initialRoute | 應用程式會取得 initialRoute("/deeplink"),並傳遞給 RouteInformationParser 解析路由,然後呼叫 RouterDelegate.setNewRoutePath,將對應的 Pages 設定給 Navigator。 |
| iOS(已啟動) | 會呼叫 pushRoute | 路徑會被解析,並以新的 Pages 集合設定 Navigator。 |
| Android(已啟動) | 會呼叫 pushRoute | 路徑會被解析,並以新的 Pages 集合設定 Navigator。 |
當你使用 Router 元件(Widget)時,應用程式在執行期間若開啟新的深層連結,可以直接替換目前的 Pages 集合。
深入瞭解
#- Learning Flutter's new navigation and routing system 介紹 Router 系統的基礎。
- Deep dive into Flutter deep linking —— 來自 Google I/O 2023 的影片
- Flutter Deep Linking: The Ultimate Guide,逐步教學如何在 Flutter 中實作深層連結。