M K Wiro

Posted on Aug 15

Bikin Halaman Unduh OS-Aware & Global dengan Tencent EdgeOne Pages (Studi Kasus BerQuran)

#tencentedgeone #edgeone #webdev #tutorial

Pengalaman saya memakai Tencent EdgeOne Makers (Pages) + Edge Functions untuk menyajikan halaman unduh aplikasi desktop yang otomatis mendeteksi OS dan lokasi pengunjung — berjalan di edge global, gratis, dan hidup dalam hitungan menit.

#TencentEdgeOne #EdgeOneMakers #CODEPOLITAN #EdgeOne

Latar belakang

Saya mengembangkan BerQuran — aplikasi baca Al-Qur'an yang memverifikasi bacaan dari suara pengguna. Selain Android & iOS, BerQuran baru saja hadir untuk desktop: macOS (.dmg), Windows (.zip), dan Linux (AppImage), lengkap dengan auto-update dan mesin pengenal yang berjalan on-device.

Masalah klasik halaman unduh multi-OS: pengunjung harus menebak sendiri file mana yang cocok, dan aset disajikan dari satu origin (server saya di Indonesia) sehingga terasa jauh untuk pengguna global. Saya ingin halaman yang:

Otomatis menyodorkan installer yang tepat sesuai OS pengunjung.
Cepat di mana pun — disajikan dari edge terdekat.
Punya logika di server (bukan cuma statis) tanpa saya mengelola server.

Jawabannya: Tencent EdgeOne Pages + Edge Functions. Ini catatan pengalaman saya.

Apa itu EdgeOne Pages / Makers?

EdgeOne Makers (Pages) adalah platform Tencent EdgeOne untuk men-deploy web app langsung ke jaringan edge global — mirip Cloudflare Pages/Workers. Yang saya pakai:

Static hosting di edge (CDN global otomatis).
Edge Functions: kode serverless yang jalan di node edge dekat pengunjung — bisa baca header lokasi & User-Agent, lalu merespons dinamis. Latensi rendah tanpa server sendiri.
Git-connected deploy: connect repo GitHub → tiap git push auto-deploy.

Yang saya bangun

Sebuah proyek kecil tapi nyata:

berquran-edge/
├─ index.html              # landing unduh (auto-detect OS via /api/latest)
└─ functions/
   └─ api/
      └─ latest.js         # Edge Function: deteksi OS + geo → installer yang tepat

Edge Function-nya

Di EdgeOne Pages, setiap file di functions/ otomatis jadi endpoint. functions/api/latest.js menjadi GET /api/latest. Isinya inti dari "kepintaran" halaman ini:

// functions/api/latest.js  (dipangkas)
const VERSION = '1.7.1';
const BASE = 'https://cdn.berquran.com/berquran/download';
const ASSETS = {
  macos:   { label: 'macOS',   url: `${BASE}/BerQuran-macOS-${VERSION}.dmg` },
  windows: { label: 'Windows', url: `${BASE}/BerQuran-windows-x64-${VERSION}.zip` },
  linux:   { label: 'Linux',   url: `${BASE}/BerQuran-x86_64.AppImage` },
};

function detectOS(ua = '') {
  ua = ua.toLowerCase();
  if (ua.includes('windows')) return 'windows';
  if (ua.includes('mac')) return 'macos';
  if (ua.includes('linux') || ua.includes('x11')) return 'linux';
  return 'macos';
}

export function onRequest(context) {
  const { request } = context;
  const os = detectOS(request.headers.get('user-agent'));

  // ?go=1 → langsung redirect ke installer yang pas OS
  if (new URL(request.url).searchParams.get('go') === '1') {
    return Response.redirect(ASSETS[os].url, 302);
  }

  // request.eo → info edge (lokasi geografis pengunjung)
  const geo = (request.eo && request.eo.geo) || {};
  return new Response(JSON.stringify({
    version: VERSION,
    detectedOS: os,
    recommended: ASSETS[os],
    all: ASSETS,
    edge: { country: geo.countryCodeAlpha2, region: geo.regionName, city: geo.cityName },
  }, null, 2), { headers: { 'content-type': 'application/json; charset=utf-8' } });
}

Dua hal penting yang saya suka:

request.headers.get('user-agent') untuk memilih installer — tak perlu library.
request.eo.geo memberi lokasi pengunjung di edge, tanpa panggil API geo eksternal.

Langkah deploy (dari nol sampai live < 10 menit)

1. Siapkan repo. Push index.html + folder functions/ ke GitHub.

2. Buat project di EdgeOne Makers. Console EdgeOne → tab Makers → Import Git repository → pilih GitHub → Authorize aplikasi EdgeOne Pages → pilih repo.

3. Konfigurasi. Nama project, Acceleration region: Global (MLC excluded) (edge internasional, tanpa perlu ICP filing China), branch main. Situs statis → tak perlu build command. Klik Start deployment.

4. Selesai. Beberapa saat kemudian: Initialize → Clone → Install → Build → Deploy semua hijau, dan dapat domain gratis: https://berquran-edge.edgeone.dev. Tiap git push berikutnya auto-deploy.

Hasilnya — dan bukti ini benar-benar di edge

Halaman live: berquran-edge.edgeone.dev.

Yang bikin saya senyum: panggil /api/latest dari perangkat berbeda, hasilnya beda sesuai OS — dan field edge menunjukkan lokasi node edge yang melayani saya:

// dari laptop saya (Indonesia)
{
  "detectedOS": "macos",
  "recommended": { "label": "macOS", "url": ".../BerQuran-macOS-1.7.1.dmg" },
  "edge": { "country": "ID", "region": "Yogyakarta", "city": "Kabupaten Sleman" }
}

Ganti User-Agent jadi Windows → otomatis recommended jadi installer .zip. Inilah kekuatan Edge Function: logika personalisasi berjalan di node terdekat pengunjung, bukan bolak-balik ke origin yang jauh. Halaman utamanya sendiri tinggal fetch('/api/latest') lalu menonjolkan tombol unduh sesuai OS.

Benchmark: edge vs origin (angka nyata)

Klaim "lebih cepat" harus dibuktikan. Saya ukur TTFB (Time To First Byte) ke halaman edge (berquran-edge.edgeone.dev) vs origin tunggal saya (berquran.com, 1 server di Indonesia, tanpa CDN) dari 5 kota di 4 benua, memakai Globalping.

Lokasi	Origin (1 server, Indonesia)	EdgeOne Edge (warm)	Selisih
London 🇬🇧	188 ms	26 ms	~7× lebih cepat
São Paulo 🇧🇷	324 ms	49 ms	~6,6×
Falkenstein 🇩🇪	219 ms	44 ms	~5×
Los Angeles 🇺🇸	197 ms	55 ms	~3,6×
Singapore 🇸🇬	22 ms	215 ms	origin menang
Rata-rata	190 ms	77 ms	~2,5×

Dua pelajaran jujur dari benchmark ini:

Edge menang telak untuk pengunjung JAUH. Dari Eropa & Amerika, edge 3,6–7× lebih cepat karena disajikan dari PoP terdekat, bukan menyeberang setengah bumi ke Indonesia. Untuk Singapura (tetangga Indonesia), origin justru menang — wajar, edge paling berguna untuk audiens global.
Ada "cold start". Pengukuran PERTAMA saya ke edge yang belum pernah diakses sangat lambat (avg ~1500 ms, LA sempat 2,8 detik) karena node edge itu harus mengambil dari origin dulu. Setelah cache hangat (permintaan berikutnya), turun ke 77 ms rata-rata. Artinya: pengunjung pertama di suatu wilayah "membayar" pemanasan cache; sisanya menikmati kecepatan edge. Untuk aset penting, ini bisa diatasi dengan prefetch/cache warming.

Ini justru yang saya suka dari Edge Functions + edge cache: performanya bisa diukur, dan perilakunya (termasuk cold start) transparan.

Kesan & kenapa ini berguna nyata

Cepat & global tanpa ribet. Saya tak menyewa server atau atur CDN manual — cukup git push.
Edge Functions = server-logic tanpa server. Deteksi OS + geo yang biasanya butuh backend, kini jalan di edge dalam belasan baris.
Cocok untuk distribusi app. Halaman unduh, feed auto-update, smart-redirect installer — semua diuntungkan latensi rendah edge.
Gratis untuk mulai dan langsung dapat domain + HTTPS.

Untuk BerQuran, ini melengkapi sistem desktop yang baru saya bangun (3 OS + auto-update): sekarang pengguna dapat halaman unduh yang pintar dan cepat di mana pun mereka berada.

Repo: github.com/mkwcorp88/berquran-edge · Live: berquran-edge.edgeone.dev

#TencentEdgeOne #EdgeOneMakers #CODEPOLITAN #EdgeOne

DEV Community