Table of Contents
IntroductionMaximiliano Firtman introduces the course by providing some personal and professional background, an overview of the course material, and course prerequisites.
The BackgroundMaximiliano 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 LifecycleMaximiliano 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.
Service Worker Background APIs
Service Worker Background APIsMaximiliano 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 DetectionMaximiliano 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 DetectionMaximiliano briefly discusses detecting the visibility state change with event listeners.
Coding Visibility ChangeMaximiliano 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 DetectionMaximiliano 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 DetectionMaximiliano 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 Worker CapabilitiesMaximiliano 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&AMaximiliano 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 WorkerMaximiliano 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 & UIMaximiliano 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.
Picture In Picture PossibilitiesMaximiliano 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.
Beacon APIMaximiliano 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.
Background Sync Q&AMaximiliano 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 SyncMaximiliano 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 FetchMaximiliano 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 NotificationsMaximiliano 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 SetupMaximiliano 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 KeysMaximiliano 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 SubscriptionsMaximiliano 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.jsMaximiliano 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 AccessMaximiliano discusses whether requesting subscription details on each page load is necessary and demonstrates sending push notifications on various browsers.
Options & EventsMaximiliano 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.