recursal/MDN huggingface dataset:
Animation: remove イベント
======================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`remove`** は `Animation` インターフェイスのイベントで、アニメーションが自動的に除去された時にブラウザーによって発生します。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("finish", (event) => { })
onfinish = (event) => { }
```

イベント型
-----

`AnimationPlaybackEvent` です。 `Event` から継承しています。

Event

AnimationPlaybackEventイベントプロパティ
---------

*以下に挙げたプロパティに加え、親インターフェイスである `Event` から継承したプロパティが利用できます。*

`AnimationPlaybackEvent.currentTime` 読取専用 

イベントを生成したアニメーションの現在時刻。

`AnimationPlaybackEvent.timelineTime` 読取専用 

イベントを生成したアニメーションのタイムラインの時刻値。

例
-

### 置換されたアニメーションの除去

この例では、 `<button id="start">` 要素と、マウスが移動するたびに実行するイベントリスナーがあります。 `mousemove` イベントハンドラーは `<button>` をマウスポインターの位置にアニメーションさせるアニメーションを設定します。これは巨大なアニメーションリストになり、メモリーリークを作成する可能性があります。このため、現代のブラウザーでは、他のアニメーションによってオーバーライドされた前方充填アニメーションは自動的に除去されます。

作成したアニメーションの数が表示されます。 `remove` イベントリスナーを使用して、除去されたアニメーションの数をカウントして表示します。

アニメーションの 1 つを除いて、最終的にはすべて除去されるはずです。

#### HTML


```html
<button id="start">クリックでドラッグ</button>
<br />
<button id="reset">例をリセット</button>
<p>
  ボタンをクリックするとアニメーションが始まります（既定では、このようなアニメーションを体験すると偏頭痛に悩まされる人を保護するために無効になっています）。
</p>
<p>Animations created: <span id="count-created">0</span></p>
<p>Animations removed: <span id="count-removed">0</span></p>
```


#### CSS


```css
:root,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

button {
  margin: 0.5rem 0;
}
```


#### JavaScript


```js
const button = document.querySelector("#start");
let created = 0;
let removed = 0;

button.addEventListener(
  "click",
  () => {
    document.body.addEventListener("mousemove", (event) => {
      const animation = button.animate(
        { transform: `translate(${event.clientX}px, ${event.clientY}px)` },
        { duration: 500, fill: "forwards" },
      );
      created++;
      showCounts();

      // アニメーションが除去された後、 remove イベントが発生
      animation.addEventListener("remove", () => {
        removed++;
        showCounts();
      });
    });
  },
  { once: true },
);

function showCounts() {
  document.getElementById("count-created").textContent = created;
  document.getElementById("count-removed").textContent = removed;
}

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => {
  document.location.reload();
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-onremove |
| Web Animations # remove-event |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`, `AnimationPlaybackEvent`
* `Animation.replaceState`: アニメーションが削除されたかどうかを確認します
* `Animation.persist()`: アニメーションが除去されないようにします
Animation: playbackRate プロパティ
=============================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`Animation.playbackRate`** はウェブアニメーション API で、アニメーションの再生レートを返すしたり設定したりします。

アニメーションには**再生時間**があり、アニメーションの `timeline` (en-US) 時刻の変化率からアニメーションの現在時刻への変倍率を指定します。再生レートは初期値で `1` です。

値
-

0、負、正の値を取ります。負の値ではアニメーションが反転します。この値は変倍率で、例えば 2 の値を指定すると再生速度が 2 倍になります。

**メモ:** アニメーションの `playbackRate` を `0` に設定すると、アニメーションは一時停止します（ただし、`playstate` は必ずしも `paused` にはなりません）。

例
-

アリスの成長/縮小ゲーム の例では、ボトルをクリックしたりタップしたりすると、アリスの成長アニメーション (`aliceChange`) が反転し、アリスが縮みます。


```js
const shrinkAlice = () => {
  aliceChange.playbackRate = -1;
  aliceChange.play();
};

// タップまたはクリックすると、アリスは縮小する
bottle.addEventListener("mousedown", shrinkAlice, false);
bottle.addEventListener("touchstart", shrinkAlice, false);
```


反対に、ケーキをクリックすると、彼女は「成長」し、 `aliceChange` を再び前方に再生します。


```js
const growAlice = () => {
  aliceChange.playbackRate = 1;
  aliceChange.play();
};

// タップまたはクリックすると、アリスが成長する
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);
```


別の例として、赤の女王のレースゲームでは、アリスと赤の女王は常に減速しています。


```js
setInterval(() => {
  // 再生レートが 0.4 を下回らないことを確認

  if (redQueen_alice.playbackRate > 0.4) {
    redQueen_alice.playbackRate \*= 0.9;
  }
}, 3000);
```


しかし、それらをクリックしたりタップしたりすると、 `playbackRate` が倍増してスピードアップします。


```js
const goFaster = () => {
  redQueen_alice.playbackRate \*= 1.1;
};

document.addEventListener("click", goFaster);
document.addEventListener("touchstart", goFaster);
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-playbackrate |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`
Animation: play() メソッド
======================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`play()`** は ウェブアニメーション APIの `Animation` インターフェイスのメソッドで、アニメーションの再生を開始または再開します。アニメーションが完了した場合、`play()` を呼び出すとアニメーションを再開し、最初から再生します。

構文
--


```js
play()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

アリスの成長/縮小ゲームの例では、ケーキをクリックまたはタップすると、アリスの成長アニメーション (`aliceChange`) が再生され、ケーキのアニメーションが発生すると同時に、アリスが大きくなります。 2 つの `Animation.play()`、 1 つの `EventListener` です。


```js
// The cake has its own animation:
const nommingCake = document
  .getElementById("eat-me\_sprite")
  .animate(
    [{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }],
    {
      fill: "forwards",
      easing: "steps(4, end)",
      duration: aliceChange.effect.timing.duration / 2,
    },
  );

// Pause the cake's animation so it doesn't play immediately.
nommingCake.pause();

// This function will play when ever a user clicks or taps
const growAlice = () => {
  // Play Alice's animation.
  aliceChange.play();

  // Play the cake's animation.
  nommingCake.play();
};

// When a user holds their mouse down or taps, call growAlice to make all the animations play.
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-play |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`: ウェブページのアニメーションを制御することができるその他のメソッドやプロパティ
* `Animation.pause()`: アニメーションを停止します。
* `Animation.reverse()`: アニメーションを逆方向に再生します。
* `Animation.finish()`: アニメーションを終了します。
* `Animation.cancel()`: アニメーションをキャンセルします。
Animation: currentTime プロパティ
============================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`Animation.currentTime`** は ウェブアニメーション API のプロパティで、実行中か一時停止中かを問わず、アニメーションの現在の時刻をミリ秒単位で返したり設定したりします。

アニメーションが `timeline` (en-US) を持たない、アクティブではない、またはまだ再生されていない場合、 `currentTime` の返値は `null` です。

値
-

現在の時刻をミリ秒で表す数値。アニメーションを無効にする場合は `null`。

例
-

ゲーム Drink Me/Eat Me game では、アリスの身長がアニメーションし、小さくなったり大きくなったりします。ゲームを始めるときには、アニメーションの currentTime を KeyframeEffect の持続時間の半分に設定することで、彼女の身長を2つの極の中間に設定します。


```js
aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
```


より一般的な意味としては、アニメーションの 50% の位置に移動することを意味します。


```js
animation.currentTime =
  animation.effect.getComputedTiming().delay +
  animation.effect.getComputedTiming().activeDuration / 2;
```

時間精度の低下
-------

 タイミング攻撃やフィンガープリンティングから保護するために、 `animation.currentTime` の精度はブラウザー設定によっては丸められている可能性があります。
 Firefox では、 `privacy.reduceTimerPrecision` 環境設定が既定で有効になっており、 Firefox 59 では 20 マイクロ秒が既定値です。


```js
// Firefox 60 における 時間制度の低下 (2ms)
animation.currentTime;
// 23.404
// 24.192
// 25.514
// …

// `privacy.resistFingerprinting` が有効な場合の時間制度の低下
animation.currentTime;
// 49.8
// 50.6
// 51.7
// …
```


Firefox では、 `privacy.resistFingerprinting` を有効にすると、精度を 100ms または `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` の値のどちらか大きい方にすることができます。

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-currenttime |

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

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

関連情報
----

* `Animation`: ウェブページのアニメーションを制御するためのその他のメソッドやプロパティ
* `Animation.startTime`: アニメーションの開始が計画されている時刻
* ウェブアニメーション API
Animation: playState プロパティ
==========================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`Animation.playState`** はウェブアニメーション API の読み取り専用プロパティで、アニメーションの再生状態を説明する列挙値を返します。

値
-

`idle`

アニメーションの現在の時刻は未解決で、待機タスクはありません。

`running`

アニメーションは実行中です。

`paused`

アニメーションが中断され、 `Animation.currentTime` プロパティが更新されていません。

`finished`

アニメーションが境界の 1 つに達し、 `Animation.currentTime` プロパティが更新されていません。

以前、ウェブアニメーションでは、再生の開始などの非同期処理がまだ完了していないことを示すために、 **`pending`** の値を定義していました。これは、別個の `Animation.pending` プロパティで示すようになりました。

例
-

例えばアリスの成長/縮小ゲームの例では、プレイヤーはアリスが涙を流して泣くという結末にたどり着きます。ゲームでは、パフォーマンス上の理由から、涙は見えているときだけアニメーションします。ですから、このようにアニメーションしたら、すぐに一時停止しなければなりません。


```js
// 涙のアニメーションをセットアップ

tears.forEach((el) => {
  el.animate(tearsFalling, {
    delay: getRandomMsRange(-1000, 1000), // それぞれの涙をランダムにする
    duration: getRandomMsRange(2000, 6000), // それぞれの涙をランダムにする
    iterations: Infinity,
    easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)",
  });
  el.pause();
});

// エンディングを表示する必要があるときに、涙が落ちるのを再生

tears.forEach((el) => {
  el.play();
});

// 涙のアニメーションをリセットし、一時停止

tears.forEach((el) => {
  el.pause();
  el.currentTime = 0;
});
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-playstate |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`: ウェブページのアニメーションを制御するためのその他のメソッドやプロパティ
Animation: startTime プロパティ
==========================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`Animation.startTime`** は `Animation` インターフェイスのプロパティで、倍精度浮動小数点値で、アニメーションの再生開始予定時刻を示します。

アニメーションの**開始時刻**は、対象とする `timeline` (en-US) が再生を始める時刻です。アニメーションの **開始時刻** は、最初は未解決です（値がないので `null` という意味です）。

値
-

現在の時刻をミリ秒で表す浮動小数点数、または時刻が設定されていない場合は `null` です。この値を読むことで、現在設定されている開始時刻を知ることができ、この値を変更することで異なる時刻にアニメーションを始めることができます。

例
-

ウェブアニメーション API の実行の例では、すべての新しいアニメーションする猫に、実行する元の猫と同じ `startTime` を与えることで同期させることができます。


```js
const catRunning = document
  .getElementById("withWAAPI")
  .animate(keyframes, timing);

/\* 新しい猫を作成する関数 \*/
function addCat() {
  const newCat = document.createElement("div");
  newCat.classList.add("cat");
  return newCat;
}

/\* これは、 WAAPI 列に猫を追加する関数 \*/
function animateNewCatWithWAAPI() {
  // make a new cat
  const newCat = addCat();

  // animate said cat with the WAAPI's "animate" function
  const newAnimationPlayer = newCat.animate(keyframes, timing);

  // set the animation's start time to be the same as the original .cat#withWAAPI
  newAnimationPlayer.startTime = catRunning.startTime;

  // Add the cat to the pile.
  WAAPICats.appendChild(newCat);
}
```

時間精度の低下
-------

 タイミング攻撃やフィンガープリンティングから保護するために、 `animation.currentTime` の精度はブラウザー設定によっては丸められている可能性があります。
 Firefox では、 `privacy.reduceTimerPrecision` 環境設定が既定で有効になっており、 Firefox 59 では 20 マイクロ秒が既定値です。


```js
// Firefox 60 における 時間制度の低下 (2ms)
animation.currentTime;
// 23.404
// 24.192
// 25.514
// …

// `privacy.resistFingerprinting` が有効な場合の時間制度の低下
animation.currentTime;
// 49.8
// 50.6
// 51.7
// …
```


Firefox では、 `privacy.resistFingerprinting` を有効にすると、精度を 100ms または `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` の値のどちらか大きい方にすることができます。

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-starttime |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`
* `Animation.currentTime`: アニメーションの現在の時刻
Animation: cancel イベント
======================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`cancel`** は `Animation` インターフェイスのイベントで、`Animation.cancel()` メソッドが呼び出された時や、アニメーションの再生が完了する前に要素から除去された時など、アニメーションが他の状態から `"idle"` 再生状態になった時に発行されます。

**メモ:** 最初からアイドル状態で新しいアニメーションを作成しても、新しいアニメーションの `cancel` イベントは発生しません。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("cancel", (event) => { })
oncancel = (event) => { }
```

イベント型
-----

`AnimationPlaybackEvent` です。 `Event` から継承しています。

Event

AnimationPlaybackEventイベントプロパティ
---------

*以下に挙げたプロパティに加え、親インターフェイスである `Event` から継承したプロパティが利用できます。*

`AnimationPlaybackEvent.currentTime` 読取専用 

イベントを生成したアニメーションの現在時刻。

`AnimationPlaybackEvent.timelineTime` 読取専用 

イベントを生成したアニメーションのタイムラインの時刻値。

例
-

アニメーションがキャンセルされた場合、それを要素から除去します。


```js
animation.oncancel = (event) => {
  animation.effect.target.remove();
};
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-oncancel |
| Web Animations # cancel-event |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`
Animation: pending プロパティ
========================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`Animation.pending`** は ウェブアニメーション API の読み取り専用プロパティで、アニメーションが現在、再生開始や実行するアニメーションの一時停止などを行う非同期操作を待っているかどうかを示します。

値
-

アニメーションが待機中の場合は **`true`**、そうでなければ **`false`** です。

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-pending |

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

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

関連情報
----

* `Animation`: ウェブページのアニメーションを制御するためのその他のメソッドやプロパティ
* ウェブアニメーション API
Animation: finish イベント
======================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`finish`** は `Animation` インターフェイスのイベントで、アニメーションの再生が完了したとき、または `Animation.finish()` メソッドが呼び出されてアニメーションが即座に終了させられたときに発生します。

**メモ:** `"paused"`の再生状態は`finished"`の再生状態に優先します。
 アニメーションが一時停止と完了の両方の状態の場合、 `"paused"` の状態が報告されます。
 `startTime`を `document.timeline.currentTime - (Animation.currentTime * Animation.playbackRate)` に設定するには、アニメーションを強制的に `"finished"` 状態にすることができます。


構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("finish", (event) => { })
onfinish = (event) => { }
```

イベント型
-----

`AnimationPlaybackEvent` です。 `Event` から継承しています。

Event

AnimationPlaybackEventイベントプロパティ
---------

*以下に挙げたプロパティに加え、親インターフェイスである `Event` から継承したプロパティが利用できます。*

`AnimationPlaybackEvent.currentTime` 読取専用 

イベントを生成したアニメーションの現在時刻。

`AnimationPlaybackEvent.timelineTime` 読取専用 

イベントを生成したアニメーションのタイムラインの時刻値。

例
-

`Animation.onfinish` は、ウェブアニメーション API の国のアリスのアリスの成長/縮小ゲームで何度か使用しています。
 ここでは、不透明アニメーションがフェードインした後、要素にポインターイベントを追加しています。


```js
// ゲームのエンディングクレジットにアニメーションを追加
const endingUI = document.getElementById("ending-ui");
const bringUI = endingUI.animate(keysFade, timingFade);

// アニメーションクレジットの一時停止
bringUI.pause();

// この関数は、クレジットのポインターイベントを取り除く
hide(endingUI);

// 後でクレジットがフェードインされたときに、
// ポインターイベントを追加し直す
bringUI.onfinish = (event) => {
  endingUI.style.pointerEvents = "auto";
};
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-onfinish |
| Web Animations # finish-event |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`
* `Animation.finish()`
Animation: ready プロパティ
======================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`Animation.ready`** はウェブアニメーション API の読み取り専用プロパティで、アニメーションが再生可能になったときに解決するプロミス (`Promise`) を返します。アニメーションの再生状態が `"pending"` になるたびに、またアニメーションが取り消される可能性があるときにも、新しいプロミスが作成されます。

**メモ:** 同じ `Promise` が保留中の `play` リクエストと保留中の `pause` リクエストの両方に使用されるので、プロミスが解決したときにアニメーションの状態を調べることをお勧めします。

値
-

アニメーションを再生する準備ができたときに解決する `Promise` です。プロミスの ready を使用する場合、通常これに似た構造を使用します。


```js
animation.ready.then(() => {
  // アニメーションを実行する準備ができたときに
  // 必要なことを何かする
});
```

例
-

次の例では、**現在 ready になっているプロミス**が解決すると、アニメーションの状態は `running` になります。アニメーションは `pause` と `play` を呼び出す間に再生状態が `pending` から変わらない、**現在 ready になっているプロミス**は変化しないからです。


```js
animation.pause();
animation.ready.then(() => {
  // 'running' と表示
  alert(animation.playState);
});
animation.play();
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-ready |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`
* `Animation.playState`
Animation: replaceState プロパティ
=============================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`Animation.replaceState`** は ウェブアニメーション API の読み取り専用プロパティで、アニメーションが別なアニメーションで置き換えられた後で、ブラウザーによって削除されたかどうかを示します。

値
-

アニメーションの遷移先の状態を表す文字列。値は以下のいずれかです。

`active`

アニメーションが作成されたときの、アニメーションの置き換える状態の初期値です。

`persisted`

アニメーションに `Animation.persist()` が呼び出されており、明示的に維持されています。

`removed`

アニメーションはブラウザーによって自動的に除去されています。

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-replacestate |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`
* `remove` イベント
* `Animation.persist()`
Animation: timeline プロパティ
=========================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`Animation.timeline`** は `Animation` インターフェイスのプロパティで、このアニメーションに関連付けられた `timeline` (en-US) を返したり設定したりします。タイムラインは同期を目的とした時刻値の元であり、`AnimationTimeline` (en-US)ベースのオブジェクトです。既定値では、アニメーションのタイムラインと `Document` のタイムラインは同じです。

値
-

アニメーションのタイミングソースとして使用するタイムラインオブジェクト (en-US)、または既定値では `null` であり、 `Document` のタイムラインを使用することを表します。

例
-

ここでは、アニメーションのタイムラインを文書のタイムラインと同じに設定します（ちなみに、これはすべてのアニメーションの既定値です）：


```js
animation.timeline = document.timeline;
```

仕様書
---

| Specification |
| --- |
| Web Animations # dom-animation-timeline |

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

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

関連情報
----

* ウェブアニメーション API
* `Animation`
* `AnimationTimeline` (en-US): すべてのタイムラインが継承する親オブジェクト
* `DocumentTimeline` (en-US): 現在利用できる唯一のタイムラインオブジェクト
* `Document.timeline`: すべてのアニメーションに割り当てる既定値
ServiceWorkerRegistration.updateViaCache
========================================

**`updateViaCache`** は `ServiceWorkerRegistration` インターフェイスの読み取り専用プロパティで、 `ServiceWorkerContainer.register` の呼び出しで指定されたモードを使用してキャッシュを更新します。
 `importScripts` のリクエストは HTTP キャッシュで行われます。 `updateViaCache` はこの動作を制御します。

値
-

以下の値の何れかを返します。

* `imports`: サービスワーカーの更新のために HTTP キャッシュは参照されませんが、 `importScripts` では参照されることを意味します。
* `all`: 両方の場合で HTTP キャッシュが参照されることを意味します。
* `none`: HTTP キャッシュが参照されないことを意味します。
例
-

次の例は、 updateViaCache の使用例です。


```js
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/service-worker.js", {
      updateViaCache: "none",
    })
    .then((registration) => {
      registration.addEventListener("updatefound", () => {
        // If updatefound is fired, it means that there's
        // a new service worker being installed.
        console.log(`Value of updateViaCache: ${registration.updateViaCache}`);
      });
    })
    .catch((error) => {
      console.error(`Service worker registration failed: ${error}`);
    });
}
```

仕様書
---

| Specification |
| --- |
| Service Workers # service-worker-registration-updateviacache |

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

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

関連情報
----

* サービスワーカーの使用
* Service workers basic code example (英語)
* Is ServiceWorker ready? (英語)
* `Promise`
* ウェブワーカーの使用
ServiceWorkerRegistration.waiting
=================================

**`waiting`** は `ServiceWorkerRegistration` インターフェイスのプロパティで、サービスワーカーのうち `ServiceWorker.state` がインストール済み (`installed`) のものを返します。 このプロパティは、最初は `null` に設定されています。

**メモ:** この機能はウェブワーカーで利用できます。

値
-

`ServiceWorker` オブジェクト（現在インストール済み (`installed`) の状態の場合）。

仕様書
---

| Specification |
| --- |
| Service Workers # navigator-service-worker-waiting |

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

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

関連情報
----

* サービスワーカーの使用
* Service workers basic code example (英語)
* Is ServiceWorker ready? (英語)
* `Promise`
* ウェブワーカーの使用
ServiceWorkerRegistration.getNotifications()
============================================

**`getNotifications()`** は `ServiceWorkerRegistration` インターフェイスのメソッドで、現在のサービスワーカー登録を介して現在のオリジンから作成された順序で通知のリストを返します。オリジンには、アクティブではあるがスコープが異なるサービスワーカー登録が多数あります。 同じオリジンの 1 つのサービスワーカーによって作成された通知は、同じオリジンの他のアクティブなサービスワーカーでは利用できません。

構文
--


```js
getNotifications()
getNotifications(options)
```

### 引数

`options` 省略可

返される通知を絞り込むオプションを含むオブジェクト。 使用可能なオプションは次のとおりです。

`tag`

通知タグを表す文字列。 指定した場合、このタグを持つ通知のみが返されます。


### 返値

`Promise` で、 `Notification` オブジェクトのリストに解決されます。

例
-


```js
navigator.serviceWorker.register("sw.js");

const options = { tag: "user\_alerts" };

navigator.serviceWorker.ready.then((registration) => {
  registration.getNotifications(options).then((notifications) => {
    // notifications で何かをします
  });
});
```

仕様書
---

| Specification |
| --- |
| Notifications API Standard # dom-serviceworkerregistration-getnotifications |

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

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

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

**`sync`** は `ServiceWorkerRegistration` インターフェイスのプロパティで、バックグラウンド同期プロセスを管理する `SyncManager` インターフェイスへの参照を返します。

値
-

`SyncManager` オブジェクト。

仕様書
---

| Specification |
| --- |
| Web Background Synchronization # dom-serviceworkerregistration-sync |

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

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