This repository documents my learnings from JavaScript in the Background on Frontend Masters, taught by Maximiliano Firtman (Software Engineer & Educator).
📅 Course Timeline
- Started: May 5, 2026
- Completed: May 18, 2026
A comprehensive exploration of what happens to your JavaScript when the user closes their browser tab or leaves your web app running in the background. This course reveals the new capabilities that allow web apps to detect state changes, execute code later, and maintain functionality even when not actively in focus.
Unlike traditional web development that assumes your app is always foregrounded and active, this course tackles the real-world complexity of modern web apps—where users switch tabs, lock their phones, or close browsers entirely. You'll learn how to improve user experience by updating users, saving and restoring state, processing pending operations, and even sending real-time push notifications.
Key topics include:
- 📱 Web App Lifecycle: Understanding what happens on desktop vs. mobile OS—how mobile apps are paused and don't consume resources
- 🔍 Observing Background Behavior: Differences across browsers (Chrome, Safari, Firefox) in FPS, timers, web workers, and service workers when tabs are hidden
- 📊 Desktop vs. Mobile Differences: How Android and iOS handle background JavaScript execution differently
- ⚖️ Execution Rights & Limits: What code can run in the background and what options are available (PWAs on Google Play vs. App Store, service worker APIs, audio/video playback)
- 🛠️ Service Worker Background APIs: Web Push, Background Sync, Periodic Background Sync, Background Fetch, and Payment Handler
- 👁️ Background Detection: Determining whether your app is currently in the background using various detection methods
- 📄 Page Visibility API: Detecting visibility state changes with event listeners to pause/resume timers, video playback, or analytics
- ❄️ Freezing Detection: Using the Page Lifecycle API to detect freeze events (currently available in Chromium browsers)
- 📱 App Change Detection: Deciding when a page needs state restoration—using
visibilitychangefor better mobile compatibility - 👷 Service Workers Deep Dive: What service workers are, how they differ from web workers, their HTTPS requirement, independent thread and lifecycle, and permission-free operation
- 🔔 Web Notifications: The only cross-platform solution for notifying users about background UI updates (requires user permission)
- 🎵 Media Session API: Providing metadata and handling events for audio, calls, and video calls playing in the background
- 🖼️ Picture-in-Picture API: Rendering real-time stats, metadata, time trackers, and drawing canvases in a floating window
- 📡 Beacon API: Making network requests where the response can be ignored—perfect for analytics and logging during page unload
- ⏰ Background Sync: Waking up client-side JavaScript while the app is in the background to sync data with the server
- 🔄 Periodic Background Sync: Asking user permission to periodically execute code in the background (e.g., refreshing content every few hours)
- 📥 Background Fetch: Asking the browser engine to make fetch download requests that complete even if the user closes the app
- 📨 Push Notifications: The umbrella term for APIs that allow servers to notify users (with permission)—including architecture, key generation, subscriptions, and Node.js integration
- 🔑 Web Push Setup: Generating public/private key pairs using the
web-pushnpm library, creating subscriptions, and registering them on the server - 🎨 Notification Options: Icons, badges, images, vibration patterns, and interaction requirements for rich notifications
Throughout the course, practical demonstrations show how to implement each API, detect browser compatibility issues, and handle real-world edge cases.
I took this course to improve my knowledge about running scripts when the app closes or enters different lifecycle states, and to learn about notifications, background sync, push messaging, and other background execution capabilities that modern Progressive Web Apps need.
Due to regional restrictions in Iran, I accessed this course through alternative means. While I don't have an official certificate, I completed the lessons, followed the demonstrations, and documented my implementations and takeaways in this repository.