JavaScript in the Background

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
4 hours, 59 minutes CC
JavaScript in the Background

Course Description

What happens to your JavaScript when the user closes their browser or leaves your web app in the background? Explore new capabilities for your web app to detect these changes and execute code later. Improve user experience through things like updating the user, saving and restoring state, or processing pending operations. Plus, using the Web Push API, you can enable users to subscribe to receive real-time push notifications from your web app.

This course and others like it are available as part of our Frontend Masters video subscription.


Course Details

Published: January 12, 2023

Learning Paths

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents


Section Duration: 13 minutes
  • Introduction
    Maximiliano Firtman introduces the course by providing some personal and professional background, an overview of the course material, and course prerequisites.
  • The Background
    Maximiliano discusses an introduction to the background, including what's considered background for code execution and a diagram displaying the process of ios code execution. Examples of why to care about the background, including improving user experience, saving resources, stopping timers, and aborting pending requests, are also covered in this segment.

Web App Lifecycle

Section Duration: 35 minutes

Service Worker Background APIs

Section Duration: 45 minutes

Service Workers

Section Duration: 1 hour, 20 minutes
  • Service Worker Capabilities
    Maximiliano discusses the definition of a service worker is and how they differ from web workers. Service workers run client-side in the browser's engine, require HTTPS, have their own thread and lifecycle, and have no need for the user's permission.
  • Service Worker Q&A
    Maximiliano answers student questions regarding what prevents service workers from draining battery power and taking up bandwidth and if there are OS-level interactions with a service worker.
  • Registering a Service Worker
    Maximiliano demonstrates the ability to execute code in a separate lifecycle by registering a service worker. A demonstration of accessing this separate lifecycle through the Chrome dev tools is also provided in this segment.
  • Notifications & UI
    Maximiliano discusses notifying users when the UI updates in the background, previously used methods of notifying users, and a cross-platform solution being used today. Web Notifications is currently the only cross-platform solution, but it requires the user's permission, and it is the same permission used for Push messaging.
  • Media Session API
    Maximiliano discusses media playing as a recent use case for background JavaScript. The Media Session API provides metadata and events for audio playing and can now be used for calls and video calls.
  • Picture In Picture Possibilities
    Maximiliano provides a demo that uses the Picture in Picture API to render real times stats, metadata, a time tracker, and a drawing canvas. A student's question regarding how a video stream is being dynamically generated is also covered in this segment.
  • Media Session & PiP Practice
    Maximiliano live codes a media session to play media by using the Media Session API to send metadata and run JavaScript in the background. A demonstration of using the Picture in Picture API to toggle a video's picture in picture mode is also covered in this segment.
  • Beacon API
    Maximiliano demonstrates using the Beacon API for network requests where the response can be ignored. Student questions regarding a beacon's priority within the browser, if YouTube uses the Picture in Picture API, and if the picture-in-picture content can be inspected are also covered in this segment.

Waking Up Background JavaScript

Section Duration: 50 minutes
  • Background Sync
    Maximiliano discusses waking up client-side JavaScript while an application is in the background and demonstrates one possible method using Background Sync. The Background Sync API only requires registering the service worker and an event listener to listen for the sync event.
  • Background Sync Q&A
    Maximiliano answers student questions regarding why the event is named "sync", what the sync operation does, if a sync is the same as a push, and how a server can wake up a service worker.
  • Periodic Background Sync
    Maximiliano demonstrates the Periodic Background Sync API, where the PWA will ask the user for permission to periodically execute code in the background by firing a periodicsync event. Students' questions regarding automatically granting permissions for localhost and checking engagement scores are also covered in this segment.
  • Background Fetch
    Maximiliano discusses the Background Fetch API, which asks the web engine to make fetch download requests that the browser will download in the background. A walkthrough of the background fetch API script is also covered in this segment.

Push Notifications

Section Duration: 1 hour, 12 minutes
  • Push Notifications
    Maximiliano discusses push notifications as an umbrella term for APIs and abilities that, when given permission, notify the user from the server. A student question regarding if the API has built-in reasoning to inform users why permission is needed and a walk-through of the web push subscription architecture are also covered in this segment.
  • Push Notifications Setup
    Maximiliano walks through manually implementing push notifications, including checking if web push is available. Google Chrome will track web push usage and block notifications if it thinks web push is being abused.
  • Generating Keys
    Maximiliano demonstrates how to generate a pair of public and private keys for web push using the npm web-push library. Keys are necessary for the push server to recognize who is requesting notifications and avoid responding to fraudulent requests.
  • Creating Subscriptions
    Maximiliano walks through creating subscriptions by making a fetch request to the server for the subscription details. The push notification API is not currently supported on iOS or Safari versions older than Ventura.
  • Registering Subscriptions in Node.js
    Maximiliano demonstrates registering notification subscriptions by sending the subscription data to the server, including endpoint and key data. Student questions regarding what happens if the web browser isn't running and what happens if the system is off.
  • Requesting Subscription Access
    Maximiliano discusses whether requesting subscription details on each page load is necessary and demonstrates sending push notifications on various browsers.
  • Options & Events
    Maximiliano walks through some notification options, including icons, badges, images, vibration patterns, and interaction requirements. Student questions regarding where the notification click event is located and how the browser knows it is in the event listener are also covered in this segment.

Wrapping Up

Section Duration: 2 minutes

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now