(Deep|Web) Link support with expo-router

markdown: https://gist.github.com/mrtry/20944c7e0f51e11eb34c6fb5b9c30d10

1. expo-routerで (Deep|Web) Link対応 @mrtry 2 0 2 4 / 1 0 / 0 4 React Native Meetup
2. © JMDC Inc. ࣗݾ঺հ • @mrtry • JMDC, Inc / Ventus, Inc • Engineer (Mobile) • Engineering Manager • 高 専卒 / 現放送 大 学 生 • 心 理学まわりの単位を取ってる • メタ認知システムが 大 好き
3. © JMDC Inc. ͜ͷεϥΠυͰΘ͔Δ͜ͱ • (Deep|Web) Linkがどういうものかわかる • expo-routerでの(Deep|Web) Linkの対応 方 法がわかる 3
4. © JMDC Inc. (Deep|Web) Link
5. © JMDC Inc. (Deep|Web) Link Deep Link • ΞϓϦ͝ͱʹURL SchemeΛఆΊɺͦͷSchemeͷࢦఆ͢Δ͜ͱͰΞϓϦΛىಈͰ ͖ΔΑ͏ʹ͢Δ࢓૊Έ Web Link • ΞϓϦΛΠϯετʔϧͨ͠ঢ়ଶͰWebαΠτΛ։͘ͱɺΞϓϦ͕։͔ΕΔ࢓૊Έ 5
6. © JMDC Inc. 6 ໊শ URL Scheme ྫ ิ଍ Deep Link [೚ҙจࣈྻ]:// examble-app:// Android/iOSͲͪΒ΋ڞ ௨໊শ native deep-link [೚ҙจࣈྻ]:// examble-app:// ExpoͷcontextͰͷDeep Link Web Link https://... https://example- site.com AndroidͷυΩϡϝϯτ Ͱͪΐͬͱग़ͯ͘Δ Universal Link https://... https://example- site.com iOSͷcontextͰͷWeb Link App Link https://... https://example- site.com AndroidͷcontextͰͷ Web Link web deep-links https://... https://example- site.com ExpoͷcontextͰͷWeb Link
7. © JMDC Inc. Deep LinkΛ࣮૷͢Δ
8. © JMDC Inc. Ͳ͏࣮૷͢Δͷ͔ • expo-routerΛར༻͍ͯ͠Δ৔߹͸ɺapp.config.tsͰschemeΛఆΊΔ͚ͩ • <scheme>://<dir-path>ͷࢦఆͰΞϓϦ͕ىಈ͢Δ • ྫ • scheme: my-app • app/home/index.ts ͕͋Δ • Deep Link͸ my-app://home ʹͳΔ 8
9. © JMDC Inc. ಈ࡞֬ೝ • React Navigationのドキュメントに書いてある • React Navigation: Deep linking 9
10. © JMDC Inc. Web LinkΛ࣮૷͢Δ
11. © JMDC Inc. Ͳ͏࣮૷͢Δͷ͔ 1 . Webサイトに設定ファイルをアップロードしておく 2 . app.config.tsに設定を追加する 3 . 「WebサイトのURLに対応するアプリの画 面 を開く」処理を実装する 1 1
12. © JMDC Inc. 1 . WebαΠτʹઃఆϑΝΠϧΛΞοϓϩʔυ͓ͯ͘͠
13. © JMDC Inc. WebαΠτʹઃఆϑΝΠϧΛΞοϓϩʔυ͓ͯ͘͠ JSONΛɺWebαʔϏεͷυϝΠϯ͔ΒΞΫηεͰ͖ΔΑ͏ʹ͢Δ Android: asset-link.json • https://<domain-name>/.well-known/assetlinks.json ʹ഑ஔ͢Δ iOS: apple-app-site-association • https://<domain-name>/.well-known/apple-app-site-association ʹ഑ஔ͢Δ 1 3
14. © JMDC Inc. apple-app-site-association • <team-id>.<bundle-id> の形式でアプリを指定する • components で、「どのpathをアプリで起動する/除外する」を定義できる 1 4
15. © JMDC Inc. apple-app-site-association iOSは設定確認が 面 倒なので注意 • 端末でDev modeを有効にする必要がある • TN 3 1 5 5 - 日 本語ドキュメント - Apple Developer • 設定ファイルがCDNにcacheされる必要があるし、24hかかる • iOS 1 4 でUniversal Links対応することになった 人 が 見 る記事 #Swift - Qiita • 待ちたくない場合は、app.config.tsでbypassする設定が必要 1 5
16. © JMDC Inc. asset-link.json • iOSの設定ファイルと違い「どのpathをアプリで起動する/除外する」を定義できないので注意 1 6
17. © JMDC Inc. asset-link.json • Play Storeに設定例が出ている • コピペして、Develop/Staging環境などはpackage nameを変更すればいい 1 7
18. © JMDC Inc. 2 . app.config.tsに設定を追加する
19. © JMDC Inc. app.config.tsに設定を追加する 1 . app.config.tsΛॻ͖׵͑Δ 2 . AppleͷαΠτͰɺAssociate DomainΛ༗ޮʹ͢Δ 3 . rebuild͢Δ 1 9
20. © JMDC Inc. 2 - 1 . app.config.tsΛॻ͖׵͑Δ ios / android に設定を追記する 2 0
21. © JMDC Inc. 2 - 2 . AppleͷαΠτͰɺAssociate DomainΛ༗ޮʹ͢Δ ҎԼͷهࣄ͕ஸೡͳͷͰಡΉͱ͍͍ • Associate DomainΛ༗ޮԽ | React Native(Expo)ʹUniversal LinksΛ࣮૷ͯ͠ɺWeb ͔ΒΞϓϦʹࣗಈભҠͤ͞Δʂʲલฤʳ 2 1
22. © JMDC Inc. 2 - 3 . rebuild͢Δ • app.config.tsͷมߋ಺༰͸ɺnative layerͷมߋͳͷͰɺrebuild͢Δ • Provisioning Profileͷ࠶ੜ੒΋ඞཁͳͨΊɺ —non-intaractive ͳ͠Ͱ࣮ߦߦ͢Δ • Provisioning Profile͕Α͘Θ͔Βͳ͔ͬͨΒ ҎલͷొஃεϥΠυΛݟ͍ͯͩ͘͞ 2 2
23. © JMDC Inc. 3 . ʮWebαΠτͷURLʹରԠ͢ΔΞϓϦͷը໘Λ։͘ʯॲཧΛ࣮૷͢Δ
24. © JMDC Inc. ʮWebαΠτͷURLʹରԠ͢ΔΞϓϦͷը໘Λ։͘ʯॲཧΛ࣮૷͢Δ Defaultのnavigation handlingをOverrideする必要がある • 2.までやると、サイト開こうとするとアプリは起動する • expo-routerのdefault: 「Webサイトのpathに合わせて画 面 遷移する」 • 例: https://example.com/notification/ 1 2 3 4 5 を開こうとすると example://notification/ 1 2 3 4 5 が開かれる • defaultのnavigationだと、アプリにとって不都合なことが多い • WebとモバイルアプリのURL設計がズレていることは多分にあるため 2 4
25. © JMDC Inc. +native-intent.tsx Customizing links - Expo Documentation redirectSystemPath(): • URLでアプリを起動したときに呼ばれる • この関数から返されたpathを元にexpo-routerが画 面 遷移してくれる 2 5
26. © JMDC Inc. ಈ࡞֬ೝ FlutterͷυΩϡϝϯτ͕ஸೡ
 ϝϞʹWebαΠτͷURLΛషΓ෇͚ɺͦΕΛ։͍ͯɺΞϓϦ͕ىಈ͢Ε͹׬ྃ • Set up universal links for iOS | Flutter • Set up app links for Android | Flutter CLIの場合: Android iOS 2 6
27. © JMDC Inc. Tips
28. © JMDC Inc. Tips: Query Parameterͷencoder/decoderΛ࣮૷͠ͱ͍ͨ΄͏͕͍͍ • 一 般的にQuery Parameterはdecodeして渡すもの • useLocalSearchParamsは、値をdecodeしてから使うようにしたほうがいい • WebView Screenに、外部からURLをQueryParameterで渡す時などに忘れがち 2 8
29. © JMDC Inc. Tips: initial࣌ʹ௚઀ը໘ભҠͤ͞Δͱը໘͕ඳը͞Εͳ͍ͱ͖ • initial࣌ʹpathΛॻ͖׵͑Δͱɺը໘͕ඳը͞Εͳ͍ͱ͍͏໰୊ʹૺ۰ͨ͠ • ঱ঢ়ͱͯ͠ࣅͨIssue͕v 2 ͕ͩ͋ͬͨ • initial route · Issue # 4 2 8 · expo/router · GitHub +native-intent.tsx app/index.tsx 2 9
30. © JMDC Inc. Tips: ೝূ͕͋ΔΞϓϦέʔγϣϯͰͷઃܭ • 認証フローがExpoのドキュメント通りに組んであるとラク • Authentication in Expo Router - Expo Documentation • 初 手 は認証済みのトップページに 飛 ばし、_layoutで(Web|Deep) Linkのhandlingをす ると良さそう • ログインしてなかったユーザーが、ログインできたときに、 (Web|Deep) Linkで開こうとしてたページを開いてくれて親切 • 起動時のURLは Linking.getInitialURL() で取得できる 3 0
31. © JMDC Inc. Tips: ೝূ͕͋ΔΞϓϦέʔγϣϯͰͷઃܭ 意図しないApp Linkを雑に /webview で開くと困ることがある • 認証済みのRoutingに /webview を設置してあるという前提 • 意図しないWeb Linkを雑に /webview に投げつけると、未認証時にURLをアプリで開けないということが起こる • 「新規会員登録」「問い合わせ」「パスワードリセット」などのURLを開こうとすると、未認証トップに 飛 んでしまう • 一 応、URLをブラウザにURLを直貼りするとブラウザで回遊できるが、リテラシーが試される • Routing処理と別で「特定のpathが来たら、 WebBrowser で起動する」という処理を 入 れたほうが良さそう • ただし、雑にWebBrowserを使うと、Androidでバグるので次のTipsを参照 3 1
32. © JMDC Inc. Tips: Web Link対応したAndroidアプリͰWebBrowserΛ࢖͏࣌ͷ஫ҙ • AndroidのWeb Linkを設定し、WebBrowserで開こうとすると、無限ループする • Web → +native-intent.tsx → WebBrowserがWeb開く → Webからアプリに 飛 ばされる → … • そのため「このURLはWebBrowserで開け」と明 示 的に指定してやる必要がある 3 2