An introduction to the Web Preferences API

Written by Ebenezer Don✏️

At its core, web development is about building a seamless user experience. Imagine walking into a room where the lighting or temperature adjusts to your liking. Now, translate that to the web: users expect websites to intuitively cater to their preferences without any fuss.

However, this seemingly simple expectation is full of complexities. While users desire an effortless digital experience, developers grapple with the tools at hand that often expect users to jump through hoops.

The Web Preferences API, now in its intent-to-prototype stage — which indicates it's moving towards actual implementation — is a proposed solution to bridge this gap between user preferences and website functionality. Authored by Luke Warlow, this API focuses on addressing the limitations web developers face when trying to tailor a user's online experience based on their specific settings.

In this article, we'll delve into the proposed Web Preferences API, what it offers, its goals, and how it intends to reshape the way websites adapt to user preferences.

Jump ahead:

• Issues with the current system
• Breakdown of the Web Preferences API
  • The navigator.preferences object
  • Core components of the Web Preferences API
• Advantages over the current methods
• Privacy and security considerations
• Addressing open questions on the Web Preferences API proposal

Issues with the current system

When it comes to personalizing website experiences, both developers and users frequently encounter roadblocks. Let's discuss the main issues with the current system and why we need a better solution.

Dependence on OS or browser setting

Currently, websites often rely heavily on the user's OS or browser settings. If a user wants a unique setup for a particular site, they may need to adjust their browser settings to accommodate that preference. This approach lacks flexibility and often results in compromised experiences.

Difficulties with syncing preferences across devices

Users accessing websites from various devices expect their preferences to remain consistent. However, the current system struggles to maintain this continuity across platforms: switching devices often requires users to reset their preferences.

Site-level settings and integration challenges

While site-specific settings can directly cater to user preferences, they aren't without problems. Their integration with CSS media queries and JavaScript APIs is not seamless, making it hard for developers to take full advantage of their benefits.

The current system, despite its tools, has clear limitations. There's a pressing need for a solution that's more adaptable and user-focused. The Web Preferences API proposal aims to tackle these issues.

Breakdown of the Web Preferences API

The primary purpose of the Web Preferences API is to provide an integrated method for websites to override user preferences. By doing so, it ensures users get a tailored experience without the need to grapple with multiple settings or configurations.

Let's break down the Web Preferences API and understand how it aims to tackle the issues we highlighted earlier.

The navigator.preferences object

This is the gateway to the API. The navigator.preferences object serves as the central access point, simplifying how web developers interact with user preferences.

For instance, the API introduces ways for websites to set a color scheme without needing an extra class for dark mode, thus streamlining the process.

Core components of the Web Preferences API

• PreferenceManager: This is the central hub where all preferences are managed, including the color scheme, contrast, and motion settings
• PreferenceObject: Each user preference, like colorScheme, is represented as an object. Developers can interact with these objects to override or reset specific preferences
  • For example, a website might offer a toggle for users to switch between light and dark themes. By using the requestOverride method within the PreferenceObject, the desired theme can be set seamlessly
• PreferenceSupportData: This interface holds additional data about a given preference, helping developers understand its functionality and use

Here's a snapshot of how each of these looks in code:

interface Navigator {
  readonly preferences: PreferenceManager
}

interface PreferenceManager {
  readonly colorScheme: PreferenceObject
  //... other preferences
}

interface PreferenceObject {
  readonly override: string | null
  requestOverride(value: string): Promise<void>
  clearOverride(): void
}

interface PreferenceSupportData {
  readonly name: string
  readonly values: string[]
}

With these components, the Web Preferences API aims to offer an intuitive toolset for developers. Whether it's syncing user settings across devices or theming the browser UI, the API is designed to make these tasks simpler and more efficient.

Advantages over current methods

The proposed Web Preferences API offers several advantages over existing methods. Let's explore some of the key benefits it brings to the table.

Enhanced color scheme toggle

While many sites today rely on libraries to allow users to switch between light and dark themes, these come with their own sets of constraints. The Web Preferences API proposes implementing a more integrated solution, promising flexibility without the need for external libraries.

Effective syncing of preferences

Achieving consistent user preferences across multiple devices has always been challenging. Current methods often result in fragmented user experiences due to design trade-offs.

The Web Preferences API proposes a streamlined way to ensure that a user's settings remain consistent, regardless of the device they're using.

Streamlined browser UI theming

The responsibility of theming to match user preferences has traditionally fallen on developers. The proposed API suggests a shift in this responsibility. By using the color-scheme property as outlined in the proposal, it's anticipated that browsers could handle the majority of the theming process. This would greatly simplify tasks for developers and reduce potential discrepancies.

In essence, if adopted, the Web Preferences API could significantly enhance the web development process and lead to a more intuitive user experience.

Privacy and security considerations

With the introduction of any new technology or API, there's an essential need to address concerns related to privacy and security. Here's a breakdown of the privacy and security considerations of the proposed Web Preferences API:

Avoiding fingerprinting

The API doesn’t introduce any new ways for online tracking or fingerprinting. This means that the security level maintained in terms of user data is consistent with the existing standards.

Permissions and user activation

The requestOverride method is a significant feature of this API. It acts as a controller, requiring validation according to rules set by the browser. In some cases, it might even prompt the user to grant permission, ensuring no changes are made without the user's knowledge or consent.

Handling iframes and subresources

1. Same-origin subresources: If an iframe originates from the same domain, it should inherit the overridden value. For example, if a user sets a dark color scheme for a website, any iframes on that site should also inherit the same preference
2. Cross-origin with communication: If a cross-origin subresource like an iframe has a communication channel established with the parent, it should also receive the overridden value
3. Cross-origin without external communication: Subresources like SVGs, when loaded as images without external communication, should still get the override value
4. External communication without parent communication: If a cross-origin subresource cannot communicate with the parent but has external communication capabilities, it should not receive the overridden value

It's worth noting that override values are shared in a way that keeps details hidden, making sure no personal data is accidentally revealed. For instance, as taken from the proposal: if the parent frame sets the colorScheme to dark, then an iframe should recognize prefers-color-scheme as dark. However, it shouldn't have access to read or modify navigator.preferences.colorScheme.

Addressing open questions on the Web Preferences API proposal

While the Web Preferences API presents a thoughtful approach to a more personalized web, there are a few open questions in the proposal that need to be addressed for clearer understanding:

Where to expose the PreferenceManager interface?

The current proposal suggests placing the new PreferenceManager interface on the navigator object. This makes sense, as the navigator object has been the go-to location for new web-related APIs. Given its focus on user preferences, the navigator object seems fitting.

Is the navigator object suitable?

The navigator object provides details about the browser environment, making it a logical choice for PreferenceManager. But is this the best fit? While it's conventional, it's essential to ensure it's still functional and intuitive for developers.

Should the API reach beyond the window?

Currently, the PreferenceManager is only available to the window. But there's a case for extending it to Service Workers, allowing for advanced functionalities tied to user preferences. As for Web Workers, the benefits are less clear given their computational focus. However, including both might be worth it unless there are significant drawbacks.

The Web Preferences API is promising, but addressing these open questions can make it more robust and adaptable. What’s your answer to the open questions? Share your thoughts in the comments section.

Conclusion and looking forward

The Web Preferences API proposal addresses a significant gap in web development, aiming to streamline user experiences and developer workflows. If adopted by browsers, this API can lead to more consistent and adaptable websites.

In the future, widespread acceptance of this proposal could mean users no longer have to fuss with varying settings across different sites or devices. For developers, it offers a clearer path to aligning website behavior with user preferences.

The potential benefits are clear, and as the tech community evaluates the Web Preferences API, its promise to reshape online interactions is evident.

If you want to keep in touch with me, you can find all my contact information on my NewDev profile, or check out my YouTube channel and LinkedIn profile. See you around!

---

LogRocket: Debug JavaScript errors more easily by understanding the context

Debugging code is always a tedious task. But the more you understand your errors the easier it is to fix them.

LogRocket allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to find out exactly what the user did that led to an error.

LogRocket records console logs, page load times, stacktraces, slow network requests/responses with headers + bodies, browser metadata, and custom logs. Understanding the impact of your JavaScript code will never be easier!

Try it for free.