Universal links di iOS dan App Links di Android memungkinkan pengguna untuk langsung masuk ke aplikasi Anda dari sebuah tautan, tanpa melalui browser. Hal ini sangat berguna untuk meningkatkan pengalaman pengguna dan mempertahankan konteks dari halaman web ke aplikasi. Dalam panduan ini, kita akan membahas proses pengaturan deep link ini untuk aplikasi Next.js menggunakan Capacitor.
Mengatur deep link tidak memerlukan banyak kode, tetapi memerlukan beberapa konfigurasi. Di akhir panduan ini, Anda akan dapat mengklik tautan seperti https://www.capgo.app/details/22
dan aplikasi Anda akan terbuka ke halaman yang tepat jika sudah terpasang.
Pengaturan Deep Link Next.js
Pertama, kita akan membuat aplikasi Next.js baru dan halaman detail untuk pengujian:
npx create-next-app@latest capgoLinkscd capgoLinksmkdir pages/detailstouch pages/details/[id].jsnpm run buildnpx cap add iosnpx cap add android
Pastikan bundle ID Anda diatur dengan benar di file capacitor.config.json, karena ini sangat penting untuk pengaturan:
{ "appId": "com.capgo.deeplinks", "appName": "capgoLinks", "webDir": "out", "bundledWebRuntime": false}
Untuk routing, Next.js menggunakan routing berbasis file, jadi dengan membuat file di pages/details/[id].js
, kita sudah mengatur rute wildcard kita.
Di pages/details/[id].js
, kita bisa mengambil ID dari URL menggunakan router bawaan Next.js:
import { useRouter } from 'next/router'
function DetailsPage() { const router = useRouter() const { id } = router.query
return ( <div> <p>My ID: {id}</p> </div> )}
export default DetailsPage
Sekarang, mari menangani event appUrlOpen
dengan Capacitor. Event ini dipicu ketika aplikasi dibuka melalui skema URL kustom. Tambahkan listener di file pages/_app.js
:
import { useEffect } from 'react'import { App } from '@capacitor/app'
function MyApp({ Component, pageProps }) { useEffect(() => { App.addListener('appUrlOpen', (event) => { const slug = event.url.split('.app').pop() if (slug) window.location.href = slug
}) }, [])
return <Component {...pageProps} />}
export default MyApp
Kode ini mendengarkan event appUrlOpen
dan menavigasi ke rute yang sesuai dalam aplikasi Next.js Anda.
Konfigurasi iOS
Untuk iOS, Anda memerlukan ID aplikasi dengan Associated Domains yang diaktifkan. Buat file apple-app-site-association dengan konten berikut, ganti YOURTEAMID
dan com.your.bundleid
dengan team ID dan bundle ID Anda yang sebenarnya:
{ "applinks": { "apps": [], "details": [ { "appID": "YOURTEAMID.com.your.bundleid", "paths": ["*"] } ] }}
Unggah file ini ke direktori .well-known
di domain Anda, membuatnya dapat diakses di https://www.capgo.app/.well-known/apple-app-site-association
.
Di Xcode, tambahkan domain ke entitlements aplikasi Anda menggunakan format applinks:capgo.app
.
Konfigurasi Android
Untuk Android App Links, ikuti langkah-langkah berikut:
- Buat file keystore jika Anda belum memilikinya.
- Dapatkan fingerprint SHA256 dari keystore.
- Buat file assetlinks.json dengan nama paket dan fingerprint SHA256 Anda.
- Unggah file ini ke direktori
.well-known
di domain Anda.
Dalam AndroidManifest.xml
Anda, tambahkan intent-filter
ke elemen activity
yang menangani deep link:
<activity ...> <intent-filter android:autoVerify="true"> <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="capgo.app" /> </intent-filter></activity>
Setelah mengunggah file assetlinks.json
, Anda dapat memverifikasinya menggunakan tool Digital Asset Links Google. Jika semuanya diatur dengan benar, Anda akan melihat tanda centang hijau.
Untuk membangun dan menandatangani aplikasi Anda, gunakan perintah berikut:
cd android./gradlew assembleReleasecd ..jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore android/app/build/outputs/apk/release/app-release-unsigned.apk alias_namezipalign -v 4 android/app/build/outputs/apk/release/app-release-unsigned.apk capgo.apkadb install capgo.apk
Ini akan menginstal aplikasi yang ditandatangani di perangkat Android yang terhubung.
Konfigurasi Capacitor untuk Pengaturan Proyek Native
Untuk mengotomatisasi pengaturan proyek native, pertimbangkan menggunakan paket Capacitor configure. Instal di proyek Anda:
npm install @capacitor/configure
Buat file capacitor.config.yaml
di root proyek Anda:
vars: BUNDLE_ID: com.capgo.deeplinks PACKAGE_NAME: com.capgo.deeplinksplatforms: ios: targets: App: bundleId: $BUNDLE_ID entitlements: - com.apple.developer.associated-domains: ['applinks:capgo.app'] android: packageName: $PACKAGE_NAME
Jalankan tool configure dengan config ini:
npx cap-config run capacitor.config.yaml
Ini akan menerapkan pengaturan yang ditentukan dalam file YAML ke proyek native Anda.
Kesimpulan
Mengatur deep link dengan Capacitor untuk aplikasi Next.js melibatkan konfigurasi domain dan pengaturan proyek untuk iOS dan Android. Meskipun prosesnya memerlukan perhatian detail, ini lebih sederhana dibandingkan metode lama dan tidak memerlukan plugin tambahan. Pastikan file verifikasi domain Anda disajikan dengan benar dan periksa dengan tool platform masing-masing. Setelah diatur, aplikasi Anda akan terbuka dengan mulus dari tautan web, memberikan transisi yang lancar bagi pengguna Anda dari web ke aplikasi.