Coba bayangin kamu jago DOM saja — bisa baca-tulis HTML, tapi gak bisa: ngenotif user, deteksi posisi geo, akses kamera, deteksi kalo elemen masuk viewport, jalanin kode di thread terpisah. Kamu cuma scratch surface dari kemampuan browser modern. Web APIs itu koleksi tools tambahan yang browser sediain GRATIS — Notification, Geolocation, IntersectionObserver, ResizeObserver, MutationObserver, Web Worker, Camera, Microphone, dan puluhan lagi. Tinggal pilih sesuai kebutuhan.

💡 Wajib HTTPS + permission. Banyak Web API sensitif (camera, mic, geolocation, notification) cuma jalan di context HTTPS + butuh permission user explicit. Localhost diizinkan buat development. File:// dan http:// production = tools terkunci. Konsekuensi modern security.

1. IntersectionObserver — deteksi elemen masuk viewport:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("terlihat");
    }
  });
});
observer.observe(document.querySelector(".kartu"));

Kegunaan: lazy loading gambar, infinite scroll, animasi masuk.

2. MutationObserver — deteksi perubahan DOM:

const observer = new MutationObserver((mutations) => {
  mutations.forEach(m => console.log("DOM berubah!"));
});
observer.observe(element, { childList: true, subtree: true });

3. ResizeObserver — deteksi perubahan ukuran elemen:

const observer = new ResizeObserver((entries) => {
  entries.forEach(e => {
    console.log("Ukuran:", e.contentRect.width);
  });
});
observer.observe(element);

4. Web Workers — jalankan kode di thread terpisah:

const worker = new Worker("worker.js");
worker.postMessage("mulai");
worker.onmessage = (e) => console.log(e.data);

5. Notification API:

Notification.requestPermission().then(perm => {
  if (perm === "granted") {
    new Notification("Halo!", { body: "Pesan baru" });
  }
});

🎭 Analogi sehari-hari

Browser = toolbox raksasa. DOM cuma satu tool — masih ada palu (Notification), gergaji (Worker thread), kamera (Camera API), GPS (Geolocation), pendengaran (Microphone), sensor gerak (DeviceMotion), dll. Tinggal pilih sesuai kerjaan.

Sebagian besar tool butuh izin user (sama seperti aplikasi mobile minta permission install).

⚠️ Jebakan yang sering ditemui

• Permission async + bisa di-deny. Notification.requestPermission() return Promise — user bisa klik "Block". Selalu cek permission value sebelum pakai.
• Observer harus .disconnect() saat element/component unmount — kalau tidak, MEMORY LEAK + observer terus listen.
• Web Worker tidak bisa akses DOM — punya scope sendiri, hanya self. Komunikasi via postMessage (data di-clone, bukan share reference).
• Banyak API HTTPS-only — Notification, Geolocation, Camera, Service Worker. Localhost diizinkan, file:// dan http:// tidak.
• structuredClone untuk pesan ke Worker — function tidak bisa di-pass (tidak serializable).
• IntersectionObserver threshold: 1.0 trigger pas elemen 100% terlihat — kalau elemen lebih besar dari viewport, tidak akan pernah trigger.
• ResizeObserver loop — jangan modify dimensi di dalam callback, bikin loop tak terbatas (browser warn ResizeObserver loop completed).

TL;DR: Web APIs = tools tambahan browser di luar DOM. IntersectionObserver (deteksi viewport), ResizeObserver (deteksi resize), MutationObserver (DOM changes), Notification, Geolocation, Camera, Web Worker. Banyak API HTTPS-only + butuh permission user. Wajib .disconnect() observer saat unmount (memory leak). Worker gak bisa akses DOM, komunikasi via postMessage (data di-clone). Localhost diizinkan buat dev.