recursal/MDN huggingface dataset:
protocol\_handlers
==================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

|  |  |
| --- | --- |
| Type | `Array` |

The `protocol_handlers` member specifies an array of objects that are protocols which this web app can register and handle. Protocol handlers register the application in an OS's application preferences; the registration associates a specific application with the given protocol scheme. For example, when using the protocol handler `mailto://` on a web page, registered email applications open.

After registering a web app as a protocol handler, when a user clicks on a hyperlink with a specific scheme such as `mailto://` or `web+music://` from a browser or native app, the registered PWA would open and receive the URL.

Example
-------

In this example, a web app manifest declares that the app should be registered to handle the protocols `web+jngl` and `web+jnglstore`.


```json
"protocol\_handlers": [
  {
    "protocol": "web+jngl",
    "url": "/lookup?type=%s"
  },
  {
    "protocol": "web+jnglstore",
    "url": "/shop?for=%s"
  }
]
```


A developer can add a field in the manifest.json to declare which protocols the web app can handle. As seen in the example above, the key is named `protocol_handlers` and it contains an array of protocol handler declaration objects.

Registering applications to handle URL schemes is operating-system dependent. This association is usually done during application install but it can also be done afterwards from an app that has already been installed.

Values
------

Protocol handlers objects may contain the following values:

| Member | Description |
| --- | --- |
| `protocol` | 
 A required string containing the protocol to be handled; e.g.:
 `mailto`, `ms-word`, `web+jngl`.
  |
| `url` | 
 Required HTTPS URL within the application
 scope that will handle the
 protocol. The `%s` token will be replaced by the URL starting
 with the protocol handler's scheme. If `url` is a relative
 URL, the base URL will be the URL of the manifest.
  |

Specifications
--------------

| Specification |
| --- |
| Manifest Incubations # protocol\_handlers-member |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
id
==

|  |  |
| --- | --- |
| Type | `String` |

The `id` member is a string that represents the *identity of the web application* — the unique identifier for the web application. If the web application ID does not match an existing ID, the application will be treated as a unique identity even if it is from the same URL.

**Note:** The `id` member can be used to uniquely identify applications. The `id` member is processed like a `start_url` but can be out of scope because it does not point to a resource that can be navigated to.

Examples
--------


```json
"id": "?homescreen=1"
```

Specifications
--------------

| Specification |
| --- |
| Web Application Manifest # id-member |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
serviceworker
=============

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

|  |  |
| --- | --- |
| Type | `Object` |

The `serviceworker` member specifies a serviceworker that is Just-In-Time (JIT)-installed and registered to run a web-based payment app providing a payment mechanism for a specified payment method in a merchant website. See Payment Handler API for more details.

Example
-------

See Payment Handler API > Concepts and usage.

Values
------

`serviceworker` objects may contain the following values:

| Member | Description |
| --- | --- |
| `scope` | A string representing the service worker's registration scope. |
| `src` | A string representing the URL to download the service worker script from. |
| `use_cache` | A boolean that sets how the HTTP cache is used for service worker script resources during updates. It provides equivalent functionality to certain values of the `updateViaCache` option provided when a service worker is registered via JavaScript using `ServiceWorkerContainer.register()`.
 * `true`: The HTTP cache will be queried for imports, but the main script will always be updated from the network. If no fresh entry is found in the HTTP cache for the imports, they're fetched from the network. Equivalent to `updateViaCache: "imports"`.
* `false`: The HTTP cache will not be used for the main script or its imports. All service worker script resources will be updated from the network. Equivalent to `updateViaCache: "none"`.
 |

Specifications
--------------

#### No specification found

No specification data found for `html.manifest.serviceworker`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Service Worker API
* Payment Handler API
* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* Using the Payment Request API
* Payment processing concepts
categories
==========

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

|  |  |
| --- | --- |
| Type | `Array` of `String`s |

The `categories` member is an array of strings defining the names of categories that the application supposedly belongs to. There is no standard list of possible values, but the W3C maintains a list of known categories.

**Note:** `categories` are used only as hints for catalogs or stores listing web applications. Like search engines and meta keywords, catalogs and stores are free to ignore them.

**Note:** `categories` values are lower-cased by the stores and catalogs before processing, so "News" and "news" are treated as the same value. Developers are encouraged to use lower case in the first place.

Example
-------


```json
"categories": ["books", "education", "medical"]
```

Specifications
--------------

| Specification |
| --- |
| Web App Manifest - Application Information # categories-member |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
scope
=====

|  |  |
| --- | --- |
| Type | `String` |

The `scope` member is a string that defines the navigation scope of this web application's application context. It restricts what web pages can be viewed while the manifest is applied. If the user navigates outside the scope, it reverts to a normal web page inside a browser tab or window.

If the `scope` is a relative URL, the base URL will be the URL of the manifest.

Examples
--------

If the scope is relative, the manifest URL is used as a base URL:


```json
"scope": "/app/"
```


The following scope limits navigation to the current site:


```json
"scope": "https://example.com/"
```


Finally, the following example limits navigation to a subdirectory of the current site:


```json
"scope": "https://example.com/subdirectory/"
```

Specifications
--------------

| Specification |
| --- |
| Web Application Manifest # scope-member |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
start\_url
==========

|  |  |
| --- | --- |
| Type | `String` |

The `start_url` member is a string that represents the *start URL of the web application* — the preferred URL that should be loaded when the user launches the web application (e.g., when the user taps on the web application's icon from a device's application menu or homescreen).

**Note:** The `start_url` member is purely advisory, and a user agent may ignore it or allow the user to alter it at install time or afterwards.

Examples
--------

### Absolute URL


```json
"start\_url": "https://example.com"
```

### Relative URL

If the URL is relative, the manifest URL is used as the base URL to resolve it.


```json
"start\_url": "../startpoint.html"
```

Specifications
--------------

| Specification |
| --- |
| Web Application Manifest # start\_url-member |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
short\_name
===========

|  |  |
| --- | --- |
| Type | `String` |

The `short_name` member is a string that represents the name of the web application displayed to the user if there is not enough space to display `name` (e.g., as a label for an icon on the phone home screen). `short_name` is directionality-capable, which means it can be displayed left-to-right or right-to-left based on the value of the `dir` and `lang` manifest members.

Examples
--------

Simple `short_name` in left-to-right language:


```json
"name": "Awesome application",
"short\_name": "Awesome app"
```


`short_name` in Arabic, which will be displayed right-to-left:


```json
"dir": "rtl",
"lang": "ar",
"name": "تطبيق رائع",
"short\_name": "رائع"
```

Specifications
--------------

| Specification |
| --- |
| Web Application Manifest # short\_name-member |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
display\_override
=================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

|  |  |
| --- | --- |
| Type | `Array` |

The `display` member is used to determine the developer's preferred display mode for a website. It follows a process where the browser falls back to the next display mode if the requested one is not supported. In some advanced use cases, this fallback process might not be enough.

The `display_override` member solves this by letting the developer provide a sequence of display modes that the browser will consider before using the `display` member. Its value is an array of display modes that are considered in-order, and the first supported display mode is applied.

Values
------

Display override objects are display-mode strings, the possible values are:

| Display Mode | Description |
| --- | --- |
| `fullscreen` | 
 All of the available display area is used and no user agent
 chrome is shown.
  |
| `standalone` | 
 The application will look and feel like a standalone application. This
 can include the application having a different window, its own icon in
 the application launcher, etc. In this mode, the user agent will exclude
 UI elements for controlling navigation, but can include other UI
 elements such as a status bar.
  |
| `minimal-ui` | 
 The application will look and feel like a standalone application, but
 will have a minimal set of UI elements for controlling navigation. The
 elements will vary by browser.
  |
| `browser` | 
 The application opens in a conventional browser tab or new window,
 depending on the browser and platform. This is the default.
  |
| `window-controls-overlay` | 
 This display mode only applies when the application is in a separate PWA
 window and on a desktop operating system. The application will opt-in to
 the Window Controls Overlay feature, where the full window surface area
 will be available for the app's web content and the window control buttons
 (maximize, minimize, close, and other PWA-specific buttons) will appear
 as an overlay above the web content.
  |

Example
-------

In the example below, the browser will consider the following display-mode fallback chain in this order: `fullscreen` → `minimal-ui` → `standalone`.


```json
{
  "display\_override": ["fullscreen", "minimal-ui"],
  "display": "standalone"
}
```

Specifications
--------------

| Specification |
| --- |
| Manifest Incubations # display\_override-member |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Preparing for the display modes of tomorrow
* Customize the window controls overlay of your PWA's title bar
screenshots
===========

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

|  |  |
| --- | --- |
| Type | `Array` |

The `screenshots` member defines an array of screenshots intended to showcase the application. These images are intended to be used by progressive web app stores.

Properties
----------

The `screenshots` member is an array of objects each representing a screenshot. Each screenshot object may contain the following properties:

`form_factor`

String that represents a class of devices. This should be used only when the screenshot is only applicable for a particular form factor.

This property may take one of the following values:

* `"narrow"`: the screenshot is applicable only to narrow screens.
* `"wide"`: the screenshot is applicable only to wide screens.

`label`

String that represents the accessible name of the screenshot object. This member can serve as alternative text for the screenshot.

`platform`

String that represents the platform to which the screenshot applies. This should be used when a screenshot is only applicable to a specific device or distribution platform. User agents should not show screenshots that contain a `platform` value that differs from the current platform (for example, Google Play should not show screenshots whose `platform` is `"ios"`).

This property may take one of the following values:

* Device platform identifiers:
    + `"android"`
    + `"chromeos"`
    + `"ipados"`
    + `"ios"`
    + `"kaios"`
    + `"macos"`
    + `"windows"`
    + `"xbox"`
* Distribution platform identifiers:
    + `"chrome_web_store"`
    + `"itunes"`
    + `"microsoft-inbox"`
    + `"microsoft-store"`
    + `"play"`

`sizes`

String that describes the size of the image, or multiple sizes for image formats such as ICO that can contain multiple images. This property is equivalent to, and specified in the same way as, the `sizes` attribute of the `<link>` element.

`src`

String representing a URL from which the user agent can fetch the image data.

`type`

String representing the MIME type for the image.

Examples
--------


```json
"screenshots" : [
  {
    "src": "screenshot1.webp",
    "sizes": "1280x720",
    "type": "image/webp",
    "form\_factor": "wide",
    "label": "Homescreen of Awesome App"
  },
  {
    "src": "screenshot2.webp",
    "sizes": "1280x720",
    "type": "image/webp",
    "form\_factor": "wide",
    "label": "List of Awesome Resources available in Awesome App"
  }
]
```

Specifications
--------------

| Specification |
| --- |
| Web App Manifest - Application Information # screenshots-member |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
launch\_handler
===============

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

|  |  |
| --- | --- |
| Type | `Object` |

The `launch_handler` member defines values that control the launch of a web application. Currently it can only contain a single value, `client_mode`, which specifies the context in which the app should be loaded when launched. For example, in an existing web app client containing an instance of the app, or in a new web app client. This leaves scope for more `launch_handler` values to be defined in the future.

launch\_handler item values
---------------------------

`launch_handler` objects may contain the following values:

| Member | Description |
| --- | --- |
| `client_mode` | A string, or comma-separated array of strings, which specifies the context in which the app should be loaded when launched. If an array of strings is provided, the first valid value is used. Possible values are:

`auto`
The user agent decides what context makes sense for the platform to load the app in. For example, `navigate-existing` might make more sense on mobile, where single app instances are commonplace, whereas `navigate-new` might make more sense in a desktop context. This is the default value used if all the provided values are invalid.
`focus-existing`
If the app is already loaded in a web app client, it is brought into focus but not navigated to the launch target URL. The target URL is made available via `Window.launchQueue` to allow custom launch navigation handling to be implemented. If the app is not already loaded in a web app client, `navigate-new` behavior is used instead.
`navigate-existing`
If the app is already loaded in a web app client, it is brought into focus and navigated to the specified launch target URL. The target URL is made available via `Window.launchQueue` to allow additional custom launch navigation handling to be implemented. If the app is not already loaded in a web app client, `navigate-new` behavior is used instead.
`navigate-new`
The app is loaded inside a new web app client. The target URL is made available via `Window.launchQueue` to allow additional custom launch navigation handling to be implemented.
 |

Examples
--------


```json
"launch\_handler": {
    "client\_mode": "focus-existing"
}

"launch\_handler": {
    "client\_mode": ["focus-existing", "auto"]
}
```

Specifications
--------------

| Specification |
| --- |
| Web App Launch Handler API # launch\_handler-member |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Launch Handler API: Control how your app is launched
* `Window.launchQueue`
* Musicr 2.0 demo app
related\_applications
=====================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

|  |  |
| --- | --- |
| Type | `Array` |

The `related_applications` field is an array of objects specifying native applications that are installable by, or accessible to, the underlying platform — for example, a native Android application obtainable through the Google Play Store. Such applications are intended to be alternatives to the manifest's website that provides similar/equivalent functionality — like the native app equivalent.

**Note:** Developer can specify that the native applications are preferred over the web application by setting `prefer_related_applications` to `true`.

Examples
--------


```json
"related\_applications": [
  {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
    "id": "com.example.app1"
  }, {
    "platform": "itunes",
    "url": "https://itunes.apple.com/app/example-app1/id123456789"
  }, {
    "platform": "windows",
    "url": "https://apps.microsoft.com/store/detail/example-app1/id123456789"
  }
]
```

Related application properties
------------------------------

Application objects may contain the following properties:

| Member | Description |
| --- | --- |
| `platform` | The platform on which the application can be found. List of available values |
| `url` | The URL at which the application can be found. |
| `id` | The ID used to represent the application on the specified platform. |

Specifications
--------------

| Specification |
| --- |
| Web Application Manifest # related\_applications-member |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
background\_color
=================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

|  |  |
| --- | --- |
| Type | `String` |

The `background_color` member defines a placeholder background color for the application page to display before its stylesheet is loaded. This value is used by the user agent to draw the background color of a shortcut when the manifest is available before the stylesheet has loaded.

Therefore `background_color` should match the `background-color` CSS property in the site's stylesheet for a smooth transition between launching the web application and loading the site's content.

**Note:** The `background_color` member is only meant to improve the user experience while the main stylesheet is loading from the network or the storage media; it is not used by the user agent as the `background-color` CSS property when the progressive web app stylesheet is available.

Examples
--------


```json
"background\_color": "red"
```

Specifications
--------------

| Specification |
| --- |
| Web Application Manifest # background\_color-member |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
description
===========

|  |  |
| --- | --- |
| Type | `String` |

The `description` member is a string in which developers can explain what the application does. `description` is directionality-capable, which means it can be displayed left to right or right to left based on the values of the `dir` and `lang` manifest members.

Examples
--------

Simple `description` in left-to-right language:


```json
"description": "Awesome application that will help you achieve your dreams."
```


`description` in Arabic, which will be displayed right-to-left:


```json
"dir": "rtl",
"lang": "ar",
"description": ".تطبيق رائع سيساعدك على تحقيق أحلامك"
```

Specifications
--------------

| Specification |
| --- |
| Web App Manifest - Application Information # description-member |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
name
====

|  |  |
| --- | --- |
| Type | `String` |

The `name` member is a string that represents the name of the web application as it is usually displayed to the user (e.g., amongst a list of other applications, or as a label for an icon). `name` is directionality-capable, which means it can be displayed left-to-right or right-to-left based on the values of the `dir` and `lang` manifest members.

Examples
--------

Simple `name` in left-to-right language:


```json
"name": "Awesome application"
```


Right-to-left `name` in Arabic:


```json
"dir": "rtl",
"lang": "ar",
"name": "!أنا من التطبيق"
```

Specifications
--------------

| Specification |
| --- |
| Web Application Manifest # name-member |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.