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

### **Explainer: Standardizing and Implementing Web Application Context Detection**

#### **Overview**
This feature standardizes the terminology and mechanism to detect whether a web application is operating in an "installed-like" context (e.g., launched as a standalone app, added to a home screen). The goal is to replace the ambiguous term "installed" with a clear and developer-friendly alternative while aligning browser implementations and specifications.

#### **Problem Statement**
Web applications often operate in different contexts, such as:
- As standalone apps launched from the home screen or desktop.
- In a browser tab as part of the general browsing experience.

Currently, developers rely on terms like "installed," which are inconsistently defined across platforms. This ambiguity leads to challenges in building cohesive user experiences.

#### **Proposed Solution**
Standardize the terminology and introduce clear mechanisms to detect and respond to a web app's context. The proposed term (e.g., **"Standalone Mode"**, **"PWA Mode"**) will be applied consistently in the [Web App Manifest](https://www.w3.org/TR/appmanifest/) specification, browser implementations, and developer tools.

---

### **Feature Goals**

1. **Clarity for Developers**:
   - Provide an unambiguous, actionable term to describe app-like contexts.
   - Offer a simple way to detect the app's context using media queries or APIs.

2. **Cross-Browser Compatibility**:
   - Ensure consistency across major browsers (WebKit, Chromium, Firefox).

3. **Backward Compatibility**:
   - Avoid breaking existing functionality tied to the `display-mode` media query or APIs like `navigator.standalone`.

---

### **How It Works**

#### **Terminology**
We propose replacing "installed" with:
- **"Standalone Mode"**: Indicates that the app is running independently, outside the browser's typical UI (e.g., no address bar, tabs).
- Alternative options: **"Home Screen App"**, **"Launched as App"**, **"PWA Mode"**.

#### **Media Query Example**
The `display-mode` media query will reflect the new terminology:
```css
@media (display-mode: standalone) {
  body {
    background: #f0f0f0;
  }
}
```

#### **API Example**
A new property or method can provide a programmatic way to check the app's context:
```javascript
if (navigator.appContext === 'standalone') {
  console.log('The app is running in Standalone Mode!');
}
```

#### **User Experience**
For end-users, this change is seamless. Developers gain better tools to optimize user experiences across contexts.

---

### **Implementation Phases**

#### **Phase 1: Specification Updates**
- Propose updates to the Web App Manifest spec via the W3C Web Apps Working Group.
- Collaborate with browser vendors to standardize terminology and behavior.

#### **Phase 2: Implementation in WebKit**
- Update the `display-mode` media query to reflect the new terminology.
- Add APIs or enhance existing ones to provide context detection.
- Conduct internal and interoperability testing.

#### **Phase 3: Alignment with Chromium**
- Work with Dan Murphy (Chrome) and other browser vendors to ensure consistent implementation.

#### **Phase 4: Developer Outreach**
- Publish updated documentation and examples.
- Engage with the developer community through blogs, conferences, and forums.

---

### **Benefits**

1. **Improved Developer Experience**:
   - Clear, consistent terms reduce confusion.
   - Tools like media queries and APIs empower developers to create better app-like experiences.

2. **Better Cross-Browser Consistency**:
   - Unified terminology ensures developers can rely on predictable behavior across browsers.

3. **Enhanced User Experience**:
   - Developers can optimize design and functionality based on the app's context, leading to smoother interactions.

---

### **Next Steps**
- Gain consensus on the terminology in the W3C Web Apps Working Group.
- Finalize the spec changes and align with browser vendors.
- Implement the changes in WebKit and Chromium simultaneously, ensuring cross-browser interoperability.

By standardizing this terminology and implementation, we can make the web platform more robust, predictable, and developer-friendly.


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

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