Browser APIs

1
// Check if supported
2
if ("geolocation" in navigator) {
3
  navigator.geolocation.getCurrentPosition(
4
    (position) => {
5
      console.log("Latitude:", position.coords.latitude);
6
      console.log("Longitude:", position.coords.longitude);
7
      console.log("Accuracy:", position.coords.accuracy, "meters");
8
    },
9
    (error) => {
10
      switch (error.code) {
11
        case error.PERMISSION_DENIED:
12
          console.log("User denied location access");
13
          break;
14
        case error.POSITION_UNAVAILABLE:
15
          console.log("Location unavailable");
16
          break;
17
        case error.TIMEOUT:
18
          console.log("Location request timed out");
19
          break;
20
      }
21
    },
22
    {
23
      enableHighAccuracy: true, // use GPS if available
24
      timeout: 10000,
25
      maximumAge: 300000, // cache for 5 minutes
26
    }
27
  );
28
}

1
const watchId = navigator.geolocation.watchPosition(
2
  (position) => {
3
    console.log("New position:", position.coords);
4
  },
5
  (error) => console.error(error)
6
);
7

8
// Stop watching
9
navigator.geolocation.clearWatch(watchId);

1
// Check support and permission
2
if ("Notification" in window) {
3
  // Request permission (triggers browser prompt)
4
  const permission = await Notification.requestPermission();
5

6
  if (permission === "granted") {
7
    new Notification("Hello!", {
8
      body: "This is a notification from your web app",
9
      icon: "/icon.png",
10
      tag: "welcome", // replaces previous notification with same tag
11
    });
12
  }
13
}

1
function notifyUser(title, options = {}) {
2
  if (Notification.permission === "granted") {
3
    const notification = new Notification(title, {
4
      body: options.body || "",
5
      icon: options.icon || "/favicon.ico",
6
      ...options,
7
    });
8

9
    notification.onclick = () => {
10
      window.focus();
11
      notification.close();
12
      // Navigate or open content
13
      if (options.url) {
14
        window.location.href = options.url;
15
      }
16
    };
17

18
    // Auto-close after 5 seconds
19
    setTimeout(() => notification.close(), 5000);
20
  }
21
}

1
// Write to clipboard
2
async function copyToClipboard(text) {
3
  try {
4
    await navigator.clipboard.writeText(text);
5
    console.log("Copied!");
6
  } catch (err) {
7
    console.error("Copy failed:", err);
8
  }
9
}
10

11
// Read from clipboard
12
async function pasteFromClipboard() {
13
  try {
14
    const text = await navigator.clipboard.readText();
15
    console.log("Pasted:", text);
16
    return text;
17
  } catch (err) {
18
    console.error("Paste failed:", err);
19
  }
20
}
21

22
// Copy rich content (HTML)
23
async function copyRichContent(html) {
24
  try {
25
    const blob = new Blob([html], { type: "text/html" });
26
    const clipboardItem = new ClipboardItem({ "text/html": blob });
27
    await navigator.clipboard.write([clipboardItem]);
28
  } catch (err) {
29
    console.error("Rich copy failed:", err);
30
  }
31
}

1
const observer = new IntersectionObserver(
2
  (entries) => {
3
    entries.forEach((entry) => {
4
      if (entry.isIntersecting) {
5
        // Element is visible
6
        console.log("Element visible:", entry.target);
7

8
        // Lazy load the content
9
        entry.target.src = entry.target.dataset.src;
10
        entry.target.classList.add("loaded");
11

12
        // Stop observing once loaded
13
        observer.unobserve(entry.target);
14
      }
15
    });
16
  },
17
  {
18
    root: null, // viewport (default)
19
    rootMargin: "200px", // trigger 200px before element enters viewport
20
    threshold: 0.1, // 10% of element must be visible
21
  }
22
);
23

24
// Observe elements
25
document.querySelectorAll("[data-src]").forEach((img) => observer.observe(img));

1
const sentinel = document.getElementById("scroll-sentinel");
2
let page = 1;
3

4
const observer = new IntersectionObserver(async (entries) => {
5
  if (entries[0].isIntersecting) {
6
    page++;
7
    const posts = await fetchPosts(page);
8
    appendPosts(posts);
9
  }
10
}, { rootMargin: "100px" });
11

12
observer.observe(sentinel);

1
const fadeObserver = new IntersectionObserver((entries) => {
2
  entries.forEach((entry) => {
3
    if (entry.isIntersecting) {
4
      entry.target.classList.add("fade-in");
5
      fadeObserver.unobserve(entry.target);
6
    }
7
  });
8
}, { threshold: 0.2 });
9

10
document.querySelectorAll(".fade-on-scroll").forEach((el) => {
11
  fadeObserver.observe(el);
12
});

1
const container = document.querySelector(".responsive-container");
2

3
const resizeObserver = new ResizeObserver((entries) => {
4
  for (const entry of entries) {
5
    const { width, height } = entry.contentRect;
6

7
    console.log(`Container: ${width}x${height}`);
8

9
    // Adapt layout based on available space
10
    if (width < 400) {
11
      container.classList.add("compact");
12
      container.classList.remove("expanded");
13
    } else {
14
      container.classList.remove("compact");
15
      container.classList.add("expanded");
16
    }
17
  }
18
});
19

20
resizeObserver.observe(container);

1
<div class="drag-container">
2
  <div class="drag-item" draggable="true">Item 1</div>
3
  <div class="drag-item" draggable="true">Item 2</div>
4
  <div class="drag-item" draggable="true">Item 3</div>
5
</div>
6
<div class="drop-zone">Drop Here</div>

1
const items = document.querySelectorAll(".drag-item");
2
const dropZone = document.querySelector(".drop-zone");
3

4
// Drag source events
5
items.forEach((item) => {
6
  item.addEventListener("dragstart", (event) => {
7
    event.dataTransfer.setData("text/plain", item.textContent);
8
    item.classList.add("dragging");
9
  });
10

11
  item.addEventListener("dragend", () => {
12
    item.classList.remove("dragging");
13
  });
14
});
15

16
// Drop target events
17
dropZone.addEventListener("dragover", (event) => {
18
  event.preventDefault(); // required for drop to work
19
  dropZone.classList.add("drag-over");
20
});
21

22
dropZone.addEventListener("dragleave", () => {
23
  dropZone.classList.remove("drag-over");
24
});
25

26
dropZone.addEventListener("drop", (event) => {
27
  event.preventDefault();
28
  dropZone.classList.remove("drag-over");
29
  const data = event.dataTransfer.getData("text/plain");
30
  dropZone.textContent = `Dropped: ${data}`;
31
});

1
// Enter fullscreen
2
function enterFullscreen(element = document.documentElement) {
3
  if (element.requestFullscreen) {
4
    element.requestFullscreen();
5
  } else if (element.webkitRequestFullscreen) {
6
    element.webkitRequestFullscreen(); // Safari
7
  } else if (element.msRequestFullscreen) {
8
    element.msRequestFullscreen(); // IE
9
  }
10
}
11

12
// Exit fullscreen
13
function exitFullscreen() {
14
  if (document.exitFullscreen) {
15
    document.exitFullscreen();
16
  } else if (document.webkitExitFullscreen) {
17
    document.webkitExitFullscreen();
18
  } else if (document.msExitFullscreen) {
19
    document.msExitFullscreen();
20
  }
21
}
22

23
// Check state
24
document.addEventListener("fullscreenchange", () => {
25
  console.log("Fullscreen:", !!document.fullscreenElement);
26
});

1
// Check if online/offline
2
console.log("Online:", navigator.onLine);
3

4
// Listen for changes
5
window.addEventListener("online", () => {
6
  console.log("Back online");
7
  showOnlineNotification();
8
});
9

10
window.addEventListener("offline", () => {
11
  console.log("Lost connection");
12
  showOfflineBanner();
13
});

1
window.addEventListener("deviceorientation", (event) => {
2
  console.log("Alpha:", event.alpha);   // compass direction (0-360)
3
  console.log("Beta:", event.beta);     // front-to-back tilt (-180 to 180)
4
  console.log("Gamma:", event.gamma);   // left-to-right tilt (-90 to 90)
5
});

1
if ("getBattery" in navigator) {
2
  const battery = await navigator.getBattery();
3

4
  console.log("Level:", battery.level * 100 + "%");
5
  console.log("Charging:", battery.charging);
6
  console.log("Time until full:", battery.chargingTime, "seconds");
7

8
  battery.addEventListener("levelchange", () => {
9
    if (battery.level < 0.2) {
10
      console.log("Battery low!");
11
    }
12
  });
13
}