firt.dev

iOS PWA Compatibility

2026-10-13T00:00:00Z

This is a compatibility list of supported features on Safari on iOS and iPadOS vs. what's available in the most used PWA browser in current market share for similar mobile devices: Google Chrome on Android.

This list is based and maintained on private tests I frequently do. WebKit is getting better documenting these things, but there is still a huge gap.

High-level PWA support #

Ability	Supported	Since version
Offline Support with Service Workers	✅	11.3
App Installation from Browser	✅	11.3 (from 2.0 with `meta` tags). Since 26.0 every website can be installed as a web app
App Installation from Store	✅	14.0 with WebView and App-Bound domains (no official announcement)
App Installation for Enterprise	✅	10.0 (MobileConfig file)
Installation Prompt or Banner	❌
Singleton Installation	❌
App Installation Recovery with Backup	✅	11.3
Link Capturing	❌	Only a push message can open an installed PWA
In-App Browser for out-of-scope links	✅	12.0
Storage shared with Browser	❌
App appears in Search	✅	11.3 (from 4.0 with `meta` tags)
App appears in Multitasking list	✅	11.3 (from 2.0 with `meta` tags)
App appears in Homescreen	✅	11.3 (from 2.0 with `meta` tags)
App appears in App Gallery Folders	❌
App can share screen with other apps	✅	14.0 (iPadOS-only)
App can be installed from non-Safari browsers	✅	16.4, if opted-in by the browser
App can be installed from Safari View Controller	✅	17.0
Login cookies copied to the installed app	✅	17.2

Since iOS and iPadOS 26, every website your users add to the Home Screen opens as a web app by default, even if it doesn't have a manifest or the apple-mobile-web-app-capable meta tag. Users can turn off Open as Web App when adding it to get a browser bookmark instead. If your app has a manifest, Safari still uses it, including its icons.

Web App Manifest Support #

W3C Spec Fields #

Field	Supported	Since version
`dir`	❌
`lang`	❌
`name`	✅	11.3
`short_name`	✅	11.3
`scope`	✅	11.3
`icons`	✅	15.4
`display`	✅	11.3
`orientation`	❌
`start_url`	✅	11.3
`id`	✅	16.4 (it's concatenated with icon's name)
`theme_color`	✅	15.0
`related_applications`	❌
`prefer_related_applications`	❌
`background_color`	❌
`shortcuts`	❌	Only on macOS since 17.4

Before iOS 15.4, icons for PWAs can only be set by the non-standard <link> element with rel=apple-touch-icon. If you still have that element, it overrides your manifest icons declaration.

Display options #

Value	Supported	Fallbacks To
`browser`	✅
`standalone`	✅
`minimal-ui`¹	❌	browser
`fullscreen`¹	❌	standalone

Icon Options #

Option	Supported
PNG Image	✅
SVG Image⁴	✅ since 26.0
Maskable Icon¹	❌
Monochrome Icon¹	❌

¹ WebKit recognizes these options, but it ignores them. The apple-touch-icon link element in the HTML overrides the manifest icon declaration.

⁴ SVG icons only work when you declare them in the manifest. If you use an SVG in the apple-touch-icon link element or as a favicon, Safari downloads it but doesn't use it for the Home Screen icon.

The list of fields comes from the latest W3C Working Draft. What's supported on WebKit can be seen by testing or by checking the WebKit Source code (ApplicationManifest.h).

Option	Supported since	Should you use it?	Replaced by
`apple-mobile-web-app-capable` meta	2.0	🫱 since 11.3 it's optional²; since 26.0 it's not needed to open as an app	`display: standalone` in manifest
`apple-mobile-web-app-title` meta	8.0	👎 since 11.3	`name` in manifest
`apple-mobile-web-app-status-bar-style` meta	2.0	👎 since 15.0	`theme-color` meta tag
`black-translucent` status bar meta	2.0	👍 Still the only way to get a fullscreen app
`apple-touch-icon` link	2.0	🫱 (optional since 15.4 but still useful)	`icons` in manifest
`apple-touch-startup-image` link	8.0	👍 Still the only way to define splash screens²
`navigator.standalone` flag	2.0	👎 since 11.3	`display-mode` media query

² Startup images only work if the apple-mobile-web-app-capable meta tag is present despite the presence of the manifest standalone replacement.

Manifest Incubations #

Field	Supported	Since version
`display_override`	❌
`share_target`	❌
`note_taking`	❌
`protocol_handlers`	❌
`appinstalled` event	❌
`beforeinstallprompt` event (installation prompt)	❌

The list of fields comes from the latest Web Application Manifest Incubators supported in Google Chrome for Android (stable or experimental).

These abilities may only be suitable for iPadOS devices.

Ability	Supported	Since version
Window Controls Overlay	❌
Tabbed Display	❌

Service Workers Support #

Ability	Supported	Since version
Fetch API	✅	10.1
Service Worker Support	✅	11.3
Cache Storage interface	✅	11.3
UpdateViaCache at Registration	✅	15.0
Streams	✅ (partial)	11.3
Navigation Preload	✅	15.4
Static Routing	✅	27.0

Abilities on Top of Service Workers #

Ability	Supported	Since version
Web Push	✅	16.4 only for installed PWAs³
Declarative Web Push	✅	18.4 only for installed PWAs; it doesn't need a service worker
Background Sync	❌
Periodic Background Sync	❌
Background Fetch	❌

³ Web Push only works if the web app is installed in the home screen; not available in Safari or other browsers

High-level overview of Web abilities for PWAs #

Ability	Supported	Since version
Geolocation	✅	2.0
Web Storage	✅	2.0
IndexedDB	✅	8.0
Web Workers	✅	5.0
Shared Web Workers	✅	5.0 to 6.1, back in 16.0
2D Canvas	✅	2.0
3D Canvas: WebGL	✅	8.0
3D Canvas: WebGL 2.0	✅	15.0
WebGPU	✅	26.0
Web XR (VR & AR)	❌	Only for visionOS
Web Assembly	✅	11.0
Clipboard	✅	12.0
Credential Management	✅	14.0
Payment Request	✅	12.2
Payment Handler	❌
Motion Sensors	✅	4.2 to 12.1, back in 13.0
Touch Events	✅	2.0
Pointer Events	✅	13.2
Camera and Microphone Access (getUserMedia)	✅	13.0
Advanced Camera Controls	❌
Media Recorder	✅	14.5
Media Session	✅	15.0
Web Speech Synthesis	✅	7.0
Web Speech Recognition	✅	14.5
Web Bluetooth	❌
WebAudio	✅	6.0
WebSerial	❌
WebNFC	❌
WebHID	❌
Battery Status	❌
Ambient Light	❌
Vibration	❌
GamePad	✅	10.3
Screen Wake Lock	✅	16.4 (18.4 for installed PWAs)
User Activation	✅	16.4
Device Memory	❌
Idle Detection	❌
Screen Orientation	✅	16.4 (partial support)
Presentation	❌
Pointer Lock	❌
Network Information	❌
Screen Capture	❌
Shape Detection	❌⏳	17 (experimental)
SMS OTP `input` attribute	✅	14.0
SMS WebOTP API	❌
Virtual Keyboard	❌
File through `input`	✅	6.0
FileSystem Access (public fs)	❌
FileSystem Access (origin private fs)	✅	15.2 (writable streams since 26.0)
Storage Management: Persistent	✅	15.2
Storage Management: Quota	✅	17
Contact Picker	⏳	14.5 (experimental)
Cookie Store	✅	18.4
Web Sockets	✅	4.2
WebTransport	✅	26.4
WebRTC	✅	11.0
Web Codecs	✅	16.4
Web Notifications	✅	16.4
App Badging	✅	16.4 only for installed PWAs
Fullscreen	✅	8.0 (iPad only)
Page Visibility	✅	7.0
Web Authentication	✅	14.5
Digital Credentials	✅	26.0
Web Share	✅	12.1
Web Share 2.0	✅	15.0
Get Installed Related Apps	❌

Safari-only abilities for PWAs #

Ability	Since version	Standard replacement?
Apple Pay JS	10.0	Payment Request (compatible)
Quick Look for Augmented Reality	12.0
`<model>` Element for Augmented Reality	17.0
WebMetal	12.2 (experimental)	WebGPU (since 26.0)
Safari Push Notifications (mac-only)	not on iOS	Web Push (Safari 16)
Gesture touch events	4.0
Smart App Banners	6.0
Sign In with Apple	13.0

This is a quick and dirty list of abilities in the Web Platform and its compatibility in Safari and installed PWAs. Each ability has many properties or sub-abilities that may or may not be available on every browser, so check Can I Use to see how it works on iOS and iPadOS. Use always Feature Detection.

Contact me if you want to suggest a feature or report a bug in these tables.

Unlocking Client-Side AI in Your Web App

2026-09-18T00:00:00Z

During dotJS 2026 in Paris 🇫🇷 I delivered this talk about running generative AI entirely on the client side

https://www.youtube.com/watch?v=kJ5GyP9HGio

You don't need a cloud subscription or backend infrastructure to bring powerful AI features into your web app. Thanks to modern browser APIs and local model support, it's now possible to run generative AI — including text, vision, and speech — entirely on the client side.

In this session, you'll learn how to unlock AI capabilities in the browser using built-in AI APIs, WebNN, WebGPU, and WebAssembly. We'll explore how on-device models, such as Gemini Nano in Chrome, and open-source models enable local inference for language, vision, and audio: privately, offline, and without recurring cloud costs.

We'll cover architecture patterns, browser and device capabilities, and live demos, including how to detect support and decide when to use built-in models, your own client-side models, or a cloud fallback.

If you're building for the Web, this talk shows how to add real AI to your web app: locally, privately, and using technologies available in the browser today.

WebMCP: Making Web Apps Faster and Cheaper for Coding Agents

2026-06-18T00:00:00Z

During AI DevCon 2026 in London 🇬🇧 I delivered this talk about WebMCP and how web apps can expose tools to AI agents

https://www.youtube.com/watch?v=BV7RYioryKE

Coding agents still use web apps the hard way: taking screenshots, scraping the DOM and guessing where to click. That wastes tokens, it's slow, and it breaks as soon as the UI changes.

In this session, you'll see how WebMCP changes that by letting your web app expose its own tools to the agent with a clear contract. We'll cover where WebMCP fits in the MCP ecosystem and next to browser automation, what you gain by exposing tools instead of letting agents drive the UI, and its current experimental status at the W3C.

We'll also go through the security considerations and the current limitations, so you know what you can ship today and what is still coming.

Vanilla Web Book 🆕

2026-05-05T00:00:00Z

I'm happy to annouce my 15th book: Vanilla Web published by Manning Books. It's currently available at MEAP (Early Access Program): you can read it while it's being written and get the final eBook or printed copy as soon as it's finished.

When it comes to web development, vanilla may be the finest of the flavors. With plain JavaScript you can build fast, maintainable web apps that run everywhere, load instantly, and avoid framework lock-in. Today’s browsers are incredibly capable, and for many types of applications, “batteries included” libraries and frameworks just introduce avoidable slowdowns, security issues, and complex build chains. Why not embrace the vanilla web!

Vanilla Web is your guide to building serious web applications using the tools built right into the browser. You’ll learn to use “plain vanilla” JavaScript, HTML, and CSS to create reusable UI components, a routing system, an installable progressive web app, and a full-featured e-commerce frontend. Each chapter builds real capabilities you can apply anywhere, even when you work with libraries. You’ll soon be delivering dependency-free UX that’s easy to debug and maintain and survive neverending tool churn.

Get access to the book now, MEAP edition

Chapters:

Hello Vanilla Web
Understanding the Web Platform
The User Interface
Vanilla CSS
Vanilla JavaScript
The Document Object Model API
Web Components
Working with HTML Templates
Advanced Web Components
Navigation and Routing (coming later)
Working with Data (coming later)
Micro-libraries (coming later)
Beyond Basics (coming later)
Bulding and App (coming later)

Get access to the book now, MEAP edition

Enhancing User Engagement with JavaScript

2025-12-06T00:00:00Z

Available for Pluralsight subscribers

Creating a good Progressive Web App is not just about the user interface, but also about understanding the platform, what's possible, and how to make a proper integration with the operating system.

Web technologies have grown beyond static pages and simple interactions. Today’s users expect web experiences that respond to their context and behavior.

In this course, Enhancing User Engagement with JavaScript, you’ll gain the ability to build dynamic, interactive experiences by leveraging modern browser APIs.

First, you’ll explore the types of APIs available in browsers and how permission management works. Next, you’ll discover how to use Geolocation, Camera, and Motion APIs to tap into user devices. Finally, you’ll learn how to store and retrieve data locally using different browser APIs.

When you’re finished with this course, you’ll have the skills and knowledge in JavaScript and HTML needed to create engaging, user-aware web applications.

Take the course

In this 1.5 hours course we'll see:

Capabilities on the Web
Feature Detection
Working with Permissions
Geolocation Essentials
The Geolocation API
Using Geocoding services
Using Mapping services
Working with Sensors
Screen Orientation API
DeviceMotion and DeviceOrientation
The Sensors API
Client-Side Data Storage
Quotas
Data Persistance
Session and Local Storage
IndexedDB

You can also request a live custom workshop for you or your team on the topics of this course. Let's keep in touch

The Immersive Web

2025-11-15T00:00:00Z

During JSConf Mexico in Guadalajara 🇲🇽, I've delivered this session covering the latest ideas on WebXR, the <model> HTML Element and other ideas. Session delivered in Spanish.

https://www.youtube.com/watch?v=HMM41y9VjY4

JavaScript Promises from Scratch

2025-09-11T00:00:00Z

Available for Frontend Masters subscribers

Learn everything about the Promises design pattern and how to use it in JavaScript. Create Promises with constructors and async functions, and consume them using callbacks or async/await along with proper error handling. Master sequential and parallel execution with the Promises API.

See the tutorial
$10 OFF First Month

You can also request a live custom workshop for you or your team on the topics of this course. Let's keep in touch

Advanced Vanilla JS with Go

2025-06-02T00:00:00Z

Available for Frontend Masters subscribers

Modernize your full-stack app with Passkeys! Watch as Maximiliano Firtman refactors a Vanilla JS + Go movie database application to allow users to sign in using device security capabilities using Passkeys like Touch ID and Face ID -- which are more secure and easier to use than both passwords and all current 2-factor authentication (2FA) methods.

You'll also learn how to improve SEO with server-side rendering, add offline support with Service Workers, and even convert the full client-side app into a Progressive Web App (PWA).

Want to see this application built from scratch? Watch the Build a Fullstack App with Vanilla JS and Go course

https://www.youtube.com/watch?v=qn8isz7keLc&ab_channel=FrontendMasters

Watch this Course FREE

Outline:

Introduction
Project Tour & Setup
Passkeys Overview
What is a Passkey
Passkey Services
Passkey Use Case
Implementing Passkeys
Creating Passkey Handlers
Registering the Passkey Handler
Adding Passkeys to the Form
SimpleWebAuthn Passkey Services
Logging in with a Passkey
Conditional UI
Improving SEO with Server-Side Rendering
Rendering Details Page on the Server
Offline Support with Service Workers
Intercepting Network Requests
Registering a Service Worker
Adding Offline Support to the Project
Background Sync & PWAs

You can also request a live custom workshop for you or your team on the topics of this course. Let's keep in touch

Build a Fullstack App with Vanilla JS and Go

2025-05-25T00:00:00Z

Available for Frontend Masters subscribers

Code a high-performance fullstack app from scratch! Skip the framework and create a modern Vanilla JavaScript app with web components, dynamic client-side routing, View Transitions, and data filtering and sorting. Build a rock-solid backend JSON API with Go, complete with authentication, logging, and a Postgres database layer. Learn to build robust applications, with higher performance and fewer dependencies, in Vanilla JS and Go!

Watch Course
$10 OFF first month

In this 10-hour course we'll see:

Introduction to the Project
Setting Up the Backend with Go
Database Schema and REST API
Lunch
Setting Up the Frontend
Web Components
Dynamic Rendering
Recap and Pending Issues
Dynamic Data Retrieval: Search, Filter & Sort
Client-Side Routing
Lunch
State Management
Implementing Authentication
Adding Favorites and Watchlists

Continue the journey of this course in the Advanced Vanilla JS with Go.

You can also request a live custom workshop for you or your team on the topics of this course. Let's keep in touch

Understanding JavaScript in the Background

2025-05-19T00:00:00Z

Have you ever wondered what happens to the JavaScript code running in a web app when you switch tasks? Consider these scenarios:

You're using a React web app on your phone, and amidst network operations, you reply to a WhatsApp message with a long audio recording.
You're playing a game in a PWA on your PC and minimize it to take a Zoom call.
You're using ChatGPT on your iPad and open a new tab to check sports scores.
You're using X in Chrome on your Android and receive a DM right after switching to the home screen to play a game.

Does the JavaScript code in these scenarios finish executing? What about timers, animations, and pending network requests? Do these web apps continue to consume CPU resources in the background? Can they still receive messages?

It's time to delve into these questions and understand how JavaScript behaves in the background.

Background Matters #

Every web app deployed today, no matter if it's Vanilla JavaScript, or if it's using a library or framework, such as Angular, React, Svelte or Next.js, needs to understand how code execution works when interacting with modern browsers and operating system. Many times, we as developers, think that our code is executed from beginning to end without interruptions, and we don't even sit down and think what happens with our JavaScript context when our code moves to the background.

When we think about background processes in JavaScript, the concept is often shrouded in mystery. Many web developers don’t delve deeply into the nuances of background behavior, typically focusing on active user interactions instead. But understanding what happens in the background—when a user minimizes an app, switches tabs, or closes a browser—can unlock opportunities to enhance performance, optimize resource usage, and improve user experience.

Defining “Background” in Web Applications #

The term "background" has varying interpretations in web development. It could refer to a tab that is not active while the browser is still active, a browser running in the background of the operating system, or even threads executing tasks outside the main thread. There is no single, clear definition, even in the specifications provided by the W3C.

Let’s consider a working definition for the scope of this discussion: background refers to any state where our web app has been paused or stopped from executing code or interacting with the user. This could be due to minimizing the app, switching to a different window, a model important dialog from the operating system or putting the browser or the standalone web itself in the background.

Understanding this concept is crucial, as it dictates how developers optimize resources and maintain seamless user experiences across devices and platforms.

Execution Engines #

These days, JavaScript can be executed in many contexts:

eBooks and PDFs
The frontend
The backend with Node.js or Deno
As a middleware in the network layer, like when creating workers for Cloudflare.

For this article, we'll be focusing on frontend JavaScript, which means focusing on a web application, that can be executed in:

The browser
Installed web app (also known as a PWA or Progressive Web App). They have their own icon in the operating system and typically show as a standalone window. We will use the term "standalone web app" to refer to these contexts.
Other native apps using:
- Hybrid approaches such as Apache Cordova or Ionic's Capacitor
- In-app browsers from other apps (such as TikTok or Instagram)
- A mini app framework (such as Telegram Mini Apps, WeChat Mini Programs, World mini apps or Douyin Mini Programs).

Common Background Scenarios #

To better understand JavaScript behavior in the background, let’s consider typical use cases:

Switching to a New Tab or Browser Window: The current tab moves to the background, but the browser is still open. This means that your web app is not visible (you may see only the tab with the favicon and title).
Sharing the Space with Other Active Apps: Typically, on mobile devices, this means that your web app is still partially visible on the screen but other windows, including modal dialogs from the operating system, may be rendered on top of it having the user focus.
Minimizing the Browser or App: The browser remains open but is no longer visible on the screen.
Closing a Tab, a Standalone or a Browser Window: The user closes a tab on mobile and desktop or closes a browser on desktop. On mobile devices, users don't typically have an option to close a browser, they just go to the home screen or switch to another app.
Switching Between Apps: The browser or standalone web app window is not anymore on the screen. On desktop devices it may be minimized, on mobile devices, switching apps often suspends the previous app.
OS-Level Processes: The operating system may decide to kill processes to free up memory, which could affect web apps. Users may also decide to kill apps from their operating systems.

Each of these scenarios impacts JavaScript execution in different ways, depending on browser and OS behavior. Understanding that this can happen will help to improve user experience, security and performance of your web app.

Why Background Execution Matters #

Optimizing JavaScript for background execution is crucial for several reasons:

Improve User Experience: Preventing outdated content or broken states improves usability. For example, resuming a game should not show progress that occurred while the app was in the background. Another example: returning to a web app that was inactive for 24 hours may not resume timers as if the user was active. It should restart, reload the authentication token, or refresh the data.
Resource Efficiency: Reducing unnecessary network requests, timers, and animations saves memory and battery life.
Avoiding Broken Transactions: Managing pending requests ensures that data integrity is maintained when users switch contexts.
Session Management: When a web app is paused for hours or even days, it's crucial to manage the session properly upon resumption. The time difference can impact how the app functions, requiring decisions like resuming normal activity, logging out the user to get a new authorization token, or refreshing the data. Without proper session management, the web app will be unaware of the elapsed time and may not function correctly.

Lifecycle of Background Execution #

Understanding the lifecycle of background execution involves analyzing how web apps transition through various states:

Active State: JavaScript runs without restrictions. Animations, timers, and event listeners work as expected.
Paused / Not Visible State: JavaScript runs with restrictions. Event listeners may not work, animations - **may be paused, and timers slow down.
Suspended / Frozen State: The JavaScript context remains in memory, but main execution is paused. For example, animations stop, and timers are not fired. The app resumes to the Active Stte if the user - **returns to the web app.
Destroy / Terminated: The JavaScript context and the whole web app is unloaded from memory. The app must restart if the user returns to the web app.

Mobile Device Nuances #

Mobile operating systems like Android and iOS introduce additional complexities. Apps are often suspended rather than closed, and users’ perceptions of task managers do not align with the technical realities of process management. In these cases, the OS takes control over resources to enhance battery life and optimize performance, leading to variations in background behavior across platforms.
We won't get into deep details on the lifecycle of apps on iOS and Android, but we need to remember that the browser that executes our app is a native app within those operating systems. Also, if our web app is installed as a PWA, it has standalone rights, so their lifecycle is similar to native apps.

Understanding Workers and Service Workers #

A Web Worker is a JavaScript script that runs in the background, independent of the main thread of a web application, but attached to it. This allows developers to perform computationally expensive tasks without blocking the user interface. Web Workers do not have access to the DOM but can communicate with the main thread through message passing, ensuring smooth and responsive user experiences for web applications. Sometimes developers think that if a code is running in a new thread, it's then applicable to the idea of running in the background, but actually a Web Worker typically follows the state of the main web application context. Therefore, if your web app is suspended in the background, the same will happen to their web workers.

Browsers and web runtimes today also support a different kind of thread, a Service Worker.
Service Workers operate differently from web workers. While web workers are tied to the lifecycle of a page, service workers persist independently, so they are good candidates to store code that we want to execute when the main web application is not active and not executing any code. However, browsers may pause or terminate service workers if all the clients from associated pages are inactive for an extended period. Also, browsers limit when your service worker can be woke up to execute code.
Service workers excel at handling tasks like caching, push notifications, and background syncs. Understanding their limitations and capabilities is essential for maximizing their potential.

Execution Rights while in the background on every state #

We've already stated that on different scenarios and different operating systems and browsers, execution rights in the background might differ, but let's asume that we won't have rights. What we can do to overpass that situation and execute code while in the background? Today we have several options:

1- Publish the web app in app stores

It's possible to create a PWA launcher to publish in Google Play Store, Amazon App Store, Huawei App Gallery and Apple AppStore. Because these launchers or packages are native, they may overpass the limitations of the browsers in terms of background execution.

2- Media playing

Using the right browser APIs, such as Media Session and Picture and Picture APIs, our web app will be able to run code while providing video and audio data to keep it playing in the background

3- Through Service Workers

Because Service Workers have their own lifecycle, separated from the main web app lifecycle, they may execute code, within certain restricted limitations, even if the main web app context is suspended, frozen or even if it was terminated.

Some use cases and ideas #

1- Network Requests: If your web app goes to the background while anetwork request is in process, it may be aborted.
Solutions:

Beacon API, if suitable
Web Background Synchronization API
Background Fetch API

2- Sync Data: Applications that sync data periodically might need to delay syncs when moved to the background. You can utilize Web Background Synchronization and Periodic Background Sync to ensure data is synchronized once the app regains focus or a network becomes available.

3- Notify the User: Use Web Notifications and Web Push APIs to keep users informed about important updates even when the app is not active. These notifications can help re-engage users and ensure they do not miss critical events.

4- Continue pending tasks: Tasks like downloading large files or processing data can be completed in the background using Service Workers or Background Fetch APIs. This ensures continuity without requiring active user interaction.

APIs for Managing Background JavaScript #

Page Visibility API #

Use the visibilitychange event to detect when a tab or a standalone web app window becomes hidden or visible:

document.addEventListener('visibilitychange', () => {
   if (document.hidden) {
       console.log('Tab is in the background');
       // Pause or throttle tasks
   } else {
       console.log('Tab is in the foreground');
       // Resume tasks
   }
});

Monitoring visibility changes allows developers to adapt application behavior dynamically, conserving resources when necessary.

Page Lifecycle API #

The Page Lifecycle API builds upon the limitations of the Page Visibility API by providing detailed events and properties to manage the states of a web app, such as being frozen or discarded. This API helps developers understand and respond to different lifecycle states of a page, optimizing resource usage and enhancing the user experience.

Here’s a simple example using the PageLifecycle API:

// Listen for 'freeze' and 'resume' events
document.addEventListener('freeze', () => {
    console.log('Page is frozen. Save state here.');
});
document.addEventListener('resume', () => {
    console.log('Page has resumed. ');
});
// Check if the page was discarded
if (document.wasDiscarded) {
    console.log('Page was discarded by the browser. Reloading data...');
}

This snippet demonstrates handling freeze and resume events, and checking the document.wasDiscarded property to respond to browser-induced page discards, ensuring a seamless experience for users.

Beacon API #

The Beacon API can be used to send network requests that you don't care about its response. Because of that nature, the browser can finish the request and sending the data, even if there is no more JavaScript code to receive the answer, such as when your web app is not active anymore.

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/log-hidden', someData);
  }
});

Web Background Synchronization #

The Background Sync API, currently supported only by Chromium-based browsers, allows you to mark pending synchronization tasks from your main web application. These tasks are identified by a custom name, such as "data-sync" or "save record." When the browser is ready, it will activate a registered service worker and execute the "sync" event handler. This handler will receive the task name as an argument, enabling you to connect to your server and complete the pending operation.

Since this process occurs within the service worker context, it operates independently of the web application, allowing synchronization to happen in the background. However, it's crucial to remember that you should implement a fallback mechanism for browsers that don't support this API.

Periodic Background Sync #

Periodic Background Sync is a feature that allows you to schedule synchronization tasks to run at regular intervals. This can be useful for ensuring that data is synchronized even if the user is not actively using your app.

A periodicsync event will be fired in the Service Worker:

On a synchronization time interval
If battery and network conditions are met
It's not mandatory to access the network on each execution
Right now, it's fired with a maximum of once every 12 hours

It works only on Chromium-based browsers.

Background Fetch #

The Background Fetch lets the webapp download files in the background managing events, such as progress, error or finished in the service worker context. While these files are downloaded, the browsers typically creates a notification so the user knows this operation is happening. These files are then typically stored locally using the FileSystem API to be used later when the user goes back to the web app.
This API is available on Chromium-based browsers and it's available as an experiment in Safari at the beginning of 2025.

Web Push Notifications #

With this API you will be able to notify the user with an OS notification from a Service Worker, that can be triggered at any time you have execution rights. The most common scenario is to create that notification when you send a push message from your server using the Web Push architecture available today on every browser.

With Apple’s recent adoption of Web Push in Safari (full support on macOS, only standalone webapps on iOS and iPadOS), developers can now engage users more effectively on all devices.
This development revitalizes interest in web push technologies, making it easier to communicate with users even when apps are not active.

Challenges in Background Execution #

Timers and Queues #

When a tab moves to the background, browsers often reduce the frequency of timer callbacks to save resources and, as we mentioned before, it may even stopped them. For instance, a setInterval callback scheduled every 10 milliseconds might execute once per second in the background. This behavior varies by browser:

Chrome: Reduces timer frequency significantly when a tab is hidden.
Firefox: Behaves similarly but may also pause timers when windows are covered on desktop.
Safari: Takes an aggressive approach, pausing almost all background activity to conserve battery life.

The unpredictability of timers can disrupt critical functionalities, such as data syncing, animations, or UI updates, requiring developers to implement robust fallbacks.

Animations and Frame Rates #

APIs like requestAnimationFrame stop triggering callbacks when the page is hidden. Similarly, CSS animations and transitions cease execution. This behavior ensures that background tabs do not drain unnecessary resources, but it can also create challenges for applications relying on smooth visual transitions.

Detecting time passed #

To keep the session consistent, it's always a good idea to detect when the user comes from a possible inactive or suspended state and check how much time has passed since the last time it was active. If that time distance is greater than a threshold you define, you may want to refresh, reload data, or re-authorize with your server to avoid any user experience issues.

Here’s a simple example in JavaScript to detect inactivity and handle it:

let lastActiveTime = Date.now();
const threshold = 30 * 60 * 1000; // 30 minutes in milliseconds
document.addEventListener('visibilitychange', () => {
  if (!document.hidden) {
    const currentTime = Date.now();
    const timeElapsed = currentTime - lastActiveTime;
    if (timeElapsed > threshold) {
      console.log('Session expired. Refreshing data...');
      // Perform your refresh or re-authorization logic here
      location.reload();
    } else {
      console.log('Welcome back!');
    }
  } else {
    lastActiveTime = Date.now();
  }
});

Tools and Techniques for Debugging Background Behavior #

Understanding what happens in the background requires specialized tools and techniques:

Most modern browsers provide detailed insights into service workers, memory usage, and performance metrics. Chromium DevTools, such as the ones available in Google Chrome or Microsoft Edge are miles away from WebKit and Firefox devtools when talking about background execution.

Conclusion #

Understanding JavaScript's behavior in the background is essential for optimizing web apps and ensuring a seamless user experience. This article has explored how modern browsers and operating systems handle JavaScript execution when an app moves to the background. Concepts like background states, service workers, and APIs such as Page Visibility and Background Sync help developers tackle common challenges like paused timers, suspended animations, and resource constraints. By leveraging these tools, developers can design applications that adapt smoothly to interruptions.

Background execution affects user satisfaction, resource efficiency, and app reliability. Ensuring smooth transitions when resuming paused apps, managing data synchronization, and delivering timely notifications are key to maintaining functionality. With tools like browser devtools and APIs, developers can create apps that perform consistently, whether in active use or operating in the background, across various devices and platforms.

Disclaimer: This article was published at iJS Magazine for Devmio.

Vanilla Web

2025-05-16T00:00:00Z

During 2024 and 2025 I delivered the talk "Vanilla Web, you don't need that library" a couple of times. Here you can find three versions:

In English delivered at NDC in Oslo 🇳🇴 #

https://www.youtube.com/watch?v=GEbDlvrdSQk&ab_channel=NDCConferences

In English delivered at Devoxx UK in London 🇬🇧 #

https://www.youtube.com/watch?v=pG9jvlNQzMU&ab_channel=DevoxxUK

In Spanish delivered at Nerdearla in Buenos Aires 🇦🇷 #

https://www.youtube.com/watch?v=pxFkPSr98SQ&ab_channel=Nerdearla

In English at UtahJS in Salt Lake City 🇺🇸 #

https://www.youtube.com/watch?v=V2eM0EdTfmk&pp=ygUHZmlydG1hbg%3D%3D

⁠

Unlocking Generative AI in your Web App

2025-05-16T00:00:00Z

During Devoxx UK in London 🇬🇧 I delivered this talk

https://www.youtube.com/watch?v=pG4FvMSu_C0&ab_channel=DevoxxUK

Discover how to seamlessly integrate AI LLM models into your website using cutting-edge techniques like new client-side APIs and cloud services. Learn how to execute AI models in the front-end without incurring cloud fees by leveraging Chrome's Gemini Nano model using the window.ai inference API, or utilizing WebNN, WebGPU, and WebAssembly for open-source models.

This session dives into API integration, token management, secure prompting, and practical demos to get you started with AI on the web.

Unlock the power of AI on the web while having fun along the way!

Your First Web Component

2025-04-11T00:00:00Z

Available for Frontend Masters subscribers

Learn the fundamentals of Web Components and how to create your own from scratch using JavaScript. Define custom elements using HTML elements, attach shadow DOM, and encapsulate styles and logic for reusable components.Build, register, and use your first Web Component without frameworks, and understand where they fit in modern web apps.

https://www.youtube.com/watch?v=aPi4b49lx80

Open in YouTube

See the tutorial
$10 OFF First Month

You can also request a live custom workshop for you or your team on the topics of this course. Let's keep in touch

iPad Naming "Consistency"

2025-03-04T00:00:00Z

iPad
iPad 2
New iPad — later iPad 3th Generation
iPad 4th Generation
iPad 5th generation
iPad Air
iPad Air 2
iPad Mini
iPad Mini 2
iPad Mini 3
iPad Mini 4
12.9" iPad Pro
12.9" iPad Pro 2nd Generation
12.9" iPad Pro 3rd Generation
9.7" iPad Pro
10.5" iPad Pro
11" iPad Pro
iPad (9.7") — later iPad 6th Generation
iPad Air — later iPad Air 3rd Generation
iPad Mini — later 5th Generation
iPad Pro 12.9" 4th Generation
iPad Pro 11" 2nd Generation
iPad 7th Generation
iPad 8th Generation
iPad Air - later iPad Air 4th Generation
iPad Pro 11 3rd Generation (M1)
iPad Pro 12.9 5th Generation (M1)
iPad (9th Generation)
iPad mini (6th Generation)
iPad Air 5th Generation
iPad (10th Generation)
iPad Pro 12.9 6th Generation
iPad Pro 11-in 4th Generation
iPad Air 11-in (M2)
iPad Air 13-in (M2)
iPad Pro 11-in (M4)
iPad Pro 13-in (M4)
iPad mini (A17 Pro) 🆕
iPad A16 🆕
iPad Air 11-in (M3) 🆕
iPad Air 13-in (M3) 🆕

Promesas en JavaScript

2025-03-01T00:00:00Z

Available for Frontend Masters subscribers

This course is available only in Spanish and it's on JavaScript Promises.

Aprende y domina las promesas en JavaScript para trabajar con asincronía y manejar errores de forma efectiva. Desde 0 hasta métodos avanzados como Promise.all y Promise.race, y cómo combinar las promesas con async/await

See course (in Spanish)

En este curso de 40 minutos verás:

Introducción a las promesas y su sintaxis
Encadenamiento de promesas (then, catch, finally)
Resolviendo múltiples promesas con Promise.all y Promise.race
Diferencias entre callbacks y promesas
async/await
Buenas prácticas para manejar promesas y errores

You can also request a live custom workshop for you or your team on the topics of this course. Let's keep in touch

firt.dev

iOS PWA Compatibility

High-level PWA support #

Web App Manifest Support #

W3C Spec Fields #

Display options #

Icon Options #

Apple non-standard PWA-related abilities #

Manifest Incubations #

Other PWA-related desktop abilities #

Service Workers Support #

Abilities on Top of Service Workers #

High-level overview of Web abilities for PWAs #

Safari-only abilities for PWAs #

Unlocking Client-Side AI in Your Web App

WebMCP: Making Web Apps Faster and Cheaper for Coding Agents

Vanilla Web Book 🆕

Enhancing User Engagement with JavaScript

The Immersive Web

JavaScript Promises from Scratch

Advanced Vanilla JS with Go

Build a Fullstack App with Vanilla JS and Go

Understanding JavaScript in the Background

Background Matters #

Defining “Background” in Web Applications #

Execution Engines #

Common Background Scenarios #

Why Background Execution Matters #

Lifecycle of Background Execution #

Mobile Device Nuances #

Understanding Workers and Service Workers #

Execution Rights while in the background on every state #

Some use cases and ideas #

APIs for Managing Background JavaScript #

Page Visibility API #

Page Lifecycle API #

Beacon API #

Web Background Synchronization #

Periodic Background Sync #

Background Fetch #

Web Push Notifications #

Challenges in Background Execution #

Timers and Queues #

Animations and Frame Rates #

Detecting time passed #

Tools and Techniques for Debugging Background Behavior #

Conclusion #

Vanilla Web

In English delivered at NDC in Oslo 🇳🇴 #

In English delivered at Devoxx UK in London 🇬🇧 #

In Spanish delivered at Nerdearla in Buenos Aires 🇦🇷 #

In English at UtahJS in Salt Lake City 🇺🇸 #

Unlocking Generative AI in your Web App

Your First Web Component

iPad Naming "Consistency"

Promesas en JavaScript