Tautan universal di iOS dan Tautan Aplikasi di Android memungkinkan pengguna untuk langsung masuk ke aplikasi Anda dari tautan, menghindari browser. Hal ini sangat berguna untuk meningkatkan pengalaman pengguna dan menjaga konteks dari halaman web ke aplikasi. Dalam panduan ini, kita akan menjelajahi proses pengaturan tautan dalam yang dalam untuk aplikasi Next.js menggunakan Capacitor. Untuk atribusi dan tautan dalam yang tertunda, @capgo/capacitor-appsflyer dapat mengarahkan kampanye instalasi ke layar in-app yang tepat.
Pengaturan tautan dalam tidak memerlukan banyak code, tetapi melibatkan beberapa pengaturan. Setelah membaca panduan ini, Anda akan dapat mengklik tautan seperti https://www.capgo.app/details/22 dan memiliki aplikasi Anda terbuka ke halaman yang tepat jika sudah terinstal.
Pengaturan Tautan dalam Next.js
Pertama, kita akan membuat aplikasi Next.js baru dan halaman detail untuk tes:
npx create-next-app@latest capgoLinks
cd capgoLinks
mkdir pages/details
touch pages/details/[id].js
npm run build
npx cap add ios
npx cap add androidPastikan ID bundle Anda telah dikonfigurasi dengan benar di file capacitor.config.json sebagai hal yang 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].jsKita sudah mengatur route wildcard.
Dalam pages/details/[id].jskita dapat mengambil ID dari URL menggunakan router Next.js yang sudah terintegrasi:
import { useRouter } from 'next/router'
function DetailsPage() {
const router = useRouter()
const { id } = router.query
return (
<div>
<p>My ID: {id}</p>
</div>
)
}
export default DetailsPageSekarang, mari kita tangani appUrlOpen event dengan Capacitor. Event ini dipicu ketika aplikasi dibuka melalui skema URL kustom. Tambahkan listener di file: pages/_app.js Listener ini mendengarkan
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 MyAppThis code listens for the appUrlOpen Pengaturan iOS
Untuk iOS, Anda memerlukan ID aplikasi dengan Associated Domains diaktifkan. Buatlah
apple-app-site-association Konfigurasi iOS file dengan isi berikut, menggantikan YOURTEAMID dan com.your.bundleid ID tim Anda dan ID paket:
{
"applinks": {
"apps": [],
"details": [
{
"appID": "YOURTEAMID.com.your.bundleid",
"paths": ["*"]
}
]
}
}Unggah file ini ke .well-known di direktori di domain Anda, sehingga dapat diakses di https://www.capgo.app/.well-known/apple-app-site-association.
Dalam Xcode, tambahkan domain ke hak akses aplikasi Anda menggunakan format applinks:capgo.app.
Pengaturan Android
Untuk Android App Links, ikuti langkah-langkah berikut:
- Generate file keystore jika Anda tidak memiliki salah satu.
- Olehkan SHA256 fingerprint dari keystore.
- Buat sebuah assetlinks.json file dengan nama paket Anda dan fingerprint SHA256.
- Upload file ini ke direktori pada domain Anda.
.well-knownPada halaman Anda, tambahkan tag
ke elemen yang menghandle tautan dalam: AndroidManifest.xmlSetelah mengunggah file ini, Anda dapat memverifikasi menggunakan alat Digital Asset Links dari Google. Jika semua pengaturan sudah benar, Anda akan melihat tanda centang hijau. intent-filter Untuk membuat dan menandatangani aplikasi Anda, gunakan perintah berikut: activity Perintah ini akan menginstal aplikasi yang ditandatangani pada perangkat Android yang terhubung Anda.
<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>Konfigurasi untuk Pengaturan Proyek Nativ assetlinks.json __CAPGO_KEEP_0__
__CAPGO_KEEP_0__
cd android
./gradlew assembleRelease
cd ..
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore android/app/build/outputs/apk/release/app-release-unsigned.apk alias_name
zipalign -v 4 android/app/build/outputs/apk/release/app-release-unsigned.apk capgo.apk
adb install capgo.apk__CAPGO_KEEP_0__
Capacitor
To otomatisasi pengaturan proyek native, pertimbangkan menggunakan Capacitor configure package. Pasangnya di proyek Anda:
npm install @capacitor/configureBuat sebuah capacitor.config.yaml file di root proyek Anda:
vars:
BUNDLE_ID: com.capgo.deeplinks
PACKAGE_NAME: com.capgo.deeplinks
platforms:
ios:
targets:
App:
bundleId: $BUNDLE_ID
entitlements:
- com.apple.developer.associated-domains: ['applinks:capgo.app']
android:
packageName: $PACKAGE_NAMEJalankan alat konfigurasi dengan konfigurasi ini:
npx cap-config run capacitor.config.yamlIni akan menerapkan pengaturan yang ditentukan di file YAML ke proyek native Anda.
Kesimpulan
Mengatur tautan dalam yang Capacitor untuk aplikasi Next.js melibatkan mengonfigurasi domain dan pengaturan proyek untuk kedua iOS dan Android. Meskipun proses ini memerlukan perhatian detail, namun lebih terstruktur dibandingkan dengan metode yang lebih tua dan tidak memerlukan plugin tambahan. Pastikan file verifikasi domain Anda disajikan dengan benar dan periksa dengan alat-alat platform yang relevan. Setelah diatur, aplikasi Anda akan membuka dengan lancar dari tautan web, memberikan transisi yang halus untuk pengguna Anda dari web ke aplikasi.
Teruskan dari Cara Mengintegrasikan Tautan Universal di Next.js dengan Capacitor
Jika Anda menggunakan Cara Mengintegrasikan Tautan Universal di Next.js dengan Capacitor untuk merencanakan pekerjaan plugin native, hubungkannya dengan Capgo Direktori Plugin untuk alur kerja produk di Capgo Direktori Plugin, Capacitor Plugin oleh Capgo untuk detail implementasi di Capacitor Plugin oleh Capgo Menambahkan atau Mengupdate Plugin untuk detail implementasi di Menambahkan atau Mengupdate Plugin, Ganti Alternatif Plugin Enterprise Ionic untuk alur kerja produk di Ganti Alternatif Plugin Enterprise Ionic, dan Capgo Pembangunan Native untuk alur kerja produk di Capgo Pembangunan Native.
