recursal/MDN huggingface dataset:
Notification: silent property
=============================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`silent`** read-only property of the
 `Notification` interface specifies whether the notification should be
 silent, i.e., no sounds or vibrations should be issued, regardless of the device
 settings. This is specified in the `silent` option of the
 `Notification()` constructor.

**Note:** This feature is available in Web Workers

Value
-----

 A boolean value. `false` is the default; `true` makes
 the notification silent.

Examples
--------

 The following snippet is intended to fire a silent notification; a simple
 `options` object is created, and then the notification is fired using the
 `Notification()` constructor.


```js
const options = {
  body: "Your code submission has received 3 new review comments.",
  silent: true,
};

const n = new Notification("New review activity", options);

console.log(n.silent); // "true"
```

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-silent |

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

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

See also
--------

* Using the Notifications API
Notification: badge property
============================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`badge`** property of the `Notification`
 interface returns a string containing the URL of an image to represent the notification when there is not enough space to display the notification itself such as for example, the Android Notification Bar. On Android devices, the badge should accommodate devices up to 4x resolution, about 96 by 96 px, and the image will be automatically masked.

**Note:** This feature is available in Web Workers

Value
-----

A string containing a URL.

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-badge |

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

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

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`data`** read-only property of the
 `Notification` interface returns a structured clone of the notification's
 data, as specified in the `data` option of the
 `Notification()` constructor.

 The notification's data can be any arbitrary data that you want associated with the
 notification.

**Note:** This feature is available in Web Workers

Value
-----

A structured clone.

Examples
--------

 The following snippet fires a notification; a simple `options` object is
 created, then the notification is fired using the `Notification()`
 constructor.


```js
const options = {
  body: "Your code submission has received 3 new review comments.",
  data: {
    url: "https://example.com/review/12345",
    status: "open",
  },
};

const n = new Notification("New review activity", options);

console.log(n.data); // Logs the data object
```

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-data |

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

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

See also
--------

* Using the Notifications API
Notification: error event
=========================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`error`** event of the `Notification` interface fires when something goes wrong with a `Notification` (in many cases an error preventing the notification from being displayed.)

**Note:** This feature is available in Web Workers

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("error", (event) => {});

onerror = (event) => {};
```

Event type
----------

A generic `Event`.

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-onerror |

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

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

See also
--------

* `Notification`
* Using the Notifications API
Notification: dir property
==========================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`dir`** read-only property of the `Notification` interface indicates the text direction of the notification, as specified in the `dir` option of the `Notification()` constructor.

**Note:** This feature is available in Web Workers

Value
-----

A string specifying the text direction. Possible values are:

`auto`

adopts the browser's language setting behavior (the default.)

`ltr`

left to right.

`rtl`

right to left.


**Note:** Most browsers seem to ignore explicit ltr and rtl settings, and just go with the browser-wide setting.

Examples
--------

The following snippet fires a notification; a simple `options` object is created, then the notification is fired using the `Notification()` constructor.


```js
const options = {
  body: "Your code submission has received 3 new review comments.",
  dir: "rtl",
};

const n = new Notification("New review activity", options);

console.log(n.dir); // "rtl"
```

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-dir |

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

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

See also
--------

* Using the Notifications API
Notification: requireInteraction property
=========================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`requireInteraction`** read-only property of the `Notification` interface returns a boolean value indicating that a notification should remain active until the user clicks or dismisses it, rather than closing automatically.

**Note:** This can be set when the notification is first created by setting the `requireInteraction` option to `true` in the options object of the `Notification()` constructor.

**Note:** This feature is available in Web Workers

Value
-----

A boolean value.

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-requireinteraction |

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

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

See also
--------

* Using the Notifications API
Notification: tag property
==========================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`tag`** read-only property of the
 `Notification` interface signifies an identifying tag for the notification,
 as specified in the `tag` option of the
 `Notification()` constructor.

 The idea of notification tags is that more than one notification can share the same
 tag, linking them together. One notification can then be programmatically replaced with
 another to avoid the users' screen being filled up with a huge number of similar
 notifications.

**Note:** This feature is available in Web Workers

Value
-----

A string.

Examples
--------

Our Using the Notifications API article has a good example of tag usage.

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-tag |

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

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

See also
--------

* Using the Notifications API
Notification: close event
=========================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`close`** event of the `Notification` interface fires when a `Notification` is closed.

**Note:** This feature is available in Web Workers

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("close", (event) => {});

onclose = (event) => {};
```

Event type
----------

A generic `Event`.

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

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

See also
--------

* `Notification`
* Using the Notifications API
Notification: vibrate property
==============================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

 The **`vibrate`** read-only property of the `Notification`
 interface specifies a vibration pattern
 for the device's vibration hardware to emit when the notification fires. This is
 specified in the `vibrate` option of the
 `Notification()` constructor.

**Note:** This feature is available in Web Workers

Value
-----

A vibration pattern, as specified in the Vibration API spec.

Examples
--------

 The following snippet is intended to create a notification that also triggers a device
 vibration; a simple `options` object is created, and then the notification is
 fired using the `Notification()` constructor.


```js
const options = {
  body: "Your code submission has received 3 new review comments.",
  vibrate: [200, 100, 200],
};

const n = new Notification("New review activity", options);

console.log(n.vibrate); // "[200, 100, 200]"
```

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-vibrate |

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

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

See also
--------

* Using the Notifications API
Notification: actions property
==============================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

The **`actions`** read-only property of the `Notification` interface provides the actions available for users to choose from for interacting with the notification.

The actions are set using the `actions` option of the second argument for the `showNotification()` method and `Notification()` constructor.

**Note:** Browsers typically limit the maximum number of actions they will display for a particular notification. Check the static `Notification.maxActions` property to determine the limit.

**Note:** This feature is available in Web Workers

Value
-----

A read-only array of actions. Each element in the array is an object with the following members:

`action`

A string identifying a user action to be displayed on the notification.

`title`

A string containing action text to be shown to the user.

`icon`

A string containing the URL of an icon to display with the action.

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-actions |

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

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

See also
--------

* Using the Notifications API
* `Notification.maxActions`
Notification: body property
===========================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`body`** read-only property of the
 `Notification` interface indicates the body string of the notification, as
 specified in the `body` option of the
 `Notification()` constructor.

**Note:** This feature is available in Web Workers

Value
-----

A string.

Examples
--------


```js
function spawnNotification(theBody, theIcon, theTitle) {
  const options = {
    body: theBody,
    icon: theIcon,
  };
  const n = new Notification(theTitle, options);

  console.log(n.body);
}
```

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-body |

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

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

See also
--------

* Using the Notifications API
Notification: icon property
===========================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`icon`** read-only property of the
 `Notification` interface contains the URL of an icon to be displayed as
 part of the notification, as specified in the `icon` option of the
 `Notification()` constructor.

**Note:** This feature is available in Web Workers

Value
-----

A string.

Examples
--------

 In our To-do list app (view the app running live), we use the `Notification()`
 constructor to fire a notification, passing it arguments to specify the body, icon and
 title we want.


```js
const notification = new Notification("To do list", {
  body: text,
  icon: img,
});
```

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-icon |

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

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

See also
--------

* Using the Notifications API
Notification: maxActions static property
========================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

 The **`maxActions`** read-only static property of the
 `Notification` interface returns the maximum number of actions supported by
 the device and the User Agent. Effectively, this is the maximum number of elements in
 `Notification.actions` array which will be respected by the User Agent.

**Note:** This feature is available in Web Workers

Value
-----

 An integer number which indicates the largest number of notification
 actions that can be presented to the user by the User Agent and the device.

Examples
--------

The following snippet logs the maximum number of supported actions.


```js
const maxActions = Notification.maxActions;
console.log(
  `This device can display at most ${maxActions} actions on each notification.`,
);
```

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-maxactions |

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

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

See also
--------

* Using the Notifications API
* `Notification.actions`
Notification: permission static property
========================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`permission`** read-only static property of the `Notification`
 interface indicates the current permission granted by the user for the current origin to
 display web notifications.

**Note:** This feature is available in Web Workers

Value
-----

A string representing the current permission. The value can be:

`granted`

 The user has explicitly granted permission for the current
 origin to display system notifications.


`denied`

 The user has explicitly denied permission for the current
 origin to display system notifications.


`default`

 The user decision is unknown; in this case the application
 will act as if permission was `denied`.


Examples
--------

 The following snippet could be used if you wanted to first check whether notifications
 are supported, then check if permission has been granted for the current origin to send
 notifications, then request permission if required, before then sending a notification.


```js
function notifyMe() {
  if (!("Notification" in window)) {
    // Check if the browser supports notifications
    alert("This browser does not support desktop notification");
  } else if (Notification.permission === "granted") {
    // Check whether notification permissions have already been granted;
    // if so, create a notification
    const notification = new Notification("Hi there!");
    // …
  } else if (Notification.permission !== "denied") {
    // We need to ask the user for permission
    Notification.requestPermission().then((permission) => {
      // If the user accepts, let's create a notification
      if (permission === "granted") {
        const notification = new Notification("Hi there!");
        // …
      }
    });
  }

  // At last, if the user has denied notifications, and you
  // want to be respectful there is no need to bother them anymore.
}
```

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-permission |

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

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

See also
--------

* Notifications API
* Using the Notifications API
* Permissions API
* Using the Permissions API
Notification: timestamp property
================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

 The **`timestamp`** read-only property of the
 `Notification` interface returns a number, as
 specified in the `timestamp` option of the
 `Notification()` constructor.

 The notification's timestamp can represent the time, in milliseconds since 00:00:00 UTC
 on 1 January 1970, of the event for which the notification was created, or it can be an
 arbitrary timestamp that you want associated with the notification. For example, a
 timestamp for an upcoming meeting could be set in the future, whereas a timestamp for a
 missed message could be set in the past.

**Note:** This feature is available in Web Workers

Value
-----

A number representing a timestamp, given as Unix time in milliseconds.

Examples
--------

 The following snippet fires a notification; a simple `options` object is
 created, then the notification is fired using the `Notification()`
 constructor.


```js
const dts = Math.floor(Date.now());

const options = {
  body: "Your code submission has received 3 new review comments.",
  timestamp: dts,
};

const n = new Notification("New review activity", options);

console.log(n.timestamp); // Logs the timestamp
```

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-timestamp |

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

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

See also
--------

* Using the Notifications API
Notification: show event
========================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`show`** event of the `Notification` interface fires when a `Notification` is displayed.

**Note:** This feature is available in Web Workers

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("show", (event) => {});

onshow = (event) => {};
```

Event type
----------

A generic `Event`.

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

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

See also
--------

* `Notification`
* Using the Notifications API
Notification: lang property
===========================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`lang`** read-only property of the
 `Notification` interface indicates the language used in the notification,
 as specified in the `lang` option of the
 `Notification()` constructor.

 The language itself is specified using a string representing a language tag according to RFC 5646: Tags for Identifying Languages (also known as BCP 47).
 See the Sitepoint ISO 2 letter language codes page for a simple reference.

**Note:** This feature is available in Web Workers

Value
-----

A string specifying the language tag.

Examples
--------

 The following snippet fires a notification; a simple `options` object is
 created, then the notification is fired using the `Notification()`
 constructor.


```js
const options = {
  body: "Your code submission has received 3 new review comments.",
  lang: "en-US",
};

const n = new Notification("New review activity", options);

console.log(n.lang); // "en-US"
```

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

| Specification |
| --- |
| Notifications API Standard # dom-notification-lang |

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

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

See also
--------

* Using the Notifications API
Cross-global fetch usage
========================

This article explains an edge case that occurs with fetch (and potentially other APIs exhibiting the same kind of resource retrieval behavior). When a cross-origin fetch involving a relative URL is initiated from an `<iframe>`, the relative URL used to be resolved against the current global location, rather than the iframe's location.

The edge case
-------------

Many sites will never come up against this edge case. To see it:

* You need a same-origin iframe
* That same-origin iframe needs to have a location with a different base URL
* You have to use the fetch function cross-global, e.g. `frame.contentWindow.fetch()`
* The URL passed to fetch needs to be relative
The problem
-----------

In the past we would resolve the relative URL against the current global, for example:


```js
let absolute = new URL(relative, window.location.href);
```


This is not a problem as such. It is just that different APIs that exhibit this kind of behavior were doing it inconsistently with the behavior defined in the spec, which could lead to problems further down the line.

The solution
------------

In Firefox 60 onwards, Mozilla resolves the relative URL against the global that owns the `fetch()` function being used (see Firefox bug 1432272). So in the case described above, it is resolved against the iframe's location:


```js
let absolute = new URL(relative, frame.contentWindow.location.href);
```


There is a lot of discussion in progress about getting new specs to align with this behavior change, to mitigate potential problems going forward.