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