Beyond the basicsAdvanced8h

Web standards.

PWA, service workers, web components — beyond React.

What is it?

The web platform ships powerful primitives that frameworks don't replace: service workers (offline + background sync), the Cache API, web components (framework-agnostic custom elements), the Intersection/Resize/Mutation observers, and the growing set of capability APIs. Knowing them means reaching past React when the platform already solved the problem.

Why it matters

Framework knowledge expires. Platform knowledge compounds. A developer who understands service workers, observers, and web components can solve problems React can't — offline support, framework-agnostic widgets, efficient scroll effects — and isn't stranded when the framework churns. It's optional, but it's how you stop being "a React developer" and become "a web developer."

What to learn

  • Progressive Web Apps: manifest, installability, offline
  • Service workers: lifecycle, fetch interception, the Cache API
  • Web components: custom elements, shadow DOM, slots
  • The observer APIs: Intersection, Resize, Mutation, Performance
  • Background sync and push notifications
  • Capability APIs: Web Share, Clipboard, File System Access
  • Progressive enhancement as a design principle

Common pitfall

Reaching for a library to do what an observer does natively. Scroll-spy, lazy-loading, infinite scroll, sticky-detection — all built on IntersectionObserver, all one small hook. Importing a 30 KB scroll library for what 15 lines of platform code handles is the kind of bloat that hurts Core Web Vitals.

Resources

Primary (free):

Practice

Take a content site and make it work offline. Register a service worker, cache the shell + key pages with the Cache API, and add a web app manifest so it's installable. Test by going offline in devtools and reloading. Done when the site loads with no network connection.

Outcomes

  • Register a service worker and cache an app shell for offline use.
  • Replace a scroll library with IntersectionObserver.
  • Build a framework-agnostic web component with shadow DOM.
  • Decide when a platform API beats a library import.
Back to Frontend roadmap