### Typical Web App Manifest Configuration

Source: https://github.com/w3c/manifest/blob/main/explainer.md

A comprehensive manifest example demonstrating various properties like language, direction, name, description, icons, scope, start URL, display mode, orientation, theme color, background color, and screenshots.

```json
{
  "lang": "en",
  "dir": "ltr",
  "name": "Super Racer 3000",
  "description": "The ultimate futuristic racing game from the future!",
  "short_name": "Racer3K",
  "icons": [{
    "src": "icon/lowres.webp",
    "sizes": "64x64",
    "type": "image/webp"
  },{
    "src": "icon/lowres.png",
    "sizes": "64x64"
  }, {
    "src": "icon/hd_hi",
    "sizes": "128x128"
  }],
  "scope": "/racer/",
  "start_url": "/racer/start.html",
  "display": "fullscreen",
  "orientation": "landscape",
  "theme_color": "aliceblue",
  "background_color": "red",
  "screenshots": [{
    "src": "screenshots/in-game-1x.jpg",
    "sizes": "640x480",
    "type": "image/jpeg"
  },{
    "src": "screenshots/in-game-2x.jpg",
    "sizes": "1280x920",
    "type": "image/jpeg"
  }]
}
```

--------------------------------

### Specify App Start URL

Source: https://github.com/w3c/manifest/blob/main/explainer.md

Define the initial page users are directed to when they launch the web app.

```json
{
 "start_url": "/start_screen.html"
}
```

--------------------------------

### Example Markdown for moz_fruits Member

Source: https://github.com/w3c/manifest/wiki/Extensions-Registry

Illustrates how to document a proprietary manifest member, including its description and a link to external documentation.

```markdown
### The `moz_fruits` member
A Mozilla proprietary extension that allows your app to smell 
like either an "apple", "orange", or "banana". 
Information about the `moz_fruits` member can be found 
on [`moz_fruits` MDN page](https://developer.mozilla.org/moz_fruits).
```

--------------------------------

### Simple Web App Manifest

Source: https://github.com/w3c/manifest/blob/main/explainer.md

A basic manifest file including the application name and an icon. This is the minimum required for a web app to be considered for installation.

```json
{
  "name": "Super Racer 3000",
  "icons": [{
    "src": "icon/lowres.png",
    "sizes": "64x64"
  }]
}
```

--------------------------------

### Defining Application Name and Short Name

Source: https://github.com/w3c/manifest/blob/main/explainer.md

Use 'name' for the full application name and 'short_name' for a condensed version displayed in space-constrained environments like home screens. Providing these is crucial for discoverability and installation.

```json
{
  "name": "My totally awesome photo app",
  "short_name": "Photos"
}
```

--------------------------------

### Example Localized Text Object

Source: https://github.com/w3c/manifest/blob/main/index.html

Demonstrates a localized text object for a 'name' member, including a nested localized name for German.

```json
{
  "lang": "fr",
  "name": "Superbes biscuits",
  "name_localized": {
    "de-DE": {"value": "Super Cookies", "lang": "en"}
  }
}
```

--------------------------------

### Example of Proprietary Manifest Members

Source: https://github.com/w3c/manifest/blob/main/index.html

Illustrates hypothetical proprietary extensions prefixed with service names to avoid collisions. Use these for proprietary services, not browser vendors.

```json
{
  "kpl_fancy_feature": "some/url/img",
  "gmpc_awesome_thing": { ... },
  "blitzly_site_verification": "KEY_9864D0966935"
}
```

--------------------------------

### Detect App Installation Event

Source: https://github.com/w3c/manifest/blob/main/explainer.md

Register for the 'appinstalled' event to detect when a user installs your web application. This can be done using the 'onappinstalled' property or 'addEventListener'.

```JavaScript
function handleInstalled(ev) {
  const date = new Date(ev.timeStamp / 1000);
  console.log(`Yay! Our app got installed at ${date.toTimeString()}`);
}

// Using the event handler IDL attribute
window.onappinstalled = handleInstalled;

// Using .addEventListener()
window.addEventListener("appinstalled", handleInstalled);
```

--------------------------------

### Web App Manifest with Icon Definitions

Source: https://github.com/w3c/manifest/blob/main/index.html

A sample web app manifest file defining application name, start URL, and an array of icons. The 'src' property of each icon is subject to the CSP 'img-src' directive of the manifest's owner document.

```json
{
  "name": "custom manifest",
  "start_url": "https://boo",
  "icons": [
    {
      "src": "//icons.example.com/lowres"
    },
    {
      "src": "//other.com/hi-res"
    }
  ]
}
```

--------------------------------

### Declaring Multiple Icons in Manifest

Source: https://github.com/w3c/manifest/blob/main/index.html

Example of declaring multiple icons with different sizes and types in a web app manifest. Supports fallback for different formats and resolutions.

```json
{
  "icons": [
    {
      "src": "icon/lowres.webp",
      "sizes": "48x48",
      "type": "image/webp"
    },{
      "src": "icon/lowres",
      "sizes": "48x48"
    },{
      "src": "icon/hd_hi.ico",
      "sizes": "72x72 96x96 128x128 256x256"
    },{
      "src": "icon/hd_hi.svg"
    }
  ]
}
```

--------------------------------

### Define App Shortcuts in Manifest

Source: https://github.com/w3c/manifest/blob/main/explainer.md

Use the 'shortcuts' member in the web app manifest to define menu items for installed apps. Each shortcut requires a name, description, URL, and optionally icons.

```JSON
"shortcuts": [
  {
    "name": "Play Later",
    "description": "View the list of podcasts you saved for later",
    "url": "/play-later",
    "icons": [
      {
        "src": "/icons/play-later.svg",
        "type": "image/svg+xml",
        "purpose": "any"
      }
    ]
  },
  {
    "name": "Subscriptions",
    "description": "View the list of podcasts you listen to",
    "url": "/subscriptions",
    "icons": [
      {
        "src": "/icons/subscriptions.svg",
        "type": "image/svg+xml",
        "purpose": "any"
      }
    ]
  },
  {
    "name": "Search",
    "description": "Search for new podcasts to listen to",
    "url": "/search",
    "icons": [
      {
        "src": "/icons/search.svg",
        "type": "image/svg+xml",
        "purpose": "any"
      }
    ]
  },
  {
    "name": "Discover",
    "description": "Browse for new podcasts to listen to",
    "url": "/discover",
    "icons": [
      {
        "src": "/icons/discover.svg",
        "type": "image/svg+xml",
        "purpose": "any"
      }
    ]
  }  
]
```

--------------------------------

### Example Manifest Localized Member Structure

Source: https://github.com/w3c/manifest/blob/main/index.html

Demonstrates the structure of a `name_localized` member within a manifest, showing how different languages and regional variations are specified. Use this structure when providing localized strings for manifest properties.

```json
{
  "lang": "en-US",
  "dir": "ltr",
  "name": "Color Picker",
  "name_localized": {
    "de":    "Farbwähler",
    "en":    {"value": "Color Picker"},
    "en-GB": {"value": "Colour Picker", "dir": "ltr"},
    "fr":    {"value": "Sélecteur de Couleur", "lang": "fr-CA", "dir": "ltr"},
    "ar":    {"value": "منتقي الألوان", "dir": "rtl"
}
  }
}
```

--------------------------------

### HTTP Header with CSP img-src Directive

Source: https://github.com/w3c/manifest/blob/main/index.html

Example of an HTTP response header setting the Content-Security-Policy with an 'img-src' directive. This policy governs which image sources the browser is allowed to load for the manifest's owner document.

```http
HTTP/1.1 200 OK
Content-Type: text/html
Content-Security-Policy: img-src icons.example.com
```

--------------------------------

### Check Display Mode with JavaScript

Source: https://github.com/w3c/manifest/blob/main/explainer.md

Use JavaScript's `window.matchMedia()` to test for specific display modes and make UI adjustments accordingly.

```javascript
if (window.matchMedia("(display-mode: standalone)").matches) {
  // do interesting UI adjustments
}
```

--------------------------------

### Define App Icons in Manifest

Source: https://github.com/w3c/manifest/blob/main/explainer.md

Specify a list of icons with their source, sizes, and types for responsive icon selection. This helps avoid unnecessary downloads and ensures icons look good across devices.

```json
{
  "icons": [{
    "src": "icon/lowres",
    "sizes": "64x64",
    "type": "image/webp"
  }, {
    "src": "icon/hd_small",
    "sizes": "64x64"
  }, {
    "src": "icon/hd_hi",
    "sizes": "128x128"
  }]
}
```

--------------------------------

### Linking Manifest with HTML

Source: https://github.com/w3c/manifest/blob/main/index.html

How to link a web app manifest file using a <link> element in HTML. Includes fallback meta and icon elements for legacy browsers.

```html
<!doctype>
<html>
<title>Racer 3K</title>

<!-- Startup configuration -->
<link rel="manifest" href="manifest.webmanifest">

<!-- Fallback application metadata for legacy browsers -->
<meta name="application-name" content="Racer3K">
<link rel="icon" sizes="16x16 32x32 48x48" href="lo_def.ico">
<link rel="icon" sizes="512x512" href="hi_def.png">
```

--------------------------------

### Set Display Mode and Orientation

Source: https://github.com/w3c/manifest/blob/main/explainer.md

Control how the web app is displayed and its default orientation. 'fullscreen' takes over the entire screen, while 'landscape' sets the default orientation.

```json
{
 "display": "fullscreen",
 "orientation": "landscape"
}
```

--------------------------------

### Define Web App Shortcuts

Source: https://github.com/w3c/manifest/blob/main/index.html

Use the 'shortcuts' member in the manifest to provide quick access to key tasks or sections of your web application. Each shortcut can include a name, description, URL, and optional icons.

```json
{
  "shortcuts": [
    {
      "name": "Play Later",
      "description": "View the list of podcasts you saved for later",
      "url": "/play-later",
      "icons": [
        {
          "src": "/icons/play-later.svg",
          "type": "image/svg+xml"
        }
      ]
    },
    {
      "name": "Subscriptions",
      "description": "View the list of podcasts you listen to",
      "url": "/subscriptions?sort=desc"
    }
  ]
}
```

--------------------------------

### Typical Web App Manifest Structure

Source: https://github.com/w3c/manifest/blob/main/index.html

A standard JSON structure for a web app manifest, defining application name, icons, and display modes.

```json
{
  "lang": "en",
  "dir": "ltr",
  "name": "Super Racer 3000",
  "short_name": "Racer3K",
  "icons": [{"src": "icon/lowres.webp", "sizes": "64x64", "type": "image/webp"}, {"src": "icon/lowres.png", "sizes": "64x64"}, {"src": "icon/hd_hi", "sizes": "128x128"}],
  "scope": "/",
  "id": "superracer",
  "start_url": "/start.html",
  "display": "fullscreen",
  "orientation": "landscape",
  "theme_color": "aliceblue",
  "background_color": "red"
}
```

--------------------------------

### Link to Manifest File in HTML

Source: https://github.com/w3c/manifest/blob/main/explainer.md

Include this HTML tag in your web page to link to the manifest file. This is the standard way for browsers to discover the manifest.

```html
<link rel="manifest" href="/manifest.json">
```

--------------------------------

### Localizing Image Resources in Manifest

Source: https://github.com/w3c/manifest/blob/main/index.html

Use the 'icons_localized' member to provide language-specific image resources for icons. This allows different icons to be displayed based on the user's language preference.

```json
{
  "lang": "en-US",
  "icons": [
    { "src": "icon/lowres.png", "sizes": "64x64" },
    { "src": "icon/hires.png", "sizes": "256x256" }
  ],
  "icons_localized": {
    "fr": [
      { "src": "icon/lowres_fr.png", "sizes": "64x64" },
      { "src": "icon/hires_fr.png", "sizes": "256x256" }
    ]
  }
}
```

--------------------------------

### Style Apps Based on Display Mode

Source: https://github.com/w3c/manifest/blob/main/explainer.md

Use CSS media queries to apply specific styles when an app is in a particular display mode, such as 'standalone'.

```css
@media all and (display-mode: standalone){
  ...
}
```

--------------------------------

### Define a new category in Markdown

Source: https://github.com/w3c/manifest/wiki/Categories

Use this format when proposing or documenting a new category value.

```Markdown
### The `devtools` value
A category for developer tools, such as IDEs and the like.
```

--------------------------------

### Set Web App Scope

Source: https://github.com/w3c/manifest/blob/main/index.html

The 'scope' member defines the set of documents considered part of your web application. It dictates which pages the manifest applies to. It's recommended to always include 'scope', preferably set to '/'.

```json
{
  "scope": "/"
}
```

--------------------------------

### Handling Dark Color Schemes in Manifest

Source: https://github.com/w3c/manifest/blob/main/index.html

The 'color_scheme_dark' member overrides 'background_color' and 'theme_color' when the operating system is in dark mode. This enables adaptive theming for web applications.

```json
{
  "background_color": "#fff",
  "theme_color": "red",
  "color_scheme_dark": {
    "background_color": "#000",
    "theme_color": "hotpink"
  }
}
```

--------------------------------

### Define App Scope

Source: https://github.com/w3c/manifest/blob/main/explainer.md

Set a URL scope to define the boundaries of your web application, preventing users from unexpectedly navigating outside the app's intended area.

```json
{
  "scope": "/myapp"
}
```

--------------------------------

### Set Default Text Direction

Source: https://github.com/w3c/manifest/blob/main/index.html

The 'dir' member specifies the default direction for localizable members of the manifest. It can be set to 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto' (default, uses heuristics).

```json
{
  "dir": "auto"
}
```

--------------------------------

### JavaScript Function to Filter Commits

Source: https://github.com/w3c/manifest/blob/main/index.html

This JavaScript function filters out commits based on a predefined list of ignored hashes and a regex pattern matching common non-functional commit types.

```javascript
const ignoredHashes = [ "c0e3654ec18d04452c079c9839909c9a7295f2f7" ];
function removeCommits(entry) {
    const { message, hash } = entry;
    for (const ignoredHash of ignoredHashes) {
        if (ignoredHash.startsWith(hash)) {
            return false;
        }
    }
    return !/^editorial|^chore|^\\\[chore|^fix|^refactor|^tests?|^docs|^typo|^nit/i.test(message);
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.