Superpowers of browser's Web API

Web API

console.log(1);
setTimeout(() => console.log(2), 0);
console.log(3);

Web API

Collection of built-in interfaces that allow developers to interact with and manipulate web pages and web applications within a web browser.

Web API

- Web API docs

Nikola Mitrović

Development Lead & Software Engineer

Vega IT

Novi Sad, Serbia

Intersection Observer API

Provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport

Intersection Observer API

import { useState, useEffect, RefObject } from 'react';

export const useVisible = (
  ref: RefObject<HTMLDivElement>,
  options = {
    root: null,
    rootMargin: '0px',
    threshold: 1.0
  }
) => {
  const [isVisible, setIsVisible] = useState<boolean>(false);

  useEffect(() => {
    const { current: elementRef } = ref;
    
    if (elementRef) {
      const observer = new IntersectionObserver(
        ([entry]) => setIsVisible(entry.isIntersecting), options
      );

      observer.observe(elementRef);

      return () => observer.unobserve(elementRef);
    }
  }, [ref, options]);

  return isVisible;
};

Intersection Observer API - Use Cases

Lazy-load images

Infinite scroll lists

Defer animations

Save compute power

Intersection Observer API - Browser Support

Page Visibility API

Provides events you can watch for to know the current visibility state of the page
Triggers when user

switches tab

minimizes window

puts another window as overlay

locks/turns off device

Page Visibility API

import { useEffect, useState } from "react";

export const usePageVisibility = () => {
  const [pageVisible, setPageVisible] = useState<boolean>(true);

  useEffect(() => {
    const handleVisibilityChange = () => {
      const isPageVisible = document.visibilityState === "visible";
      setPageVisible(isPageVisible);
	};

    document.addEventListener("visibilitychange", handleVisibilityChange);

    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, []);

  return pageVisible;
};

Page Visibility API - Use Cases

Improving performance

Pause audio/video

Detect page visit count

Poll server data

Carousel

Page Visibility API - Browser Support

Screen Wake Lock API

Prevent devices from locking the screen when an application needs to keep running
Only visible (active) documents can acquire the screen wake lock

Screen Wake Lock API

import { useEffect, useCallback, useRef } from 'react';

export const useWakeLock = (shouldWakeLock = false) => {
  let sentinel = useRef<WakeLockSentinel | null>(null);

  const requestWakeLockSentinel = useCallback(async () => {
    sentinel.current = await navigator.wakeLock.request('screen');
  }, []);

  const releaseWakeLockSentinel = useCallback(async () => {
    await sentinel.current?.release();
    sentinel.current = null;
  }, []);

  useEffect(() => {
    (async () => {
      if (shouldWakeLock) {
        await requestWakeLockSentinel();

        return releaseWakeLockSentinel;
      }

      await releaseWakeLockSentinel();
    })();
  }, [shouldWakeLock, requestWakeLockSentinel, releaseWakeLockSentinel]);

  return { isWakeLock: !!sentinel.current };
};