recursal/MDN huggingface dataset:
Progressive Web Apps reference
==============================

This reference describes the technologies, features, and APIs that Progressive Web Apps (PWAs) can use to offer a great user experience.

Web app manifest
----------------

Web app manifest members

Developers can use web app manifest members to describe a PWA, customize its appearance, and more deeply integrate it into the operating system.

Service Worker APIs
-------------------

### Communication with the app

The following APIs can be used by a service worker to communicate with its associated client PWA:

`Client.postMessage()`

Allows a service worker to send a message to its client PWA.

Broadcast Channel API

Allows a service worker and its client PWA to establish a basic two-way communication channel.

### Offline operation

The following APIs can be used by a service worker to make your app work offline:

`Cache`

A persistent storage mechanism for HTTP responses used to store assets that can be reused when the app is offline.

`Clients`

An interface used to provide access to the documents that are controlled by the service worker.

`FetchEvent`

An event, dispatched in the service worker with every HTTP request made by the client PWA. The event can be used to either send the request to the server as normal and save the response for future use, or intercept the request and immediately respond with a response cached previously.

### Background operation

The following APIs can be used by a service worker to perform tasks in the background, even when your app is not running:

Background Synchronization API

A way to defer tasks to run in a service worker once there is a stable network connection.

Web Periodic Background Synchronization API

A way to register tasks to be run in a service worker at periodic intervals with network connectivity.

Background Fetch API

A method for a service worker to manage downloads that may take a significant amount of time, such as video or audio files.

Other web APIs
--------------

IndexedDB

A client-side storage API for significant amounts of structured data, including files.

Badging API

A method of setting a badge on the application icon, providing a low-distraction notification.

Notifications API

A way to send notifications that are displayed at the operating system level.

Web Share API

A mechanism for sharing text, links, files, and other content to other apps selected by the user on their device.

Window Controls Overlay API

An API for PWAs installed on desktop operating systems that enables hiding the default window title bar, enabling displaying the app over the full surface area of the app window.
js13kGames
==========

* Overview: js13kGames
* Next

In this tutorial we will examine the source code of a website that lists information about games submitted to the *A-Frame* category in the js13kGames 2017 competition. You don't have to think about what the actual content on the website is; the main point is to learn how to use PWA features in your own projects.

You can see this app in action online, and the source code is available on GitHub. We'll be examining this code carefully over the course of this tutorial.

Let's start by looking at the structure of our example app.

* Overview: js13kGames
* Next
MathML element reference
========================

This is an alphabetical list of MathML elements. All of them implement the `MathMLElement` class.

**Note:** As explained on the main MathML page, MDN uses MathML Core as a reference specification. However, legacy features that are still implemented by some browsers are also documented. You can find further details for these and other features in MathML 4.

MathML elements A to Z
----------------------

### math

* `<math>` (Top-level element)
### A

* `<maction>` 
Deprecated
 (Bound actions to sub-expressions)
* `<annotation>` (Data annotations)
* `<annotation-xml>` (XML annotations)
### E

* `<menclose>` 
Non-standard
 (Enclosed contents)
* `<merror>` (Enclosed syntax error messages)
### F

* `<mfenced>` 
Non-standard

Deprecated
 (Parentheses)
* `<mfrac>` (Fraction)
### I

* `<mi>` (Identifier)
### M

* `<mmultiscripts>` (Prescripts and tensor indices)
### N

* `<mn>` (Number)
### O

* `<mo>` (Operator)
* `<mover>` (Overscript)
### P

* `<mpadded>` (Space around content)
* `<mphantom>` (Invisible content with reserved space)
* `<mprescripts>` (delimiter for prescripts)
### R

* `<mroot>` (Radical with specified index)
* `<mrow>` (Grouped sub-expressions)
### S

* `<ms>` (String literal)
* `<semantics>` (Container for semantic annotations)
* `<mspace>` (Space)
* `<msqrt>` (Square root without an index)
* `<mstyle>` (Style change)
* `<msub>` (Subscript)
* `<msup>` (Superscript)
* `<msubsup>` (Subscript-superscript pair)
### T

* `<mtable>` (Table or matrix)
* `<mtd>` (Cell in a table or a matrix)
* `<mtext>` (Text)
* `<mtr>` (Row in a table or a matrix)
### U

* `<munder>` (Underscript)
* `<munderover>` (Underscript-overscript pair)
MathML elements by category
---------------------------

### Top-level elements

* `<math>` (Top-level element)
### Token elements

* `<mi>` (Identifier)
* `<mn>` (Number)
* `<mo>` (Operator)
* `<ms>` (String literal)
* `<mspace>` (Space)
* `<mtext>` (Text)
### General layout

* `<menclose>` 
Non-standard
 (Enclosed contents)
* `<merror>` (Enclosed syntax error messages)
* `<mfenced>` 
Non-standard

Deprecated
 (Parentheses)
* `<mfrac>` (Fraction)
* `<mpadded>` (Space around content)
* `<mphantom>` (Invisible content with reserved space)
* `<mroot>` (Radical with specified index)
* `<mrow>` (Grouped sub-expressions)
* `<msqrt>` (Square root without an index)
* `<mstyle>` (Style change)
### Script and limit elements

* `<mmultiscripts>` (Prescripts and tensor indices)
* `<mover>` (Overscript)
* `<mprescripts>` (Delimiter for prescripts)
* `<msub>` (Subscript)
* `<msubsup>` (Subscript-superscript pair)
* `<msup>` (Superscript)
* `<munder>` (Underscript)
* `<munderover>` (Underscript-overscript pair)
### Tabular math

* `<mtable>` (Table or matrix)
* `<mtd>` (Cell in a table or a matrix)
* `<mtr>` (Row in a table or a matrix)
### Uncategorized elements

* `<maction>` 
Deprecated
 (Bound actions to sub-expressions)
Semantic annotations
--------------------

* `<annotation>` (Data annotations)
* `<annotation-xml>` (XML annotations)
* `<semantics>` (Container for semantic annotations)
See also
--------

* MathML
* MathML attribute reference
MathML Attribute Values
=======================

MathML-specific types
---------------------

In addition to CSS data types, some MathML attributes accept the following types:

* `<unsigned-integer>`: An `<integer>`, whose first character is neither U+002D HYPHEN-MINUS character (-) nor U+002B PLUS SIGN (+); for example `1234`.
* `<boolean>`: A string `true` or `false` representing a boolean value.
Legacy MathML lengths
---------------------

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

Instead of `<length-percentage>`, MathML used to define its own type to describe lengths. Accepted values included non-zero unitless length values (e.g. `5` to mean `500%`), values containing numbers ending with a dot (e.g. `34.px`), or named spaces (e.g. `thinmathspace`). For compatibility reasons, it is recommended to replace non-zero unitless length values with equivalent `<percentage>` values, to remove unnecessary dots in numbers, and to use the following replacement for named lengths:
```

veryverythinmathspace  => 0.05555555555555555em
verythinmathspace      => 0.1111111111111111em
thinmathspace          => 0.16666666666666666em
mediummathspace        => 0.2222222222222222em
thickmathspace         => 0.2777777777777778em
verythickmathspace     => 0.3333333333333333em
veryverythickmathspace => 0.3888888888888889em
```

### Units

| Unit | Description |
| --- | --- |
| `em` | `Font-relative` unit |
| `ex` | `Font-relative` unit. (The "x"-height of the element, `1ex ≈ 0.5em` in many fonts) |
| `px` | Pixels |
| `in` | Inches (1 inch = 2.54 centimeters) |
| `cm` | Centimeters |
| `mm` | Millimeters |
| `pt` | Points (1 point = 1/72 inch) |
| `pc` | Picas (1 pica = 12 points) |
| `%` | Percentage of the default value. |

### Constants

| Constant | Value |
| --- | --- |
| `veryverythinmathspace` | 1/18`em` |
| `verythinmathspace` | 2/18`em` |
| `thinmathspace` | 3/18`em` |
| `mediummathspace` | 4/18`em` |
| `thickmathspace` | 5/18`em` |
| `verythickmathspace` | 6/18`em` |
| `veryverythickmathspace` | 7/18`em` |
| `negativeveryverythinmathspace` | -1/18`em` |
| `negativeverythinmathspace` | -2/18`em` |
| `negativethinmathspace` | -3/18`em` |
| `negativemediummathspace` | -4/18`em` |
| `negativethickmathspace` | -5/18`em` |
| `negativeverythickmathspace` | -6/18`em` |
| `negativeveryverythickmathspace` | -7/18`em` |

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

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

Below you'll find some examples you can look at to help you to understand how to use MathML.

MathML formulas
---------------

The following demos display increasingly complex mathematical concepts in Web content.

Pythagorean Theorem

Small example showing a proof of the Pythagorean Theorem.

Deriving the Quadratic Formula

Outlines the derivation of the Quadratic Formula.

Mozilla MathML Test

Original test from the Mozilla MathML project. It contains examples from the TeXbook with image references generated by TeX.

MathML Browser Test

A similar test with concrete formulas taken from Wikipedia.

Other Web technologies
----------------------

The following demos mix MathML with other Web technologies to produce advanced content.

`<la-tex>` custom element

A custom element that accepts LaTeX content.

Magnetic field demo

A 3D representation of a magnetic field, using SVG and WebGL.

Συνάρτηση ζήτα Ρήμαν (el)

A greek article about the Riemann zeta function, with Web fonts from the Greek Font Society.

Pell's equation

A JavaScript program to solve Pell's equation using `BigInt`.

Lovelace's program for Bernouilli numbers

An emulator for Ada Lovelace's program to calculate Bernouilli numbers, using Private properties.
Proving the Pythagorean theorem
===============================

We will now prove the Pythagorean theorem:

**Statement**: In a right triangle, the square of the hypotenuse is equal to
 the sum of the squares of the other two sides.

i.e., If a and b are the legs and c is the hypotenuse then


a
2

+

b
2

=

c
2

.

**Proof:** We can prove the theorem algebraically by showing that on
 this figure
 the area of the big square equals the area of the inner square (hypotenuse
 squared) plus the area of the four triangles:



(
a
+
b
)

2

=

c
2

+
4
⋅
(

1
2

a
b
)


a
2

+
2
a
b
+

b
2

=

c
2

+
2
a
b


a
2

+

b
2

=

c
2
Deriving the Quadratic Formula
==============================

This page outlines the derivation of the Quadratic Formula.

We take a quadratic equation in its general form, and solve for x:




a
⁢

x
2

+
b
⁢
x

+
c

=

0



a
⁢

x
2

+
b
⁢
x

=

−
c


x
2

+

b
a

⁤
x

=

−
c

a

Divide out leading coefficient.



x
2

+

b

a

⁤
x
+

(

b

2
a

)

2


=


−
c
(
4
a
)

a
(
4
a
)

+

b
2

4

a
2


Complete the square.


(
x
+

b

2
a

)
(
x
+

b

2
a

)

=


b
2

−
4
a
c

4

a
2



Discriminant revealed.



(
x
+

b

2
a

)

2


=


b
2

−
4
a
c

4

a
2





x
+

b

2
a


=



b
2

−
4
a
c

4

a
2





x

=

−
b

2
a

±

{
C
}


b
2

−
4
a
c

4

a
2


There's the vertex formula.


x

=

−
b
±

{
C
}

b
2

−
4
a
c

2
a
<mfenced>
=========

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**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.

The **`<mfenced>`** MathML element provides the possibility to add custom opening and closing brackets (such as parenthese) and separators (such as commas or semicolons) to an expression.

**Note:** Historically, the `<mfenced>` element was defined as a shorthand for writing fenced expressions and equivalent to an expanded form involving `<mrow>` and `<mo>` elements. Nowadays, it is recommended to use that equivalent form instead.

Attributes
----------

This element's attributes include the global MathML attributes.

`close`

A string for the closing delimiter. The default value is `")`" and any white space is trimmed.

`open`

A string for the opening delimiter. The default value is `"("` and any white space is trimmed.

`separators`

A sequence of zero or more characters to be used for different separators, optionally divided by white space, which is ignored. The default value is ",". By specifying more than one character, it is possible to set different separators for each argument in the expression. If there are too many separators, all excess is ignored. If there are too few separators in the expression, the last specified separator is repeated.

Examples
--------

### The last separator is repeated (`,`)


```html
<math display="block">
  <mfenced open="{" close="}" separators=";;,">
    <mi>a</mi>
    <mi>b</mi>
    <mi>c</mi>
    <mi>d</mi>
    <mi>e</mi>
  </mfenced>
</math>
```


Sample rendering: 
 ![{a;b;c,d,e}](/en-US/docs/Web/MathML/Element/mfenced/mfenced01.png)

Rendering in your browser:

### All excess is ignored (`,`)


```html
<math display="block">
  <mfenced open="[" close="]" separators="||||,">
    <mi>a</mi>
    <mi>b</mi>
    <mi>c</mi>
    <mi>d</mi>
    <mi>e</mi>
  </mfenced>
</math>
```


Sample rendering: 
 ![[a|b|c|d|e]](/en-US/docs/Web/MathML/Element/mfenced/mfenced02.png)

Rendering in your browser:

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

The `<mfenced>` element is not defined in any browser-oriented specification but you can find a description in MathML 4.

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

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

The **`<munder>`** MathML element is used to attach an accent or a limit under an expression. It uses the following syntax: `<munder> base underscript </munder>`

Attributes
----------

This element's attributes include the global MathML attributes as well as the following attribute:

`accentunder`

A `<boolean>` indicating whether the under script should be treated as an accent (i.e. drawn bigger and closer to the base expression).

Examples
--------


```html
<math display="block">
  <munder accentunder="true">
    <mrow>
      <mi>x</mi>
      <mo>+</mo>
      <mi>y</mi>
      <mo>+</mo>
      <mi>z</mi>
    </mrow>
    <mo>&#x23DF;<!--BOTTOM CURLY BRACKET--></mo>
  </munder>
</math>
```

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

| Specification |
| --- |
| MathML Core # underscripts-and-overscripts-munder-mover-munderover |

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

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

See also
--------

* `<mover>` (Overscript)
* `<munderover>` (Underscript-overscript pair)
<mpadded>
=========

The **`<mpadded>`** MathML element is used to add extra padding and to set the general adjustment of position and size of enclosed contents.

Attributes
----------

This element's attributes include the global MathML attributes as well as the following attributes:

`depth`

A `<length-percentage>` indicating the desired depth (below the baseline) of the `<mpadded>` element.

`height`

A `<length-percentage>` indicating the desired height (above the baseline) of the `<mpadded>` element.

`lspace`

A `<length-percentage>` indicating the horizontal location of the positioning point of the child content with respect to the positioning point of the `<mpadded>` element.

`voffset`

A `<length-percentage>` indicating the vertical location of the positioning point of the child content with respect to the positioning point of the `<mpadded>` element.

`width`

A `<length-percentage>` indicating the desired horizontal length of the `<mpadded>` element.

### Legacy syntax

For the `depth`, `height`, `lspace`, `voffset` and `width` attributes, some browsers may instead accept a more complex syntax:

1. An optional `+` or `-` sign as a prefix, specifying an increment or decrement to the corresponding dimension (if absent, the corresponding dimension is set directly to specified value).
2. Followed by an `<unsigned-number>` (let's call it α below).
3. Optionally followed by a value (if absent, the specified value is interpreted as "100 times α percent").
    * A unit. The specified value is interpreted the same as legacy MathML lengths.
    * A namedspace constant. The specified value is interpreted as α times the constant.
    * A pseudo-unit `width`, `height` or `depth`. The specified value is interpreted as α times the corresponding dimension of the content.
    * A percent sign followed by a pseudo-unit `width`, `height` or `depth`. The specified value is interpreted as α% the corresponding dimension of the content.
Examples
--------

### Dimensions and offsets


```html
<math display="block">
  <mpadded width="400px" height="5em" depth="4em"
 lspace="300px" voffset="-2em"
 style="background: lightblue">
    <mi>x</mi>
    <mo>+</mo>
    <mi>y</mi>
  </mpadded>
</math>
```

### Legacy syntax


```html
<math display="block">
  <!-- increment by a length -->
  <mpadded width="+20px" style="background: lightblue">
    <mtext>+20px</mtext>
  </mpadded>

  <!-- set to a pseudo-unit -->
  <mpadded width="2width" style="background: lightgreen">
    <mtext>2width</mtext>
  </mpadded>

  <!-- increment by a percent of a pseudo-unit -->
  <mpadded width="+400%height" style="background: lightyellow">
    <mtext>+400%height</mtext>
  </mpadded>

  <!-- decrement to a multiple of a namedspace -->
  <mpadded width="-1thickmathspace" style="background: pink">
    <mtext>-.5thickmathspace</mtext>
  </mpadded>
</math>
```

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

| Specification |
| --- |
| MathML Core # adjust-space-around-content-mpadded |

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

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

See also
--------

* `<mphantom>`
* `<mspace>`
<mover>
=======

The **`<mover>`** MathML element is used to attach an accent or a limit over an expression. Use the following syntax: `<mover> base overscript </mover>`

Attributes
----------

This element's attributes include the global MathML attributes as well as the following attribute:

`accent`

A `<boolean>` indicating whether the over script should be treated as an accent (i.e. drawn bigger and closer to the base expression).

Examples
--------


```html
<math display="block">
  <mover accent="true">
    <mrow>
      <mi>x</mi>
      <mo>+</mo>
      <mi>y</mi>
      <mo>+</mo>
      <mi>z</mi>
    </mrow>
    <mo>&#x23DE;<!--TOP CURLY BRACKET--></mo>
  </mover>
</math>
```

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

| Specification |
| --- |
| MathML Core # underscripts-and-overscripts-munder-mover-munderover |

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

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

See also
--------

* `<munder>` (Underscript)
* `<munderover>` (Underscript-overscript pair)
<mspace>
========

The **`<mspace>`** MathML element is used to display a blank space, whose size is set by its attributes.

Attributes
----------

This element's attributes include the global MathML attributes as well as the following attributes:

`depth`

A `<length-percentage>` indicating the desired depth (below the baseline) of the space.

`height`

A `<length-percentage>` indicating the desired height (above the baseline) of the space.

`width`

A `<length-percentage>` indicating the desired width of the space.


**Note:** For the `depth`, `height`, `width` attributes, some browsers may also accept legacy MathML lengths.

Examples
--------


```html
<math display="block">
  <mn>1</mn>
  <mspace depth="40px" height="20px" width="100px"
 style="background: lightblue;"/>
  <mn>2</mn>
</math>
```

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

| Specification |
| --- |
| MathML Core # space-mspace |

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

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

See also
--------

* `<mpadded>`
* `<mphantom>`
<ms>
====

The **`<ms>`** MathML element represents a **string** literal meant to be interpreted by programming languages and computer algebra systems.

Attributes
----------

This element's attributes include the global MathML attributes.

Some browsers may also support the following deprecated attributes and will render the content of the `<ms>` element surrounded by the specified opening and closing quotes:

`lquote`

The opening quote to enclose the content. The default value is `&quot;`.

`rquote`

The closing quote to enclose the content. The default value is `&quot;`.

Examples
--------

### Default rendering


```html
<math display="block">
  <ms>Hello World!</ms>
</math>
```

### Legacy quote attributes


```html
<math display="block">
  <ms lquote="„" rquote="'">abc</ms>
</math>
```

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

| Specification |
| --- |
| MathML Core # string-literal-ms |

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

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

The **`<munderover>`** MathML element is used to attach accents or limits both under and over an expression.

It uses the following syntax: `<munderover> base underscript overscript </munderover>`

Attributes
----------

This element's attributes include the global MathML attributes as well as the following attributes:

`accent`

A `<boolean>` indicating whether the over script should be treated as an accent (i.e. drawn bigger and closer to the base expression).

`accentunder`

A `<boolean>` indicating whether the under script should be treated as an accent (i.e. drawn bigger and closer to the base expression).

Examples
--------


```html
<math display="block">
  <munderover>
    <mo>∑</mo>
    <mrow>
      <mi>n</mi>
      <mo>=</mo>
      <mn>1</mn>
    </mrow>
    <mrow>
      <mo>+</mo>
      <mn>∞</mn>
    </mrow>
  </munderover>
</math>
```

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

| Specification |
| --- |
| MathML Core # underscripts-and-overscripts-munder-mover-munderover |

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

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

See also
--------

* `<munder>` (Underscript)
* `<mover>` (Overscript)