JavaScript Browser APIs

console.log(window);
console.log(navigator);
console.log(document);

async function example() {
  const response = await fetch("/api/data");
  return await response.json();
}

async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) throw new Error(`HTTP error: ${response.status}`);
    return await response.json();
  } catch (error) {
    console.error("Fetch failed:", error);
    return null;
  }
}

async function createPost(title, content) {
  const response = await fetch("https://api.example.com/posts", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ title, content, createdAt: new Date().toISOString() })
  });
  if (!response.ok) throw new Error(`Failed: ${response.status}`);
  return await response.json();
}

function fetchWithTimeout(url, timeout = 5000) {
  const controller = new AbortController();
  const id = setTimeout(() => controller.abort(), timeout);
  return fetch(url, { signal: controller.signal })
    .then(res => { clearTimeout(id); if (!res.ok) throw new Error(`HTTP ${res.status}`); return res.json(); })
    .catch(err => { if (err.name === "AbortError") throw new Error("Request timed out"); throw err; });
}

localStorage.setItem("user", JSON.stringify({ name: "Alice", theme: "dark" }));
const user = JSON.parse(localStorage.getItem("user"));
sessionStorage.setItem("tempData", "clears when tab closes");

// localforage.config({ driver: localforage.INDEXEDDB, name: "MyAppDB" });
async function saveUserPreferences(userId, preferences) {
  await localforage.setItem(`prefs_${userId}`, preferences);
}
async function loadUserPreferences(userId) {
  return (await localforage.getItem(`prefs_${userId}`)) || { theme: "light" };
}

const cache = await caches.open("my-cache-v1");
await cache.addAll(["/styles/main.css", "/script.js"]);
const response = await cache.match("/styles/main.css");

const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
}, { rootMargin: "50px", threshold: 0.1 });

const resizeObserver = new ResizeObserver(entries => {
  for (const entry of entries) {
    const { width } = entry.contentRect;
    entry.target.classList.toggle("compact-view", width < 400);
  }
});

const observer = new MutationObserver(mutations => {
  mutations.forEach(m => console.log("Mutation type:", m.type));
});
observer.observe(document.getElementById("comments-container"), { childList: true, subtree: true });

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(
    pos => console.log(pos.coords.latitude, pos.coords.longitude),
    err => console.error(err.message),
    { enableHighAccuracy: true, timeout: 10000, maximumAge: 60000 }
  );
}

// main.js
const worker = new Worker("worker.js");
worker.postMessage({ numbers: [1, 2, 3, 4, 5] });
worker.onmessage = e => console.log("Worker result:", e.data);

// worker.js
self.onmessage = e => {
  const sum = e.data.numbers.reduce((a, b) => a + b, 0);
  self.postMessage({ sum });
};

// main
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js");
}

// sw.js
self.addEventListener("install", event => {
  event.waitUntil(caches.open("app-v1").then(cache => cache.addAll(["/", "/offline.html"])));
});
self.addEventListener("fetch", event => {
  event.respondWith(caches.match(event.request).then(r => r || fetch(event.request)));
});

if (window.navigation) {
  navigation.addEventListener("navigate", event => {
    console.log("Navigating to:", event.destination.url);
  });
}

history.pushState({ page: 2 }, "Page 2", "/page2");
window.addEventListener("popstate", event => {
  console.log("State:", event.state);
});

const dialog = document.getElementById("my-dialog");
dialog.showModal();
dialog.addEventListener("close", () => console.log(dialog.returnValue));

document.addEventListener("visibilitychange", () => {
  if (document.hidden) pauseNonCriticalWork();
  else resumeWork();
});
const permission = await Notification.requestPermission();

const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
document.getElementById("camera-preview").srcObject = stream;

const displayStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const recorder = new MediaRecorder(displayStream);
recorder.start(1000);

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
oscillator.connect(audioContext.destination);
oscillator.start();

const lcpObserver = new PerformanceObserver(list => {
  const entries = list.getEntries();
  console.log("LCP:", entries[entries.length - 1]?.startTime);
});
lcpObserver.observe({ type: "largest-contentful-paint", buffered: true });

const longTaskObserver = new PerformanceObserver(list => {
  for (const e of list.getEntries()) console.warn(`Long task: ${e.duration}ms`);
});
longTaskObserver.observe({ type: "longtask", buffered: true });

if (document.startViewTransition) {
  await document.startViewTransition(() => {
    document.getElementById("main").innerHTML = "
New Content
";
  }).finished;
}

const channel = new BroadcastChannel("app-state");
channel.postMessage({ type: "STATE_UPDATE" });

await navigator.locks?.request("resource-1", async () => syncData());

if (window.showOpenFilePicker) {
  const [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
}

if (navigator.share) {
  await navigator.share({ title: "Check this", url: location.href });
}