Universal tautan universal pada iOS dan tautan aplikasi pada Android memungkinkan pengguna untuk dibawa langsung ke aplikasi Anda dari sebuah tautan, menghindari browser. Hal ini sangat berguna untuk meningkatkan pengalaman pengguna dan menjaga konteks dari sebuah halaman web ke aplikasi. Dalam panduan ini, kita akan menjelajahi proses pengaturan tautan dalam yang mendalam untuk sebuah aplikasi Next.js menggunakan Capacitor.
Pengaturan tautan dalam tidak memerlukan banyak code, tetapi melibatkan beberapa pengaturan. Setelah membaca panduan ini, Anda akan dapat mengklik sebuah tautan seperti https://www.capgo.app/details/22 dan memiliki aplikasi Anda membuka halaman yang tepat jika aplikasi Anda sudah terinstal.
Pengaturan Tautan dalam Next.js
Pertama, kita akan membuat sebuah aplikasi Next.js baru dan sebuah 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 Anda ID aplikasi telah dikonfigurasi dengan benar di dalam capacitor.config.json file, karena hal ini sangat penting untuk pengaturan:
{
"appId": "com.capgo.deeplinks",
"appName": "capgoLinks",
"webDir": "out",
"bundledWebRuntime": false
}Untuk routing, Next.js menggunakan routing berbasis file, sehingga dengan membuat sebuah file di pages/details/[id].jskita telah mengatur routing wildcard kita.
Ini pages/details/[id].jsKita dapat mengambil ID dari URL menggunakan router Next.js yang sudah ada:
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 pages/_app.js file:
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 MyAppListener ini code mendengarkan appUrlOpen event dan menavigasi ke jalur yang tepat di dalam aplikasi Next.js Anda.
Pengaturan iOS
Untuk iOS, Anda memerlukan ID aplikasi dengan Domains Terkait diaktifkan. Buatlah file apple-app-site-association dengan konten berikut, menggantikan YOURTEAMID dan com.your.bundleid Dengan ID tim dan ID paket sebenarnya:
{
"applinks": {
"apps": [],
"details": [
{
"appID": "YOURTEAMID.com.your.bundleid",
"paths": ["*"]
}
]
}
}Unggah file ini ke .well-known direktori di domain Anda, sehingga dapat diakses di https://www.capgo.app/.well-known/apple-app-site-association.
Dalam Xcode, tambahkan domain ke hak istimewa aplikasi Anda menggunakan format applinks:capgo.app.
Pengaturan Android
Untuk Android App Links, ikuti langkah-langkah berikut:
- Jika Anda tidak memiliki satu, buatlah file keystore.
- Olehkan SHA256 fingerprint dari keystore.
- Buatlah assetlinks.json file dengan nama paket dan SHA256 fingerprint Anda.
- Unggah file ini ke
.well-knowndirectory pada domain Anda.
Dalam AndroidManifest.xml, tambahkan intent-filter ke activity elemen yang menghandle 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 assetlinks.json file, Anda dapat memverifikasi menggunakan alat Digital Asset Links dari Google. Jika semuanya sudah terkonfigurasi dengan benar, Anda akan melihat tanda centang hijau.
Untuk membangun dan menandatangani aplikasi Anda, gunakan perintah-perintah berikut:
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.apkIni akan menginstal aplikasi yang ditandatangani pada perangkat Android yang terhubung Anda.
Capacitor Konfigurasi untuk Pengaturan Proyek Asli
Untuk mengautomasi pengaturan proyek asli, pertimbangkan menggunakan Capacitor paket konfigurasi. Pasanglah di proyek Anda:
npm install @capacitor/configureMembuat 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.yamlLangkah ini akan menerapkan pengaturan yang ditentukan dalam 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 prosesnya lebih sederhana dibandingkan dengan metode lama dan tidak memerlukan plugin tambahan. Pastikan file verifikasi domain Anda disajikan dengan benar dan periksa mereka dengan alat-alat platform yang relevan. Setelah terkonfigurasi, 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 kerja plugin native, hubungkannya dengan Capgo Direktori Plugin untuk alur kerja produk di direktori Plugin Capgo Plugin-Plugin Capacitor oleh Capgo untuk detail implementasi di Plugin-Plugin Capacitor oleh Capgo, Menambahkan atau Mengupdate Plugin untuk detail implementasi di Menambahkan atau Mengupdate Plugin, Alternatif Plugin Enterprise Ionic untuk alur kerja produk di Alternatif Plugin Enterprise Ionic, dan Capgo Pembangunan Nativ untuk alur kerja produk di Capgo Pembangunan Nativ.
