Cara Menggunakan iOS Universal Links di Ionic

Universal Links adalah fitur untuk membuka aplikasi iOS yang sudah terinstal di iPhone melalui url website. Sebagai contoh ketika pengguna membuka url www.facebook.com maka sistem akan membuka aplikasi facebook. Namun jika aplikasi facebook tidak terinstal di iPhone pengguna, maka sistem akan membuka browser. Contoh lain ketika pengguna membuka link untuk menginstal suatu aplikasi, maka sistem akan membuka App Store secara otomatis.

Fitur ini pertama kali diperkenalkan di iOS 9. Untuk melakukan hal serupa, developer Ionic sebenarnya bisa menggunakan plugin Deeplinks. Deeplinks memanfaatkan custom url schema untuk membuka aplikasi di iPhone. Namun semenjak 2016, custom url schema sudah tidak dapat digunakan lagi di iOS 9 dan keatas. Apple mewajibkan setiap developer untuk menggunakan Universal Links agar dapat mengakses aplikasi melalui url.

Untuk bisa menggunakan Universal Links, ada beberapa hal yang harus dipersiapkan:

Akun developer Apple ($99/tahun)
XCode
Web server dengan SSL (HTTPS)

Pertama-tama tentukan dahulu domain yang ingin digunakan. Ketika pengguna membuka link domain ini maka sistem akan membuka aplikasi kita. Sebagai contoh kaptentekno.com. Kita akan mengunggah sebuah file JSON ke server kaptentekno.com, karena itulah kita perlu memiliki web server ini.

Buat sebuah file dengan nama apple-app-site-association (tanpa ekstensi .json).

{
  "applinks": {
  "apps": [],
  "details": [{
    "appID": "9JA89QQLNQ.com.kaptentekno",
    "paths": [ "/artikel/", "/arsip/*"]
  }]
  }
}

appID berisi kombinasi team ID dan bundle ID. ID ini bisa didapat di apple developer server apple.com. Masuk pada bagian Certificates, Identifiers & Profiles -> Identifier. Pastikan juga telah mencentang Associated Domains pada bagian Capabilities. paths adalah direktori dari website yang disupport oleh aplikasi kita. Untuk informasi lebih jelas soal paths bisa dilihat di Universal Links.

appID

Kemudian upload file apple-app-site-association pada web server dibagian root atau sub direktori .well-known. File ini harus dapat diakses melalui HTTPS.

https:///apple-app-site-associatio atau
https:///.well-known/apple-app-site-association

Tes file ini melalui AASA validator

Langkah selanjutnya adalah membuat listener pada aplikasi ionic untuk menerima link url yang dikirimkan dan membuka halaman tertentu. Buka file app.component.ts, dan tambahkan code berikut:

import { Plugins } from '@capacitor/core';
const { App } = Plugins;

Selanjutnya edit method initializeApp() seperti berikut:

this.platform.ready().then(() => {
  SplashScreen.hide();
  App.addListener("appUrlOpen", (data) => {
    const path = data.url.replace("http://", "").replace("https://", "").split("/").slice(1);
    const url = path.join("/");
    this.router.navigate([url]);
  });
});

Setelah itu build aplikasi dan buka XCode. Pada bagian Capabilities nyalakan Associated Domains. Kemudian masukkan domain kita disertai dengan schema applinks:domain. Contoh applinks:kaptentekno.com. Setelah semua selesai build aplikasi dari XCode dan run pada iPhone.

xcode