recursal/MDN huggingface dataset:
Touch: screenX プロパティ
====================

概要
--

画面を基準としたタッチ点の X 座標を返します。スクロールオフセットは含まれません。

値
-

数値です。

例
-

この例では、 `Touch` オブジェクトの `Touch.screenX` と `Touch.screenY` プロパティにアクセスする方法を示します。 `Touch.screenX` プロパティは、タッチ点の画面に対する水平 (x) 座標を CSS ピクセルで表したものです。 `Touch.screenY` プロパティは、タッチ点の画面に対する垂直座標を CSS ピクセル単位で表したものです。

以下の単純なコードでは、ユーザーが `source` という id を持つ要素に複数の接触を開始し、その後表面への接触を解除することを想定しています。 `touchstart` イベントハンドラーを呼び出すと、各タッチ点の `Touch.screenX` および `Touch.screenY` 座標にアクセスします。


```js
// 'source' 要素に touchstart リスナーを登録
const src = document.getElementById("source");

src.addEventListener(
  "touchstart",
  (e) => {
    // タッチ点を反復処理し、それぞれの screenX/Y 座標をログ出力する
    // 各座標は CSS ピクセル単位
    for (let i = 0; i < e.touches.length; i++) {
      console.log(`touchpoint[${i}].screenX = ${e.touches[i].screenX}`);
      console.log(`touchpoint[${i}].screenY = ${e.touches[i].screenY}`);
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touch-screenx |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Touch: clientX プロパティ
====================

`Touch.clientX` は読み取り専用プロパティで、スクロールオフセットを含まない、ビューポートに対するタッチ点の X 座標を返します。

### 値

`double` 型の浮動小数点数で、スクロールオフセットを含まない、ビューポートに対するタッチ点の X 座標を表します。

例
-

この例では、 `Touch` オブジェクトの `Touch.clientX` および `Touch.clientY` プロパティを使用しています。 `Touch.clientX` プロパティは、ブラウザーのビューポートを基準としたタッチ点の水平座標で、スクロールオフセットを除いたものです。 `Touch.clientY` プロパティは、ブラウザーのビューポートを基準としたタッチ点の垂直座標で、スクロールオフセットを除いたものです。

この例では、 `source` という id の要素にタッチを開始し、要素内または要素外に移動した後、タッチ面から指を離したと仮定します。 `touchend` のイベントハンドラーが呼び出されると、タッチ開始点から終了点までの `Touch.clientX` 座標と `Touch.clientY` 座標の変化が計算されます。


```js
// 要素 'source' に touchstart リスナーと touchend リスナーを登録
const src = document.getElementById("source");
let clientX;
let clientY;

src.addEventListener(
  "touchstart",
  (e) => {
    // クライアント X/Y 座標をキャッシュ
    clientX = e.touches[0].clientX;
    clientY = e.touches[0].clientY;
  },
  false,
);

src.addEventListener(
  "touchend",
  (e) => {
    let deltaX;
    let deltaY;

    // X 座標と Y 座標の変化を計算
    // changedTouches リストの最初のタッチ点は、
    // 面から除去されたタッチ点です。
    deltaX = e.changedTouches[0].clientX - clientX;
    deltaY = e.changedTouches[0].clientY - clientY;

    // データを処理…
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touch-clientx |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Touch: target プロパティ
===================

**`target`** は `Touch` インターフェイスの読み取り専用プロパティで、タッチ点がその要素の操作領域外に移動した場合や、文書から取り除かれた場合でも、タッチ点が最初に配置されたときに接触が開始された (`EventTarget`) を返します。対象要素が文書から除去されても、イベントはその要素を対象とし、ウィンドウや文書にバブルアップされるとは限らないことに注意してください。タッチしている間に要素が除去されるおそれがある場合は、タッチリスナーを対象に直接取り付けるのが最善の手法です。

値
-

`Touch` オブジェクトが適用される `EventTarget`。

例
-

この例では、`Touch` オブジェクトの `Touch.target` プロパティにアクセスする方法を示します。 `Touch.target` プロパティは `Element` (`EventTarget`) であり、表面に最初に連絡先が配置されたときにこの点を開始します。

以下の単純なコードでは、ユーザーが `source` 要素に 1 つ以上の接触を開始することを想定しています。この要素の `touchstart` イベントハンドラーが呼び出されると、各タッチ点の `Touch.target` プロパティは、イベントの `TouchEvent.targetTouches` リスト経由でアクセスします。


```js
// touchmove リスナーを 'source' 要素に登録
const src = document.getElementById("source");

src.addEventListener(
  "touchstart",
  (e) => {
    // この要素で有効化されたタッチ点を反復処理
    for (let i = 0; i < e.targetTouches.length; i++) {
      console.log(`touchpoint[${i}].target = ${e.targetTouches[i].target}`);
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touch-target |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Touch: identifier プロパティ
=======================

**`Touch.identifier`** はタッチ面に接触した点を識別する固有の値を返します。この値は、タッチ面上でのこの指（またはスタイラス）の動きに関わるすべてのイベントに対して、タッチ面から離れるまで一貫したものです。

値
-

`long` で、 `Touch` オブジェクトの固有の ID を表します。

例
-


```js
someElement.addEventListener(
  "touchmove",
  (e) => {
    // 最後のイベント以降に変更されたタッチ点のリストを反復処理し、
    // 各タッチ点の識別子を出力する。
    for (let i = 0; i < e.changedTouches.length; i++) {
      console.log(
        `changedTouches[${i}].identifier = ${e.changedTouches[i].identifier}`,
      );
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touch-identifier |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Touch: clientY プロパティ
====================

**`Touch.clientY`** は読み取り専用プロパティで、スクロールオフセットを含まない、ブラウザーのビューポートに対するタッチ点の Y 座標を返します。

構文
--

`double` 型の浮動小数点数で、スクロールオフセットを含まない、ビューポートに対するタッチ点の Y 座標を表します。

例
-

この例では、 `Touch` オブジェクトの `Touch.clientX` および `Touch.clientY` プロパティを使用しています。 `Touch.clientX` プロパティは、ブラウザーのビューポートを基準としたタッチ点の水平座標で、スクロールオフセットを除いたものです。 `Touch.clientY` プロパティは、ブラウザーのビューポートを基準としたタッチ点の垂直座標で、スクロールオフセットを除いたものです。

この例では、 `source` という id の要素にタッチを開始し、要素内または要素外に移動した後、タッチ面から指を離したと仮定します。 `touchend` のイベントハンドラーが呼び出されると、タッチ開始点から終了点までの `Touch.clientX` 座標と `Touch.clientY` 座標の変化が計算されます。


```js
// 要素 'source' に touchstart リスナーと touchend リスナーを登録
const src = document.getElementById("source");
let clientX;
let clientY;

src.addEventListener(
  "touchstart",
  (e) => {
    // クライアント X/Y 座標をキャッシュ
    clientX = e.touches[0].clientX;
    clientY = e.touches[0].clientY;
  },
  false,
);

src.addEventListener(
  "touchend",
  (e) => {
    let deltaX;
    let deltaY;

    // X 座標と Y 座標の変化を計算
    // changedTouches リストの最初のタッチ点は、
    // 面から除去されたタッチ点です。
    deltaX = e.changedTouches[0].clientX - clientX;
    deltaY = e.changedTouches[0].clientY - clientY;

    // データを処理…
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touch-clienty |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Touch: force プロパティ
==================

**`Touch.force`** は読み取り専用のプロパティで、タッチ点 (`Touch`) に対してユーザーがタッチ面に与えている圧力の大きさを返します。

値
-

`float` で、ユーザーがタッチ面に加える圧力の大きさを表します。これは `0.0` （圧力なし）と `1.0` （ハードウェアが認識できる最大の圧力）の間の値です。値が不明な場合（例えばタッチ機器がこのプロパティに対応していない場合）には `0.0` の値を返します。力が既知の環境では、 force 属性で表す絶対圧と、圧力のレベルでの感度は異なる場合があります。

例
-

この例では、 `Touch` インターフェイスの `Touch.force` プロパティを使用して示します。このプロパティは加えられる圧力の相対値で、範囲は `0.0` から `1.0` で、`0.0` は圧力なし、 `1.0` はタッチ機器が感知できる最高レベルの圧力です。

以下のコードスニペットでは、 `touchstart` イベントハンドラーは `targetTouches` リストを反復処理し、各タッチ点の `force` 値をログ出力していますが、このコードは値によって異なる処理を呼び出すことができます。


```js
someElement.addEventListener(
  "touchstart",
  (e) => {
    // タッチ点のリストを反復処理し、各タッチ点の力をログ出力する
    for (let i = 0; i < e.targetTouches.length; i++) {
      // 力の値に応じて「切り替える」コードを追加します。例えば、
      // 最小圧力と最大圧力で、ユーザー入力を異なる処理にすることが
      // できます。
      console.log(`targetTouches[${i}].force = ${e.targetTouches[i].force}`);
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touch-force |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Touch: rotationAngle プロパティ
==========================

**`rotationAngle`** は `Touch` インターフェイスの読み取り専用プロパティで、 `Touch.radiusX` と `Touch.radiusY` で定義する接触楕円の回転角度を度単位で返します。値は 0 から 90 の間です。これら 3 つの値を合わせて、ユーザーと画面の連絡先の大きさと図形を近似する楕円を記述します。これは例えば、指先と画面の連絡先を表す比較的大きな楕円にも、スタイラスの先端を表す小さな領域にもなりえます。

値
-

数値です。

例
-

このプロパティの使い方の例については Touch.radiusX の例を参照してください。

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touch-rotationangle |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Touch: screenY プロパティ
====================

概要
--

画面を基準としたタッチ点の Y 座標を返します。スクロールオフセットは含まれません。

値
-

数値です。

例
-

Touch.screenX の例には、このプロパティの使用例が含まれています。

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touch-screeny |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLOutputElement: labels プロパティ
===============================

**`HTMLOutputElement.labels`** は読み取り専用プロパティで、この `<output>` 要素に関連付けられた `<label>` 要素の `NodeList` を返します。

値
-

この `<output>` 要素に関連付けられた `<label>` 要素の `NodeList` を返します。

例
-

### HTML


```html
<label id="label1" for="test">ラベル 1</label>
<output id="test">Output</output>
<label id="label2" for="test">ラベル 2</label>
```

### JavaScript


```js
window.addEventListener("DOMContentLoaded", () => {
  const output = document.getElementById("test");
  for (const label of output.labels) {
    console.log(label.textContent); // "ラベル 1" and "ラベル 2"
  }
});
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-lfe-labels-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLMetaElement: scheme プロパティ
=============================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`HTMLMetaElement.scheme`** プロパティは `HTMLMetaElement.content` 属性の値のスキームを定義します。
 `scheme` プロパティは、`content` プロパティの値を解釈するために使用する追加情報を提供できるようにするために作成されました。`scheme` プロパティはスキーム形式（`YYYY-MM-DD` など）、スキーム形式名（`ISBN` など）、またはスキーム形式に関する詳細情報を提供する URI を値として導きます。スキームは `content` 属性の値の形式を定義します。
 ブラウザーや ユーザーエージェントがスキームを認識している場合、`scheme` の内容は要素の `HTMLMetaElement.name` の拡張として解釈されます。

このプロパティは非推奨です。新しいウェブページでは使用しないでください。

値
-

文字列です。

例
-

 次の例は `name` 属性に `identifier` という値を持つ `<meta>` 要素を検索します。
 `scheme` 値がコンソールにログ出力され、メタデータの内容のスキームを表示します。


```js
// <meta name="identifier" content="1580081754" scheme="ISBN"> があるとする
let meta = document.querySelector("meta[name='identifier']");
console.log(meta.scheme);
// "ISBN"
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-meta-scheme |

ブラウザーの互換性
---------

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

関連情報
----

* `<meta>`
HTMLMetaElement: content プロパティ
==============================

**`HTMLMetaElement.content`** プロパティは、`HTMLMetaElement.name` または `HTMLMetaElement.httpEquiv` との組み合わせによる、プラグマディレクティブと名前付き `<meta>` データの `content` 属性を取得または設定します。
 詳しくは、content 属性を参照してください。

値
-

文字列です。

例
-

### meta 要素の内容の読み取り

 次の例は `name` 属性に `keywords` という値を格納した `<meta>` 要素を問い合わせるものです。
 `content` の値がコンソールにログ出力され、文書の keywords が表示されます。


```js
// <meta name="keywords" content="documentation, HTML, web"> があるとします
let meta = document.querySelector("meta[name='keywords']");
console.log(meta.content);
// "documentation, HTML, web"
```

### 内容付きの meta 要素の作成

 次の例は、新しい `<meta>` 要素を `name` 属性に `description` に設定して作成します。
 `content` 属性に文書の説明を設定し、文書の `<head>` に追加されます。


```js
let meta = document.createElement("meta");
meta.name = "description";
meta.content =
  "<meta> 要素は、名前と値のペアで文書のメタデータを提供するのに使用できます。name 属性はメタデータの名前を与え、content 属性は値を与えます。";
document.head.appendChild(meta);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-meta-content |

ブラウザーの互換性
---------

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

関連情報
----

* `<meta>`
* `HTMLMetaElement.name`
* `HTMLMetaElement.httpEquiv`
* 学習: HTML のメタデータ
HTMLMetaElement: name プロパティ
===========================

**`HTMLMetaElement.name`** プロパティは `HTMLMetaElement.content` との組み合わせで使用し、文書のメタデータを名前と値の組で定義します。
 `name` 属性はメタデータの名前を定義し、`content` 属性はその値を定義します。

値
-

文字列です。

例
-

### meta 要素のメタデータ名の読み取り

 次の例では、文書の最初の `<meta>` 要素を検索します。
 `name` の値をコンソールに出力します。これは文書で keywords を指定するものです。


```js
// <meta name="keywords" content="documentation, HTML, web technologies"> があるとする
let meta = document.querySelector("meta");
console.log(meta.name);
// "keywords"
```

### `author` メタデータの meta 要素を作成

 次の例は、新しい `<meta>` 要素を `name` 属性に `author` を設定して作成します。
 `content` 属性には文書の著者を設定し、この要素を文書の `<head>` に追加します。


```js
let meta = document.createElement("meta");
meta.name = "author";
meta.content = "Franz Kafka";
document.head.appendChild(meta);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-meta-name |

ブラウザーの互換性
---------

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

関連情報
----

* `<meta>`
* name 属性で取りうる値
HTMLMetaElement: media プロパティ
============================

**`HTMLMetaElement.media`** プロパティで、`theme-color` メタデータのメディアを指定することができます。

`theme-color` プロパティで、このプロパティに対応しているブラウザーやオペレーティングシステムにおいて、ブラウザーのツールバーや UI の色を設定することができます。
 `media` プロパティにより、異なる `media` 値に対して異なるテーマカラーを設定することができます。

値
-

文字列です。

例
-

### テーマカラーをダークモードに設定

 次の例では、新しい `<meta>` 要素を作成して `name` 属性を `theme-color` に設定します。
 `content` 属性には `#3c790a` を設定し、`media` 属性には `prefers-color-scheme: dark` と設定し、それからその要素を文書の `<head>` に追加します。
 ユーザーがオペレーティングシステムでダークモードを指定している場合、`media` プロパティを使用して異なる `theme-color` を設定することができます。


```js
var meta = document.createElement("meta");
meta.name = "theme-color";
meta.content = "#3c790a";
meta.media = "(prefers-color-scheme: dark)";
document.head.appendChild(meta);
```

### 端末の大きさでテーマカラーを設定

ほとんどのメタプロパティは一度しか使用することができません。ただし `theme-color` は、固有の `media` 値が提供されていれば、複数回使用することができます。

 この例では、`theme-color` を持つ 2 つの meta 要素を追加しています。1 つはすべての端末用、もう 1 つは小さな画面用です。
 `media` クエリーに一致させる順番が重要ですので、下記に示すように、より詳細なクエリーが文書内で後になるように追加してください。


```js
// すべての端末向けの theme-color を追加
meta = document.createElement("meta");
meta.name = "theme-color";
meta.content = "#ffffff";
document.head.appendChild(meta);

// 小さな端末向けの theme-color を追加
var meta = document.createElement("meta");
meta.name = "theme-color";
meta.media = "(max-width: 600px)";
meta.content = "#000000";
document.head.appendChild(meta);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-meta-media |

ブラウザーの互換性
---------

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

関連情報
----

* `<meta>`
* メディアクエリーで取りうる値
HTMLMetaElement: httpEquiv プロパティ
================================

**`HTMLMetaElement.httpEquiv`** プロパティは、`HTMLMetaElement.content` 属性のプラグマディレクティブまたはレスポンスヘッダーの名前を取得または設定します。
 取りうる値の詳細は、http-equiv 属性を参照してください。

値
-

文字列です。

例
-

### meta 要素の `http-equiv` の値の読み取り

 次の例は `http-equiv` 属性のある `<meta>` 要素を検索します。
 `http-equiv` 属性をコンソールにログ出力し、`refresh` プラグマディレクティブ を表示します。これはブラウザーに、`content` 属性で定義された秒数の後でページを更新することを指示します。


```js
// <meta http-equiv="refresh" content="10" /> があるとする
let meta = document.querySelector("meta[http-equiv]");
console.log(meta.httpEquiv);
// refresh
console.log(meta.content);
// 10
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-meta-httpequiv |

ブラウザーの互換性
---------

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

関連情報
----

* `<meta>`
BackgroundFetchRegistration.failureReason
=========================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`failureReason`** は `BackgroundFetchRegistration` インターフェイスの読み取り専用プロパティで、バックグラウンドフェッチが失敗した理由を示す値を文字列で返します。

このプロパティの値が変化したとき、関連する `BackgroundFetchRegistration` オブジェクトで、progress イベントが発火します。

値
-

下記文字列のいずれかの値をとります。

`""`

バックグラウンドフェッチが完了していない、もしくは成功したとき。

`"aborted"`

ユーザーによって操作がキャンセルされたとき、または `abort()` が呼び出されたとき。

`"bad-status"`

応答ステータスが OK ではないとき ( 200 ~ 299 の範囲外のとき)

`"fetch-error"`

その他の理由によりフェッチが失敗したとき。例えば、CORS 違反や、ネットワーク障害が理由の場合です。

`"quota-exceeded"`

途中でストレージ容量の上限に達したとき。

`"download-total-exceeded"`

バックグラウンドフェッチの登録時に指定された `downloadTotal` を超過したとき。

例
-

このプロパティをコンソールにログ出力すると、フェッチが失敗した理由が表示されます。フェッチが進行中または成功した場合は空文字列が表示されます。


```js
console.log(bgFetch.failureReason);
```

仕様書
---

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchregistration-failurereason |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
BackgroundFetchRegistration.matchAll()
======================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`BackgroundFetchRegistration` インターフェイスの **`matchAll()`** メソッドは、マッチする `BackgroundFetchRecord` オブジェクトの配列を返します。

構文
--


```js
matchAll(request)
matchAll(request,options)
```

### 引数

`request`

取得したい record の `Request`。これは `Request` オブジェクトまたは URL です。

`options` 省略可

`match` 操作のオプションを指定するオブジェクトです。以下が利用可能です。

`ignoreSearch`

URL 中のクエリ文字列を無視するかどうか指定するbool 値です。例えば `true` のとき、`http://foo.com/?value=bar` の `?value=bar` 部分はマッチ処理で無視されます。デフォルトは `false` です。

`ignoreMethod`

bool 値です。`true` のとき、マッチ処理は `Request` の `http` メソッドを検証しません。`false` (デフォルト値)の場合、`GET` と `HEAD` のみ許可されます。

`ignoreVary`

bool 値です。`true` は `VARY` ヘッダーを無視することを意味します。デフォルトは `false` です。


### 返値

マッチした全ての `BackgroundFetchRecord` オブジェクトの配列で解決される `Promise` を返します。

### 例外

`InvalidStateError` `DOMException`

`recordsAvailable` フラグが `false` のとき、発生します。 これは、進行中のフェッチが存在しないことを意味します。

例
-

`matchAll()` を引数なしで呼び出すことで、バックグラウンドフェッチの全ての record を取得することができます。


```js
const records = await bgFetch.matchAll();
console.log(records); // BackgroundFetchRecord オブジェクトの配列
```

仕様書
---

| Specification |
| --- |
| Background Fetch # background-fetch-registration-match-all |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
BackgroundFetchRegistration: progress イベント
==========================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`BackgroundFetchRegistration` インターフェイスの **`progress`** イベントは、関連するバックグラウンドフェッチに進捗があった際に投げられます。

実際には、このイベントは下記プロパティのいずれかが更新されるときに発火します。

* `uploaded`
* `downloaded`
* `result`
* `failureReason`
構文
--

`addEventListener()` 等のメソッドでイベント名を使用するか、関連する `BackgroundFetchRegistration` オブジェクトに `onprogress` というイベントプロパティを設定します。


```js
addEventListener("progress", (event) => { })
onprogress = (event) => { }
```

イベント型
-----

追加のプロパティを持たない汎用 `Event`。

例
-

以下の例は、ダウンロードの進捗をログ出力する方法を示しています。このコードでは、バックグラウンドフェッチが登録された際に、まず `downloadTotal` が設定されていることを確認します。これは `downloaded` プロパティに基づいてダウンロードの進捗を計算するために使用されます。


```js
bgFetch.addEventListener("progress", () => {
  if (!bgFetch.downloadTotal) return;
  const percent = Math.round(
    (bgFetch.downloaded / bgFetch.downloadTotal) \* 100,
  );
  console.log(`ダウンロードの進捗： ${percent}%`);
});
```

仕様書
---

| Specification |
| --- |
| Background Fetch # background-fetch-registration-events |

ブラウザーの互換性
---------

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`result`** は `BackgroundFetchRegistration` インターフェイスの読み取り専用プロパティで、バックグラウンドフェッチが成功したか失敗したかを表す文字列を返します。

このプロパティの値が変化したとき、関連する `BackgroundFetchRegistration` オブジェクトで、progress イベントが発火します。

値
-

下記文字列のいずれかの値をとります。

`""`

フェッチは進行中なので、結果は未確定です。

`"success"`

バックグラウンドのフェッチは成功しました。

`"failure"`

バックグラウンドのフェッチは失敗しました。これは、ブラウザーがリトライできないときにのみ返されます。

例
-

このプロパティをコンソールにログ出力すると、フェッチの進行中であれば空文字列が、そうでなければ結果を表す文字列が出力されます。


```js
console.log(bgFetch.result);
```

仕様書
---

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchregistration-result |

ブラウザーの互換性
---------

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`uploadTotal`** は `BackgroundFetchRegistration` インターフェイスの読み取り専用プロパティで、サーバーに送信される総バイト数を返します。

値
-

`number`。

例
-

`BackgroundFetchRegistration.uploadTotal` をコンソールにログ出力すると、 uploadTotal が出力されます。


```js
console.log(bgFetch.uploadTotal);
```

仕様書
---

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchregistration-uploadtotal |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
BackgroundFetchRegistration.abort()
===================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`BackgroundFetchRegistration` インターフェイスの **`abort()`** メソッドは、アクティブなバックグラウンドフェッチを中止します。

構文
--


```js
abort()
```

### 引数

なし。

### 返値

フェッチの中止が成功したときに `true` で解決される `Promise` を返します。

例
-

進行中のバックグラウンドフェッチを終了させるには、`abort()` を呼び出します。


```js
bgFetch.abort();
```

仕様書
---

| Specification |
| --- |
| Background Fetch # background-fetch-registration-abort |

ブラウザーの互換性
---------

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`downloaded`** は `BackgroundFetchRegistration` インターフェイスの読み取り専用プロパティで、 今までにダウンロードされた容量(バイト単位)を返します。初期値は `0` です。

このプロパティの値が変化したとき、関連する `BackgroundFetchRegistration` オブジェクトで、progress イベントが発火します。

値
-

`number`。

例
-

このプロパティをコンソールにログ出力すると、ダウンロードされたバイト数が出力されます。


```js
console.log(bgFetch.downloaded);
```

仕様書
---

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchregistration-downloaded |

ブラウザーの互換性
---------

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`uploaded`** は `BackgroundFetchRegistration` インターフェイスの読み取り専用プロパティで、送信に成功したバイト数を返します。初期値は `0` です。

このプロパティの値が変化したとき、関連する `BackgroundFetchRegistration` オブジェクトで、progress イベントが発火します。

値
-

`number`。

例
-

このプロパティをコンソールにログ出力すると、アップロードされたバイト数が出力されます。


```js
console.log(bgFetch.uploaded);
```

仕様書
---

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchregistration-uploaded |

ブラウザーの互換性
---------

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`recordsAvailable`** は `BackgroundFetchRegistration` インターフェイスの読み取り専用プロパティで、アクセス可能なリクエストや応答が存在するとき、`true` を返します。この値が `false` のとき、`match()` と `matchAll()` は使用できません。

値
-

`boolean`。

例
-

このプロパティをコンソールにログ出力すると、`true` または `false` を出力し、record が存在するかどうかを示します。


```js
console.log(bgFetch.recordsAvailable);
```

仕様書
---

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchregistration-recordsavailable |

ブラウザーの互換性
---------

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