Independent Consultant
JavaScript in the Background
4 hours, 59 minutes
CC
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.
Preview
CloseCourse 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
Table of Contents
Introduction
Section Duration: 13 minutes
Maximiliano Firtman introduces the course by providing some personal and professional background, an overview of the course material, and course prerequisites.
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
Maximiliano discusses the possible situations that impact a web application's life cycle and what happens on mobile OS life cycles. Unlike the desktop OS, where applications continue running in the background, on a mobile OS, applications are paused and do not consume resources.
Maximiliano demonstrates differences in background processes between various desktop browsers, including FPS, timers, web worker execution, and service worker execution. Student questions regarding if timers will stop when hidden and if a queue will execute when returning to a tab are also covered in this segment.
Maximiliano demonstrates differences in background processes between Android and iOS, including FPS, timers, web worker execution, and service worker execution. A student's question regarding if PWAs installed through the App Store will have the same life cycle is also covered in this segment.
Maximiliano discusses the limits of executing code in the background and available options, including Google Play Store PWA, App Store PWA, service worker background APIs, and playing audio and video.
Service Worker Background APIs
Section Duration: 45 minutes
Maximiliano demonstrates the service worker background APIs, Web Push, Background Sync, Periodic Background Sync, Background Fetch, and Payment Handler. These service worker APIs add abilities on top of the main spec, differ in browser compatibility, and may have no visible UI when used.
Maximiliano discusses detecting whether or not an app is currently in the background. Student questions regarding if there is data to tell what type of visibility change occurred, what happens with the RAM allocated to the application, and if the document.wasDiscard boolean ever returns to false is also covered in the segment.
Maximiliano briefly discusses detecting the visibility state change with event listeners.
Maximiliano walks through the contents of the course repository, repo setup instructions, and live codes an event listener to detect visibility changes. The method covered in this segment uses the Page Visibility API.
Maximiliano discusses using the Page Lifecycle API to detect a freeze event, if there is suspension on the desktop, and demonstrates discards on Google Chrome. The Page Lifecycle API is currently only available for some chromium browsers.
Maximiliano discusses detecting an application's state change to decide if a page needs to be restored. Instead of the Page Lifecycle API on mobile devices, visibilitychange should be used to avoid compatibility issues.
Service Workers
Section Duration: 1 hour, 20 minutes
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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
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.
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.
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.
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.
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.
Maximiliano discusses whether requesting subscription details on each page load is necessary and demonstrates sending push notifications on various browsers.
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
Maximiliano wraps up the course by summarizing the course material covered and thanking students for taking this course.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops