Belajar Capacitorjs - Deep Links, Universal Links & App State

#Pendahuluan

Setelah di episode 8 kita menguasai Push & Local Notifications, pada episode ini kita membahas cara membuka aplikasi dari link eksternal — deep linking. Ini adalah fitur fundamental yang menghubungkan web dan mobile: ketika user mengklik link di browser, email, atau QR code, aplikasi terbuka langsung ke konten yang relevan.

Mengapa deep linking penting? Karena tanpa deep linking, user harus membuka app lalu navigasi manual ke konten. Deep linking menghilangkan frisi ini dan meningkatkan engagement secara signifikan — terutama untuk marketing, sharing, dan notifikasi.

#Tiga Pendekatan Deep Linking

#1. Custom URL Scheme

Cara paling sederhana: mendaftarkan skema URL kustom untuk aplikasi.

plaintext

myapp://article/123

Konfigurasi di capacitor.config.ts:

Custom URL scheme

const config: CapacitorConfig = {
  // ...
  server: {
    url: 'http://192.168.1.100:5173',
    androidScheme: 'https',
  },
};

Kelebihan: mudah setup, langsung fungsi. Kekurangan: tidak aman (app lain bisa register skema yang sama), tidak bisa digunakan di web.

#2. Universal Links (iOS)

Menggunakan domain HTTPS yang dimiliki kalian. Ketika user mengklik link di iOS, sistem secara otomatis membuka aplikasi jika terinstall.

plaintext

https://myapp.com/article/123

Konfigurasi: buat file apple-app-site-association di root domain kalian:

apple-app-site-association

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appIDs": ["TEAMID.com.example.myapp"],
        "paths": ["/article/*", "/profile/*"]
      }
    ]
  }
}

Upload file ini ke https://myapp.com/.well-known/apple-app-site-association.

#3. App Links (Android)

Mirip dengan Universal Links, tetapi untuk Android. Membutuhkan file assetlinks.json di domain kalian:

assetlinks.json

[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "com.example.myapp",
      "sha256_cert_fingerprints": [
        "AA:BB:CC:DD:EE:FF:00:11:22:33:44:55:66:77:88:99:AA:BB:CC:DD:EE:FF:00:11:22:33:44:55:66:77:88:99"
      ]
    }
  }
]

Upload ke https://myapp.com/.well-known/assetlinks.json.

#Perbandingan

Fitur	Custom Scheme	Universal Links (iOS)	App Links (Android)
Keamanan	Rendah	Tinggi	Tinggi
Work di web	Tidak	Ya	Ya
Setup	Mudah	Menengah	Menengah
Fallback ke browser	Tidak	Ya	Ya

Tip

Untuk production, gunakan Universal Links (iOS) + App Links (Android) karena lebih aman dan profesional. Custom scheme cukup untuk development atau app internal.

#Handling Deep Links di Capacitor

Handle deep link

import { App } from '@capacitor/app';
 
// Dengarkan URL yang membuka app
App.addListener('appUrlOpen', (event) => {
  console.log('App opened via URL:', event.url);
 
  // Parse URL dan navigasi
  const url = new URL(event.url);
  const path = url.pathname;
 
  if (path.startsWith('/article/')) {
    const articleId = path.split('/')[2];
    navigateToArticle(articleId);
  } else if (path.startsWith('/profile/')) {
    const userId = path.split('/')[2];
    navigateToProfile(userId);
  }
});

#App State: Lifecycle Events

Aplikasi mobile memiliki lifecycle yang berbeda dari browser tab:

100%

#Mendengarkan Lifecycle

App lifecycle events

import { App } from '@capacitor/app';
 
// App masuk/keluar background
App.addListener('appStateChange', ({ isActive }) => {
  if (isActive) {
    // App di foreground — refresh data, resume animasi
    refreshData();
  } else {
    // App di background — pause, save state, release resources
    saveState();
  }
});
 
// Back button (Android only)
App.addListener('backButton', ({ canGoBack }) => {
  if (canGoBack) {
    window.history.back();
  } else {
    // Tampilkan dialog exit atau minimize
    showExitDialog();
  }
});
 
// URL open
App.addListener('appUrlOpen', (event) => {
  handleDeepLink(event.url);
});
 
// Open from another app (restoration)
App.addListener('appRestoredResult', (result) => {
  console.log('Restored state:', result);
});

#Best Practice Lifecycle

Pause: simpan state, pause animasi, release resource heavy.
Resume: refresh data, resume animasi, reconnect WebSocket.
Background: kurangi polling, pause video/audio, kecilkan footprint.

Note

Android bisa meng-kill aplikasi di background kapan saja jika membutuhkan memory. Selalu simpan state penting ke Preferences atau database saat masuk background.

#Praktik: Buka Konten dari Link Eksternal

Kombinasikan deep link + lifecycle untuk UX yang mulus:

Deep link + lifecycle handler

import { App } from '@capacitor/app';
import { Preferences } from '@capacitor/preferences';
 
class DeepLinkHandler {
  static init() {
    // Handle URL yang membuka app
    App.addListener('appUrlOpen', async (event) => {
      const url = new URL(event.url);
 
      // Simpan deep link untuk recovery
      await Preferences.set({
        key: 'pendingDeepLink',
        value: url.pathname,
      });
 
      // Navigasi jika app sudah aktif
      if (document.visibilityState === 'visible') {
        this.navigate(url.pathname);
      }
    });
 
    // Handle restore setelah killed
    App.addListener('appRestoredResult', async () => {
      const pending = await Preferences.get({ key: 'pendingDeepLink' });
      if (pending.value) {
        this.navigate(pending.value);
        await Preferences.remove({ key: 'pendingDeepLink' });
      }
    });
  }
 
  static navigate(path: string) {
    // Router navigasi berdasarkan path
    window.history.pushState({}, '', path);
  }
}

#Penutup

Pada episode 9 ini, kalian telah memahami:

Tiga pendekatan deep link: custom scheme, Universal Links, App Links.
App lifecycle: active, background, terminated.
Handling deep link + lifecycle untuk UX yang mulus.
Simpan state saat background untuk recovery setelah killed.

Di episode 10 selanjutnya, kita akan membahas Networking: CapacitorHttp & CORS — masalah CORS di WebView, solusi CapacitorHttp yang mem-patch fetch/XHR ke native HTTP, cookie management, dan konsumsi API third-party tanpa proxy. Sampai jumpa!