JavaScript in the Background
Learning Paths:
Topics:
Table of Contents
Introduction
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
Web App Lifecycle
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.
Observing Desktop Background JavaScript
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.
Observing Mobile Background JavaScript
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.
Background JavaScript Execution Rights
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
Service Worker Background APIs
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.
Background Detection
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.
Visibility Change Detection
Maximiliano briefly discusses detecting the visibility state change with event listeners.
Coding Visibility Change
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.
Freezing Detection
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.
App Change Detection
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
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
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
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.
