Re: [w3c/manifest] Way to detect if a web app is installed (Issue #1092)

another version:

# Detecting Installed Web Apps: A New CSS Media Query and Property

Developers have long requested a reliable way to detect if a web app is installed on a user's device. This is important for tailoring the user experience, such as hiding install prompts or providing app-specific features. To address this, a new CSS media query and JavaScript property are being introduced.

## The New Features:

* **`installed: yes` media query:** This CSS media query will allow developers to apply styles specifically when a web app is installed. This helps customize the interface for installed apps.
    ```css
    @media (installed: yes) {
      .install-button { 
        display: none; 
      }
      .app-specific-feature { 
        display: block; 
      }
    }
    ```

* **`navigator.standalone` property:** This JavaScript property will provide a boolean value indicating whether the web app is running in a standalone context (i.e., installed). This allows for dynamic adjustments to the app's behavior.
    ```javascript
    if (navigator.standalone) {
      // Enable app-specific features
    } else {
      // Show install prompt
    }
    ```

## Use Cases:

The GitHub conversation highlights several key use cases for this feature:

* **Detecting if a web app is installed:** This is the primary use case, enabling developers to adjust the user interface and app behavior accordingly.
* **Controlling the web page's UI:** Developers can use the media query to hide or show elements based on the installation status, such as removing install buttons or displaying app-specific features.
* **Providing a signal for installed apps to enable UI features:**  Installed web apps might have different UI requirements compared to when accessed through a browser. This feature allows developers to cater to those needs.
* **Addressing challenges with existing methods:** The current `display-mode` media query can be confusing when dealing with fullscreen mode. The new features provide a more reliable and straightforward solution.

## Benefits:

* **Improved developer experience:** Clear signals and dedicated features make it easier to build and optimize web apps.
* **Enhanced user experience:** Tailored interfaces and app behavior create a more seamless and engaging experience for users.
* **Better cross-browser consistency:** Standardization ensures consistent behavior across different browsers.

## Next Steps:

The proposal is currently being discussed within the W3C Web Apps Working Group and will be implemented in major browsers like WebKit and Chromium. This collaboration aims to create a consistent and reliable way for developers to detect and respond to the context of their web applications.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3c/manifest/issues/1092#issuecomment-2492588308
You are receiving this because you are subscribed to this thread.

Message ID: <w3c/manifest/issues/1092/2492588308@github.com>