` の参照を取得し、新しい `ScrollTimeline` を作成し、スクロールタイムラインを進行させる要素は文書 ({{htmlelement("html")}}) 要素であり、スクロール軸は `block` 軸であることを指定します。そして、ウェブアニメーション API を使って `box` 要素をアニメーションします。最後に、ソース要素と軸を `output` 要素に表示します。
+
+```js
+const box = document.querySelector(".box");
+const output = document.querySelector(".output");
+
+const timeline = new ScrollTimeline({
+ source: document.documentElement,
+ axis: "block",
+});
+
+box.animate(
+ {
+ rotate: ["0deg", "720deg"],
+ left: ["0%", "100%"],
+ },
+ {
+ timeline,
+ },
+);
+
+output.textContent = `Timeline source element: ${timeline.source.nodeName}. Timeline scroll axis: ${timeline.axis}`;
+```
+
+#### 結果
+
+スクロールしてアニメーションするボックスをご覧ください。
+
+{{EmbedLiveSample("Displaying the source and axis of a scroll progress timeline", "100%", "320px")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ウェブアニメーション API](/ja/docs/Web/API/Web_Animations_API)
+- [CSS スクロール駆動アニメーション](/ja/docs/Web/CSS/CSS_scroll-driven_animations)
+- {{domxref("AnimationTimeline")}}, {{domxref("ViewTimeline")}}
diff --git a/files/ja/web/api/scrolltimeline/scrolltimeline/index.md b/files/ja/web/api/scrolltimeline/scrolltimeline/index.md
new file mode 100644
index 00000000000000..2f5e51f9082d60
--- /dev/null
+++ b/files/ja/web/api/scrolltimeline/scrolltimeline/index.md
@@ -0,0 +1,59 @@
+---
+title: "ScrollTimeline: ScrollTimeline() コンストラクター"
+short-title: ScrollTimeline()
+slug: Web/API/ScrollTimeline/ScrollTimeline
+l10n:
+ sourceCommit: 7eaac8008ebe00417314379fab2285df23322e73
+---
+
+{{APIRef("History API")}}{{SeeCompatTable}}
+
+**`ScrollTimeline()`** コンストラクターは新しい {{domxref("ScrollTimeline")}} オブジェクトインスタンスを作成します。
+
+## 構文
+
+```js-nolint
+new ScrollTimeline(options)
+```
+
+### 引数
+
+- `options`
+
+ - : 以下のプロパティを持つことができるオブジェクトです。
+
+ - `source`
+ - : スクロール位置がタイムラインの進行を駆動するスクロール可能な要素（スクローラー）を表す {{domxref("Element")}} への参照。
+ - `axis` {{optional_inline}}
+
+ - : タイムラインの進行軸を表す列挙値です。可能な値は以下の通りです。
+
+ - `"block"`: スクロールコンテナーのブロック軸にあるスクロールバーで、行内のテキストの流れに垂直な方向の軸。標準英語のような横書き方向では `"y"` と同じになり、縦書き方向では `"x"` と同じになります。
+ - `"inline"`: スクロールコンテナーのインライン軸（行のテキストの流れに並行な方向の軸）上のスクロールバー。横書き方向の場合は `"x"` と同じで、縦書き方向の場合は `"y"` と同じです。
+ - `"y"`: スクロールコンテナーの縦軸のスクロールバー。
+ - `"x"`: スクロールコンテナーの横軸のスクロールバー。
+
+ 省略した場合、`axis` は `"block"` に既定されます。
+
+### 返値
+
+新しい {{domxref("ScrollTimeline")}} オブジェクトのインスタンス。
+
+## 例
+
+例えば、メインの {{domxref("ScrollTimeline")}} ページを参照してください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ウェブアニメーション API](/ja/docs/Web/API/Web_Animations_API)
+- [CSS スクロール駆動アニメーション](/ja/docs/Web/CSS/CSS_scroll-driven_animations)
+- {{domxref("ScrollTimeline")}}
+- {{domxref("AnimationTimeline")}}, {{domxref("ViewTimeline")}}
diff --git a/files/ja/web/api/scrolltimeline/source/index.md b/files/ja/web/api/scrolltimeline/source/index.md
new file mode 100644
index 00000000000000..71dbce1297ec82
--- /dev/null
+++ b/files/ja/web/api/scrolltimeline/source/index.md
@@ -0,0 +1,34 @@
+---
+title: "ScrollTimeline: source プロパティ"
+short-title: source
+slug: Web/API/ScrollTimeline/source
+l10n:
+ sourceCommit: 34bc6ac7c5d03e5891bf94b0d4ebeccb0e7a29e5
+---
+
+{{APIRef("Web Animations")}}{{SeeCompatTable}}
+
+**`source`** は {{domxref("ScrollTimeline")}} インターフェイスの読み取り専用プロパティで、スクロール位置がタイムラインの進行、つまりアニメーションを駆動しているスクロール要素（スクローラー）への参照を返します。
+
+## 値
+
+{{domxref("Element")}} です。
+
+## 例
+
+例えば、メインの {{domxref("ScrollTimeline")}} ページを参照してください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ウェブアニメーション API](/ja/docs/Web/API/Web_Animations_API)
+- [CSS スクロール駆動アニメーション](/ja/docs/Web/CSS/CSS_scroll-driven_animations)
+- {{domxref("ScrollTimeline")}}
+- {{domxref("AnimationTimeline")}}, {{domxref("ViewTimeline")}}
diff --git a/files/ja/web/api/sensor/index.md b/files/ja/web/api/sensor/index.md
index 723176db2184b4..62c86344af5db6 100644
--- a/files/ja/web/api/sensor/index.md
+++ b/files/ja/web/api/sensor/index.md
@@ -2,14 +2,14 @@
title: Sensor
slug: Web/API/Sensor
l10n:
- sourceCommit: 6d194a9afcce7beef0082c1dc50644bd0fcda635
+ sourceCommit: 4ea748e5f025c2a00a8ca8babd7c505e73ad9def
---
-{{APIRef("Sensor API")}}
+{{securecontext_header}}{{APIRef("Sensor API")}}
-[Sensor APIs](/ja/docs/Web/API/Sensor_APIs) の **`Sensor`** インターフェイスは、ほかのすべてのセンサーインターフェイスのベースクラスです。このインターフェイスを直接使うことはできません。ですが、このインターフェイスは継承するインターフェイスがアクセスするプロパティ・イベントハンドラー・メソッドを提供します。
+**`Sensor`** は[センサー API 群](/ja/docs/Web/API/Sensor_APIs)のインターフェイスで、ほかのすべてのセンサーインターフェイスのベースクラスです。このインターフェイスを直接使うことはできません。ですが、このインターフェイスは継承するインターフェイスがアクセスするプロパティ・イベントハンドラー・メソッドを提供します。
-この機能はサーバーで設定された [Permissions Policy](/ja/docs/Web/HTTP/Permissions_Policy) によりブロックされる可能性があります。
+この機能はサーバーで設定された [権限ポリシー](/ja/docs/Web/HTTP/Permissions_Policy) によりブロックされる可能性があります。
{{InheritanceDiagram}}
diff --git a/files/ja/web/api/sensor_apis/index.md b/files/ja/web/api/sensor_apis/index.md
index 11d55aaaf72e0a..32996a4d0518fa 100644
--- a/files/ja/web/api/sensor_apis/index.md
+++ b/files/ja/web/api/sensor_apis/index.md
@@ -1,23 +1,23 @@
---
-title: Sensor APIs
+title: センサー API 群
slug: Web/API/Sensor_APIs
l10n:
sourceCommit: 8899f400df312bb5d49ef426173c19f3922029b4
---
-{{DefaultAPISidebar("Sensor API")}}
+{{securecontext_header}}{{DefaultAPISidebar("Sensor API")}}
-**Sensor APIs** は、デバイスのセンサーを一貫した形でウェブプラットフォームから利用可能にする、共通の設計で作られたインターフェイスの集合です。
+**センサー API 群** (Sensor APIs) は、端末のセンサー群を一貫した形でウェブプラットフォームから利用可能にする、共通の設計で作られたインターフェイスの集合です。
-## Sensor APIs の概念と使用法
+## 概念と使用法
-Generic Sensor API の仕様では {{domxref('Sensor')}} インターフェイスが定義されていますが、ウェブ開発者がこれを用いることはないでしょう。かわりに、特定の種類のセンサーからデータを取得するために、そのサブクラスを用いることになります。たとえば、{{domxref('Accelerometer')}} インターフェイスは取得時にデバイスの 3 軸それぞれにかかっている加速度を返します。
+一般センサー API (Generic Sensor API) の仕様では {{domxref('Sensor')}} インターフェイスが定義されていますが、ウェブ開発者がこれを用いることはないでしょう。かわりに、特定の種類のセンサーからデータを取得するために、そのサブクラスを用いることになります。たとえば、{{domxref('Accelerometer')}} インターフェイスは取得時に端末の 3 軸それぞれにかかっている加速度を返します。
-センサーは、デバイスの物理的なセンサーに完全に対応していることも、対応していないこともあります。たとえば、{{domxref('Gyroscope')}} インターフェイスはデバイスの物理的なインターフェイスに完全に対応しています。一方、{{domxref('AbsoluteOrientationSensor')}} インターフェイスは 2 個以上のデバイスセンサーの情報をアルゴリズムにより組み合わせた情報を提供します。これらのセンサーの種類は、それぞれ _低レベル_ および _高レベル_ と呼ばれます。後者の種類のセンサーは、フュージョンセンサー (または、仮想センサー、合成センサー) とも呼ばれます。
+センサーは、端末の物理的なセンサーに完全に対応していることも、対応していないこともあります。たとえば、{{domxref('Gyroscope')}} インターフェイスは端末の物理的なインターフェイスに完全に対応しています。一方、{{domxref('AbsoluteOrientationSensor')}} インターフェイスは 2 個以上の端末センサーの情報をアルゴリズムにより組み合わせた情報を提供します。これらのセンサーの種類は、それぞれ _低レベル_ および _高レベル_ と呼ばれます。後者の種類のセンサーは、フュージョンセンサー (または、仮想センサー、合成センサー) とも呼ばれます。
### 機能の検出
-センサーインターフェイスは、対応するデバイスセンサーのプロキシーでしかありません。そのため、センサーの機能の検出は他の API より複雑になります。センサー API が存在するからといって、API が実際のハードウェアセンサーに接続されているか、センサーが動作するか、センサーの接続が維持されているか、ユーザーがセンサーへのアクセスを許可したかはわかりません。これらすべての情報を常に利用可能にしておくことは、パフォーマンスと電池の持ちに負担をかけます。
+センサーインターフェイスは、対応する端末センサーのプロキシーでしかありません。そのため、センサーの機能の検出は他の API より複雑になります。センサー API が存在するからといって、API が実際のハードウェアセンサーに接続されているか、センサーが動作するか、センサーの接続が維持されているか、ユーザーがセンサーへのアクセスを許可したかはわかりません。これらすべての情報を常に利用可能にしておくと、パフォーマンスと電池の持ちに負担をかけます。
そのため、センサー API の機能を検出するには、API そのものを検出した上で、[防衛的プログラミングの戦略 (後述)](#防衛的プログラミング) をとらなければいけません。
@@ -45,9 +45,9 @@ if (window.AmbientLightSensor) {
- 使用時に投げられるエラーを監視する。
- エラーをきれいに処理し、ユーザー体験が損なわれず拡充されるようにする。
-以下のコード例で、これらの原則を説明します。{{jsxref('statements/try...catch', 'try...catch')}} ブロックにより、センサーの生成時に投げられるエラーをキャッチします。{{domxref('Sensor.error_event', 'error')}} イベントを監視することで、使用時に投げられるエラーをキャッチします。ユーザーに何かが提示されるのは、[許可](/ja/docs/Web/API/Permissions_API)の要求が必要なときと、デバイスがこのセンサーの種類に対応していないときだけです。
+以下のコード例で、これらの原則を説明します。{{jsxref('statements/try...catch', 'try...catch')}} ブロックにより、センサーの生成時に投げられるエラーをキャッチします。{{domxref('Sensor.error_event', 'error')}} イベントを監視することで、使用時に投げられるエラーをキャッチします。ユーザーに何かが提示されるのは、[許可](/ja/docs/Web/API/Permissions_API)の要求が必要なときと、端末がこのセンサーの種類に対応していないときだけです。
-さらに、この機能はサーバーで設定された [Permissions Policy](/ja/docs/Web/HTTP/Permissions_Policy) によりブロックされる可能性があります。
+さらに、この機能はサーバーで設定された [権限ポリシー](/ja/docs/Web/HTTP/Permissions_Policy) によりブロックされる可能性があります。
```js
let accelerometer = null;
@@ -80,7 +80,7 @@ try {
### 許可と Permissions Policy
-センサーの計測値は、[Permissions API](/ja/docs/Web/API/Permissions_API) によりユーザーが特定のセンサーの種類を用いる許可を与え、かつサーバーの {{httpheader('Permissions-Policy')}} でブロックされていない場合のみ参照できます。
+センサーの計測値は、[権限 API](/ja/docs/Web/API/Permissions_API) によりユーザーが特定のセンサーの種類を用いる許可を与え、かつサーバーの {{httpheader('Permissions-Policy')}} でブロックされていない場合のみ参照できます。
以下の例では、センサーを使用しようとする前にユーザーに許可を要求する方法を示します。
@@ -120,7 +120,7 @@ sensor.addEventListener("error", (error) => {
### 計測値
-センサーの計測値は、すべてのセンサーの種類で継承されている {{domxref('Sensor.reading_event', 'reading')}} イベントコールバックを通じて取得できます。取得の頻度はセンサーのコンストラクターに渡すオプションで使用者が設定します。このオプションは、1 秒あたり何回取得するかを表す数値です。整数または小数を使用することができ、小数は 1 秒に 1 回未満の頻度を設定するとき用います。実際の取得頻度はデバイスのハードウェアに依存し、設定より少なくなる可能性があります。
+センサーの計測値は、すべてのセンサーの種類で継承されている {{domxref('Sensor.reading_event', 'reading')}} イベントコールバックを通じて取得できます。取得の頻度はセンサーのコンストラクターに渡すオプションで使用者が設定します。このオプションは、1 秒あたり何回取得するかを表す数値です。整数または小数を使用することができ、小数は 1 秒に 1 回未満の頻度を設定するとき用います。実際の取得頻度は端末のハードウェアに依存し、設定より少なくなる可能性があります。
以下の例では、{{domxref('Magnetometer')}} センサーを用いてこれを説明します。
@@ -140,27 +140,27 @@ magSensor.start();
## インターフェイス
-- {{domxref('AbsoluteOrientationSensor')}} {{securecontext_inline}}
- - : 地球の参照用座標系に対するデバイスの物理的な向きを表します。
-- {{domxref('Accelerometer')}} {{securecontext_inline}}
- - : デバイスの 3 軸それぞれにかかっている加速度を提供します。
-- {{domxref('AmbientLightSensor')}} {{securecontext_inline}}
- - : 現在の光レベル、すなわちホストデバイスの周囲の環境光の照度を返します。
-- {{domxref('GravitySensor')}} {{securecontext_inline}}
- - : デバイスの 3 軸それぞれにかかっている重力を提供します。
-- {{domxref('Gyroscope')}} {{securecontext_inline}}
- - : デバイスの 3 軸それぞれの角速度を提供します。
-- {{domxref('LinearAccelerationSensor')}} {{securecontext_inline}}
- - : デバイスの 3 軸それぞれにかかっている加速度を、重力の影響を除いて提供します。
-- {{domxref('Magnetometer')}} {{securecontext_inline}}
- - : デバイスのプライマリー磁気センサーで検出される磁場の情報を提供します。
-- {{domxref('OrientationSensor')}} {{securecontext_inline}}
+- {{domxref('AbsoluteOrientationSensor')}}
+ - : 地球の参照用座標系に対する端末の物理的な向きを表します。
+- {{domxref('Accelerometer')}}
+ - : 端末の 3 軸それぞれにかかっている加速度を提供します。
+- {{domxref('AmbientLightSensor')}}
+ - : 現在の光レベル、すなわちホスト端末の周囲の環境光の照度を返します。
+- {{domxref('GravitySensor')}}
+ - : 端末の 3 軸それぞれにかかっている重力を提供します。
+- {{domxref('Gyroscope')}}
+ - : 端末の 3 軸それぞれの角速度を提供します。
+- {{domxref('LinearAccelerationSensor')}}
+ - : 端末の 3 軸それぞれにかかっている加速度を、重力の影響を除いて提供します。
+- {{domxref('Magnetometer')}}
+ - : 端末のプライマリー磁気センサーで検出される磁場の情報を提供します。
+- {{domxref('OrientationSensor')}}
- : {{domxref('AbsoluteOrientationSensor')}} のベースクラスです。このインターフェイスを直接用いることはできませんが、継承するインターフェイスがアクセスするプロパティとメソッドを提供します。
-- {{domxref('RelativeOrientationSensor')}} {{securecontext_inline}}
- - : 地球の参照用座標系は考慮せず、デバイスの物理的な向きを表します。
-- {{domxref('Sensor')}} {{securecontext_inline}}
+- {{domxref('RelativeOrientationSensor')}}
+ - : 地球の参照用座標系は考慮せず、端末の物理的な向きを表します。
+- {{domxref('Sensor')}}
- : 他のセンサーインターフェイスすべてのベースクラスです。このインターフェイスを直接用いることはできませんが、継承するインターフェイスがアクセスするプロパティ・イベントハンドラー・メソッドを提供します。
-- {{domxref('SensorErrorEvent')}} {{securecontext_inline}}
+- {{domxref('SensorErrorEvent')}}
- : {{domxref('Sensor')}} や関連するインターフェイスから投げられたエラーの情報を提供します。
## 仕様書
diff --git a/files/ja/web/api/serialport/index.md b/files/ja/web/api/serialport/index.md
index eafa26155bb121..301d115b7718ff 100644
--- a/files/ja/web/api/serialport/index.md
+++ b/files/ja/web/api/serialport/index.md
@@ -2,12 +2,12 @@
title: SerialPort
slug: Web/API/SerialPort
l10n:
- sourceCommit: f7fe5c73572eb10466583d275c20cd6e55867455
+ sourceCommit: c29cee3dcb0d0e66093dd0c18aa82e0eab9d6d14
---
-{{securecontext_header}}{{APIRef("Serial API")}}{{SeeCompatTable}}
+{{securecontext_header}}{{APIRef("Web Serial API")}}{{SeeCompatTable}}{{AvailableInWorkers("window_and_dedicated")}}
-{{domxref("Web_Serial_API", "Web Serial API")}} の `SerialPort` インターフェイスは、ホストデバイスのシリアルポートへのアクセスを提供します。
+`SerialPort` は [ウェブシリアル API](/ja/docs/Web/API/Web_Serial_API) のインターフェイスで、ホスト機器のシリアルポートへのアクセスを提供します。
{{InheritanceDiagram}}
@@ -48,7 +48,7 @@ l10n:
### ポートを開く
-シリアルポートで通信を行う前に、ポートを開く必要があります。ポートを開くことで、サイトはデータがどのように送受信されるかを決めるために必要なパラメータを設定できます。開発者は、適切なパラメータを決めるために接続するデバイスのドキュメントを参照するべきです。
+シリアルポートで通信を行う前に、ポートを開く必要があります。ポートを開くことで、サイトはデータがどのように送受信されるかを決めるために必要なパラメーターを設定できます。開発者は、適切なパラメーターを決めるために接続するデバイスのドキュメントを参照するべきです。
```js
await port.open({ baudRate: 9600 /* ボーレートを決める */ });
diff --git a/files/ja/web/api/serialport/open/index.md b/files/ja/web/api/serialport/open/index.md
index 3b73e9192df462..6d3fb832584715 100644
--- a/files/ja/web/api/serialport/open/index.md
+++ b/files/ja/web/api/serialport/open/index.md
@@ -1,13 +1,14 @@
---
-title: SerialPort.open()
+title: "SerialPort: open() メソッド"
+short-title: open()
slug: Web/API/SerialPort/open
l10n:
- sourceCommit: de73dc7280b2b84ce58d2a93b241bd8a93e8096d
+ sourceCommit: 2de8605cc697ca93b02f0b7109082b694f8950ec
---
-{{SecureContext_Header}}{{APIRef("Serial API")}}{{SeeCompatTable}}
+{{SecureContext_Header}}{{APIRef("Web Serial API")}}{{SeeCompatTable}}{{AvailableInWorkers("window_and_dedicated")}}
-{{domxref("SerialPort")}} インターフェイスの **`open()`** メソッドは、ポートを開く処理が完了したら解決する {{jsxref("Promise")}} を返します。デフォルトでは、ポートは 8 ビットのデータ、1 ビットのストップビット、パリティチェックなしで開かれます。パラメータ `baudRate` は必須です。
+**`open()`** は {{domxref("SerialPort")}} インターフェイスのメソッドで、ポートを開く処理が完了したら解決する {{jsxref("Promise")}} を返します。既定では、ポートは 8 ビットのデータ、1 ビットのストップビット、パリティチェックなしで開かれます。`baudRate` 引数は必須です。
## 構文
@@ -24,15 +25,15 @@ open(options)
- `baudRate`
- : シリアル通信を確立するボーレートを表す正の値です。
- `bufferSize` {{Optional_Inline}}
- - : 確保する送信用と受信用のバッファーのサイズを表す `unsigned long` の整数です。指定されない場合のデフォルト値は 255 です。
+ - : 確保する送信用と受信用のバッファーのサイズを表す `unsigned long` の整数です。指定されない場合の既定値は 255 です。
- `dataBits` {{Optional_Inline}}
- - : 1 フレームのデータビット数を表す、7 または 8 の整数です。指定されない場合のデフォルト値は 8 です。
+ - : 1 フレームのデータビット数を表す、7 または 8 の整数です。指定されない場合の既定値は 8 です。
- `flowControl` {{Optional_Inline}}
- - : `"none"` または `"hardware"` のいずれかで、フロー制御の種類を表します。デフォルト値は `"none"` です。
+ - : `"none"` または `"hardware"` のいずれかで、フロー制御の種類を表します。既定値は `"none"` です。
- `parity` {{Optional_Inline}}
- - : `"none"`, `"even"`, `"odd"` のいずれかで、パリティの種類を表します。デフォルト値は `"none"` です。
+ - : `"none"`, `"even"`, `"odd"` のいずれかで、パリティの種類を表します。既定値は `"none"` です。
- `stopBits` {{Optional_Inline}}
- - : フレームの最後のストップビットの数を表す、1 または 2の整数です。指定されない場合のデフォルト値は 1 です。
+ - : フレームの最後のストップビットの数を表す、1 または 2の整数です。指定されない場合の既定値は 1 です。
### 返値
@@ -47,7 +48,7 @@ open(options)
## 例
-シリアルポートで通信を行う前に、ポートを開く必要があります。ポートを開くことで、サイトはデータがどのように送受信されるかを決めるために必要なパラメータを設定できます。開発者は、適切なパラメータを決めるために接続するデバイスのドキュメントを参照するべきです。
+シリアルポートで通信を行う前に、ポートを開く必要があります。ポートを開くことで、サイトはデータがどのように送受信されるかを決めるために必要なパラメーターを設定できます。開発者は、適切なパラメーターを決めるために接続するデバイスのドキュメントを参照するべきです。
```js
await port.open({ baudRate: 9600 /* ボーレートを決める */ });
diff --git a/files/ja/web/api/server-sent_events/using_server-sent_events/index.md b/files/ja/web/api/server-sent_events/using_server-sent_events/index.md
index 37c5188b3893f7..ca592c9ffbf227 100644
--- a/files/ja/web/api/server-sent_events/using_server-sent_events/index.md
+++ b/files/ja/web/api/server-sent_events/using_server-sent_events/index.md
@@ -1,15 +1,21 @@
---
title: サーバー送信イベントの使用
slug: Web/API/Server-sent_events/Using_server-sent_events
+l10n:
+ sourceCommit: 4f35a8237ee0842beb9cfef3354e05464ad7ce1a
---
{{DefaultAPISidebar("Server Sent Events")}}
[サーバー送信イベント](/ja/docs/Web/API/Server-sent_events) (Server-Sent Events) を使用するウェブアプリケーションの開発は簡単です。サーバー上でフロントエンドへイベントを流すために必要になるコードはわずかですが、クライアント側のコードは[ウェブソケット](/ja/docs/Web/API/WebSockets_API)で入ってくるイベントを扱う部分とほぼ同じ動作をします。これは単方向の接続ですので、クライアントからサーバーへイベントを送信することはできません。
-## サーバからのイベントの受信
+## サーバーからのイベントの受信
-サーバー送信イベント API は {{domxref("EventSource")}} インターフェイスに含まれています。イベントを受け取るためにサーバへの接続を開始するには、新たな `EventSource` オブジェクトを作成し、イベントを生成するスクリプトの URI を指定します。例を挙げます。
+サーバー送信イベント API は {{domxref("EventSource")}} インターフェイスに含まれています。
+
+### `EventSource` インスタンスの作成
+
+イベントを受け取るためにサーバーへの接続を開始するには、新たな `EventSource` オブジェクトを作成し、イベントを生成するスクリプトの URI を指定します。例を挙げます。
```js
const evtSource = new EventSource("ssedemo.php");
@@ -23,37 +29,41 @@ const evtSource = new EventSource("//api.example.com/ssedemo.php", {
});
```
+### `message` イベントの待ち受け
+
イベントソースのインスタンスを起動したら、 {{domxref("EventSource.message_event", "message")}} イベントのハンドラーを取り付けて、サーバーからのメッセージを待ち受けすることができます。
```js
-evtSource.onmessage = function (event) {
+evtSource.onmessage = (event) => {
const newElement = document.createElement("li");
const eventList = document.getElementById("list");
- newElement.textContent = "message: " + event.data;
+ newElement.textContent = `message: ${event.data}`;
eventList.appendChild(newElement);
};
```
-このコードは入力メッセージ（すなわち `event` フィールドを持たない、サーバーからの通知）を受信して、メッセージのテキストを文書の HTML にあるリストへ追加します。
+このコードは入力メッセージを受信して、メッセージのテキストを文書の HTML にあるリストへ追加します。
-`addEventListener()` を使用してイベントを待ち受けすることもできます。
+### カスタムイベントの待ち受け
+
+`event` フィールドが定義されているサーバーからのメッセージは、`event` で指定された名前のイベントとして受信されます。例を示します。
```js
-evtSource.addEventListener("ping", function (event) {
+evtSource.addEventListener("ping", (event) => {
const newElement = document.createElement("li");
const eventList = document.getElementById("list");
const time = JSON.parse(event.data).time;
- newElement.textContent = "ping at " + time;
+ newElement.textContent = `ping at ${time}`;
eventList.appendChild(newElement);
});
```
-前のコードと似ていますが、`event` フィールドに "ping" が設定されたメッセージがサーバーから送られたときに、自動的に呼び出されることが異なります。こちらは `data` フィールドの JSON を解釈して、情報を出力します。
+このコードは、サーバーが `event` フィールドを `ping` に設定したメッセージを送信するたびに呼び出されます。こちらは `data` フィールドの JSON を解釈して、情報を出力します。
-> **警告:** **HTTP/2 上で使用されていない**場合、 SSE は開くことができる接続の最大数に制限を受けます。この制限は*ブラウザー単位*で設定されており、非常に小さい数 (6) に設定されているため、複数のタブを開くと特に痛みを伴う場合があります。この問題は、 [Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=275955) と [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=906896) で「修正予定なし」と示されています。この制限はブラウザー + ドメインごとに設定されており、`www.example1.com` への SSE 接続をすべてのタブで 6 つ、 `www.example2.com` への SSE 接続をさらに 6 つ開くことができることを意味します（[Stackoverflow](https://stackoverflow.com/questions/5195452/websockets-vs-server-sent-events-eventsource/5326159) によれば）。 HTTP/2 を使用する場合、同時に使用することができる *HTTP ストリーム*の最大数は、サーバーとクライアントの間で交渉が行われます（既定値は 100 です）。
+> **警告:** **HTTP/2 上で使用されていない**場合、 SSE は開くことができる接続の最大数に制限を受けます。この制限は*ブラウザー単位*で設定されており、非常に小さい数 (6) に設定されているため、複数のタブを開くと特に痛みを伴う場合があります。この問題は、 [Chrome](https://crbug.com/275955) と [Firefox](https://bugzil.la/906896) で「修正予定なし」と示されています。この制限はブラウザー + ドメインごとに設定されており、`www.example1.com` への SSE 接続をすべてのタブで 6 つ、 `www.example2.com` への SSE 接続をさらに 6 つ開くことができることを意味します（[Stackoverflow](https://stackoverflow.com/questions/5195452/websockets-vs-server-sent-events-eventsource/5326159) によれば）。 HTTP/2 を使用する場合、同時に使用することができる *HTTP ストリーム*の最大数は、サーバーとクライアントの間で交渉が行われます（既定値は 100 です）。
-## サーバからのイベントの送信
+## サーバーからのイベントの送信
イベントを送信するサーバー側のスクリプトは、 MIME タイプ `text/event-stream` で応答する必要があります。個々の通知は、 2 つの改行で終わるテキストのブロックとして送信されます。イベントストリームの形式について、詳しくは[イベントストリーム形式](#イベントストリーム形式)をご覧ください。
@@ -61,8 +71,9 @@ evtSource.addEventListener("ping", function (event) {
```php
date_default_timezone_set("America/New_York");
-header("Cache-Control: no-store");
+header("X-Accel-Buffering: no");
header("Content-Type: text/event-stream");
+header("Cache-Control: no-cache");
$counter = rand(1, 10);
while (true) {
@@ -82,12 +93,14 @@ while (true) {
$counter = rand(1, 10);
}
+ if (ob_get_contents()) {
ob_end_flush();
+ }
flush();
// クライアントが接続を中止したら（ページを閉じたら）ループから抜ける
- if ( connection_aborted() ) break;
+ if (connection_aborted()) break;
sleep(1);
}
@@ -97,14 +110,14 @@ while (true) {
ループは接続状態にかかわらず実行し続けられますので、接続が閉じられたとき（例えばクライアントがページを閉じたとき）にループから脱出するためのチェックが含まれています。
> [!NOTE]
-> この記事にあるコードを使用した完全な例が GitHub にあります。 [Simple SSE demo using PHP](https://github.com/mdn/dom-examples/tree/master/server-sent-events) を参照してください。
+> この記事にあるコードを使用した完全な例が GitHub にあります。 [Simple SSE demo using PHP](https://github.com/mdn/dom-examples/tree/main/server-sent-events) を参照してください。
## エラー処理
問題が発生した場合（ネットワークのタイムアウトや[アクセス制御](/ja/docs/Web/HTTP/CORS)に関する問題など）は、エラーイベントが生成されます。これをプログラムで処理するには、 `onerror` コールバックを `EventSource` に実装してください。
```js
-evtSource.onerror = function (err) {
+evtSource.onerror = (err) => {
console.error("EventSource failed:", err);
};
```
@@ -135,7 +148,7 @@ evtSource.close();
- `data`
- : メッセージのデータフィールドです。 `EventSource` が `data:` で始まる、複数の連続した行を受け取ったときは、[それらを連結して](https://html.spec.whatwg.org/multipage/#dispatchMessage)各項目の間に改行文字を挿入します。末尾の改行は取り除かれます。
- `id`
- - : [`EventSource`](/ja/docs/Server-sent_events/EventSource) オブジェクトの最後のイベント ID の値に設定するイベント ID です。
+ - : [`EventSource`](/ja/docs/Web/API/EventSource) オブジェクトの最後のイベント ID の値に設定するイベント ID です。
- `retry`
- : 再接続時間です。サーバーへの接続が切れた場合、ブラウザーは指定した時間だけ待ってから再接続を試みます。これは整数値でなければならず、再接続時間をミリ秒単位で指定します。整数値以外が指定された場合は、このフィールドは無視されます。
diff --git a/files/ja/web/api/service_worker_api/index.md b/files/ja/web/api/service_worker_api/index.md
index e7f647c44c201a..535b4746991482 100644
--- a/files/ja/web/api/service_worker_api/index.md
+++ b/files/ja/web/api/service_worker_api/index.md
@@ -2,10 +2,10 @@
title: サービスワーカー API
slug: Web/API/Service_Worker_API
l10n:
- sourceCommit: 58af4d9f65d5cef3ea6b212aaf6644bd7f00ab62
+ sourceCommit: 4f35a8237ee0842beb9cfef3354e05464ad7ce1a
---
-{{DefaultAPISidebar("Service Workers API")}}
+{{DefaultAPISidebar("Service Workers API")}}{{AvailableInWorkers}}
サービスワーカーは、基本的にウェブアプリケーション、ブラウザー、そして（もし繋がっていれば）ネットワークの間に介在するプロキシサーバーのように振る舞います。これは、よりよいオフラインの操作性を可能にするように意図されており、ネットワークのリクエストに介在してネットワークの使用可否の状況に基づいて適切な対応を取ったり、サーバー上にある資産を更新したりします。また、プッシュ通知やバックグラウンド同期の API 群へのアクセスもできるようになります。
@@ -21,7 +21,7 @@ l10n:
サービスワーカーはセキュリティ上の理由から、 HTTPS 通信でのみ動作します。最も重要なことは、HTTP 接続は{{Glossary("MitM", "中間者")}}攻撃による悪意のあるコード注入の影響を受けやすく、こうした強力な API へのアクセスを許可されると、その攻撃はより悪いものになる可能性があるということです。Firefox では[プライベートブラウジングモード](https://support.mozilla.org/ja/kb/private-browsing-use-firefox-without-history)でサービスワーカー API を利用することはできません。
> [!NOTE]
-> Firefox では、テストのためにサービスワーカーを HTTP (安全ではない) 上で実行することができます。これは、 **HTTP による サービスワーカー を有効化 (ツールボックスを開いたとき)** オプションを Firefox Devtools 設定メニューでチェックするだけです。
+> Firefox では、テストのためにサービスワーカーを HTTP (安全ではない) 上で実行することができます。これは、 **HTTP によるサービスワーカーを有効化 (ツールボックスを開いたとき)** オプションを Firefox Devtools 設定メニューでチェックするだけです。
> [!NOTE]
> サービスワーカーは [AppCache](https://alistapart.com/article/application-cache-is-a-douchebag/) のような、この分野における以前の試みより勝っています。以前のものは、あなたがしようとしていることを想定していなかったり、想定が正しくなかったときに壊れたりしていたのに対して、サービスワーカーはあなたがすべてを細かく制御することができるためです。
@@ -64,17 +64,24 @@ l10n:
最初の基本的な例をどのように構築するかについての完全なチュートリアルは、[サービスワーカーの使用](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers)を読んでください。
+### 静的ルーティングを使用して、リソースの取得方法を制御
+
+サービスワーカーは、不要なパフォーマンスコストが発生する可能性があります。しばらくぶりにページが初めて読み込まれる場合、ブラウザはサービスワーカーが起動して実行されるのを待たなければ、どのコンテンツを読み込むべきか、また、キャッシュまたはネットワークのどちらから取得すべきかを判断できません。
+
+特定のコンテンツがどこから取得されるべきか事前に分かっている場合は、サービスワーカーを完全にバイパスして、リソースを即座に取得することができます。{{domxref("InstallEvent.addRoutes()")}} メソッドは、この使用事例やその他の実装にも使用できます。
+
## その他の使用例
サービスワーカーは次のような用途も想定しています。
-- バックグラウンドのデータ同期
-- 他のオリジンからのリソースのリクエストに対する応答
-- 位置情報やジャイロスコープのような計算コストの高いデータの更新を集中的に受信して、複数のページがデータの一部を利用できるようにすること
-- CoffeeScript, less, CJS/AMD モジュールなどの開発用途で、クライアント側のコンパイルや依存性管理
-- バックグラウンドサービスのフック
-- 特定の URL パターンに基づくテンプレートカスタマイズ
-- パフォーマンスの改善、例えばユーザーが近く必要とするであろう、写真アルバムの次の数枚の写真などの先読み
+- バックグラウンドのデータ同期。
+- 他のオリジンからのリソースのリクエストに対する応答。
+- 位置情報やジャイロスコープのような計算コストの高いデータの更新を集中的に受信して、複数のページがデータの一部を利用できるようにすること。
+- CoffeeScript, less, CJS/AMD モジュールなどの開発用途で、クライアント側のコンパイルや依存性管理。
+- バックグラウンドサービスのフック。
+- 特定の URL パターンに基づくテンプレートカスタマイズ。
+- パフォーマンスの向上、例えば、ユーザーが次に必要とする可能性が高いリソース（例えば、フォトアルバムの次の数枚の写真）を事前に取得するなど。
+- API のモックアップ。
近い将来、サービスワーカーはネイティブアプリで実現できることに近い、その他いくつもの便利なことを、ウェブプラットフォーム上でも実現する事ができるようになるでしょう。興味深いことに、次のような他の仕様書でも、サービスワーカーのコンテキストを利用できるようになってきています。
@@ -90,7 +97,7 @@ l10n:
- {{DOMxRef("CacheStorage")}}
- : {{DOMxRef("Cache")}} オブジェクトのストレージです。これは {{DOMxRef("ServiceWorker")}} がアクセスできるすべての名前付きキャッシュのへの目録を提供し、文字列の名前から対応する {{DOMxRef("Cache")}} へのマップを保持します。
- {{DOMxRef("Client")}}
- - : サービスワーカークライアントのスコープを表します。サービスワーカークライアントは、ブラウザーコンテキスト内の文書または {{DOMxRef("SharedWorker")}} であり、アクティブワーカーによって制御されています。
+ - : サービスワーカークライアントのスコープを表します。サービスワーカークライアントは、閲覧コンテキスト内の文書または {{DOMxRef("SharedWorker")}} であり、アクティブワーカーによって制御されています。
- {{DOMxRef("Clients")}}
- : {{DOMxRef("Client")}} オブジェクトのリストのためのコンテナーであり、現在のオリジンにある有効化されたサービスワーカークライアントにアクセスする主な方法です。
- {{DOMxRef("ExtendableEvent")}}
@@ -99,30 +106,27 @@ l10n:
- : サービスワーカーで発生する {{domxref("ServiceWorkerGlobalScope/message_event", "message")}} イベントのイベントオブジェクト（別のコンテキストから {{DOMxRef("ServiceWorkerGlobalScope")}} でチャンネルメッセージを受信した時）の有効期限を延長します。
- {{DOMxRef("FetchEvent")}}
- : ハンドラー {{DOMxRef("ServiceWorkerGlobalScope.fetch_event", "onfetch")}} に渡される引数、 `FetchEvent` は {{DOMxRef("ServiceWorkerGlobalScope")}} で配信される読み取りアクションを表現しています。これは、リクエストと結果のレスポンスに関する情報を含み、{{DOMxRef("FetchEvent.respondWith", "FetchEvent.respondWith()")}} メソッドを提供して、制御されたページに任意のレスポンスを返すことができます。
-- {{DOMxRef("InstallEvent")}} {{Deprecated_Inline}} {{Non-standard_Inline}}
- - : {{DOMxRef("ServiceWorkerGlobalScope.install_event", "oninstall")}} ハンドラーに渡される引数で、 `InstallEvent` インターフェースは {{DOMxRef("ServiceWorker")}} の {{DOMxRef("ServiceWorkerGlobalScope")}} に配信されるインストールアクションを表現します。 {{DOMxRef("ExtendableEvent")}} の子として、{{DOMxRef("FetchEvent")}} のような機能イベントがインストール中に配信されないことを保証しています。
+- {{DOMxRef("InstallEvent")}}
+ - : {{DOMxRef("ServiceWorkerGlobalScope.install_event", "oninstall")}} ハンドラーに渡される引数で、 `InstallEvent` インターフェイスは {{DOMxRef("ServiceWorker")}} の {{DOMxRef("ServiceWorkerGlobalScope")}} に配信されるインストールアクションを表現します。 {{DOMxRef("ExtendableEvent")}} の子として、{{DOMxRef("FetchEvent")}} のような機能イベントがインストール中に配信されないことを保証しています。
- {{DOMxRef("NavigationPreloadManager")}}
- : サービスワーカーによるリソースの先読みを管理するためのメソッドを提供します。
-- {{DOMxRef("Navigator.serviceWorker")}}
- - : {{DOMxRef("ServiceWorker")}} オブジェクトを返します。これにより、[関連ドキュメント](https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window)に対する登録、削除、アップグレード、通信へのアクセスを提供します。
-- {{DOMxRef("NotificationEvent")}}
- - : {{DOMxRef("ServiceWorkerGlobalScope.notificationclick_event", "onnotificationclick")}} ハンドラーに渡される引数で、`NotificationEvent` インターフェースは {{DOMxRef("ServiceWorker")}} で通知クリックイベントを表現します。
- {{DOMxRef("ServiceWorker")}}
- : サービスワーカーを表します。複数の閲覧コンテキスト（例：ページ、ワーカーなど）を同じ `ServiceWorker` オブジェクトに関連付けることができます。
- {{DOMxRef("ServiceWorkerContainer")}}
- : サービスワーカーの登録、登録解除、更新、サービスワーカーとその登録の状態へのアクセスなどの機能を含む、ネットワークエコシステムの全体ユニットとしてのサービスワーカーを表すオブジェクトを提供します。
- {{DOMxRef("ServiceWorkerGlobalScope")}}
- : サービスワーカーのグローバル実行コンテキストを表します。
-- {{DOMxRef("MessageEvent")}}
- - : {{DOMxRef("ServiceWorkerGlobalScope")}} に送られるメッセージを表します。
- {{DOMxRef("ServiceWorkerRegistration")}}
- : サービスワーカーの登録を表します。
-- {{DOMxRef("SyncEvent")}} {{Experimental_Inline}}
- - : SyncEvent インターフェイスはサービスワーカーの {{DOMxRef("ServiceWorkerGlobalScope")}} で配信された同期アクションを表します。
-- {{DOMxRef("SyncManager")}} {{Experimental_Inline}}
- - : 同期登録を登録、およびリストするためのインターフェイスを提供します。
- {{DOMxRef("WindowClient")}}
- - : アクティブなワーカーによって制御されるブラウザーコンテキスト内の文書であるサービスワーカークライアントのスコープを表します。
+ - : アクティブなワーカーによって制御される閲覧コンテキスト内の文書であるサービスワーカークライアントのスコープを表します。これは特別な種類の {{DOMxRef("Client")}} オブジェクトで、いくつかの追加メソッドとプロパティが利用可能です。
+
+### 他のインターフェイスへの拡張
+
+- {{DOMxRef("Window.caches")}} and {{domxref("WorkerGlobalScope.caches")}}
+ - : 現在のkンテキストに関連付けられた {{domxref("CacheStorage")}} オブジェクトです。
+- {{DOMxRef("Navigator.serviceWorker")}} および {{DOMxRef("WorkerNavigator.serviceWorker")}}
+ - : {{DOMxRef("ServiceWorkerContainer")}} オブジェクトを返します。このオブジェクトは、[関連付けられた文書](https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window)の {{DOMxRef("ServiceWorker")}} オブジェクトの登録、削除、アップグレード、通信へのアクセスを提供します。
## 仕様書
@@ -130,8 +134,15 @@ l10n:
## 関連情報
-- [ServiceWorker Cookbook](https://github.com/mdn/serviceworker-cookbook) (英語)
- [サービスワーカーの使用](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- [Service Worker Lifecycle](https://web.dev/articles/service-worker-lifecycle) (英語)
- [Service workers basic code example](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker) (英語)
-- [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/) (英語)
-- {{jsxref("Promise")}}
+- サービスワーカー APIに関連する Web API:
+ - {{domxref("Background Fetch API", "バックグラウンドフェッチ API", "", "nocode")}}
+ - {{domxref("Background Synchronization API", "バックグラウンド同期 API", "", "nocode")}}
+ - {{domxref("Content Index API", "コンテンツインデックス API", "", "nocode")}}
+ - {{domxref("Cookie Store API", "クッキーストア API", "", "nocode")}}
+ - {{domxref("Notifications API", "通知 API", "", "nocode")}}
+ - {{domxref("Payment Handler API", "決済ハンドラー API", "", "nocode")}}
+ - {{domxref("Push API", "プッシュ API", "", "nocode")}}
+ - {{domxref("Web Periodic Background Synchronization API", "ウェブ定期バックグラウンド同意 API", "", "nocode")}}
diff --git a/files/ja/web/api/service_worker_api/using_service_workers/index.md b/files/ja/web/api/service_worker_api/using_service_workers/index.md
index 8beec5751e8403..6821cf709af549 100644
--- a/files/ja/web/api/service_worker_api/using_service_workers/index.md
+++ b/files/ja/web/api/service_worker_api/using_service_workers/index.md
@@ -2,7 +2,7 @@
title: サービスワーカーの使用
slug: Web/API/Service_Worker_API/Using_Service_Workers
l10n:
- sourceCommit: ac3a9701390bedd2544895fda96fd0be488e4fad
+ sourceCommit: 4f35a8237ee0842beb9cfef3354e05464ad7ce1a
---
{{DefaultAPISidebar("Service Workers API")}}
@@ -97,12 +97,12 @@ registerServiceWorker();
次の可能性が考えられます。
- HTTPS を使用してアプリケーションを実行していない。
-- サービスワーカーファイルへのパスが正しく書かれていない。 — アプリのルートディレクトリではなく、アプリのオリジンからの相対パスで書く必要があります。上記の例では、ワーカーが `https://bncb2v.csb.app/sw.js` にあり、アプリのルートは `https://bncb2v.csb.app/` です。しかし、パスは `/sw.js` と書く必要があります。
+- サービスワーカーファイルへのパスが正しく書かれていない。 — アプリのルートディレクトリーではなく、アプリのオリジンからの相対パスで書く必要があります。上記の例では、ワーカーが `https://bncb2v.csb.app/sw.js` にあり、アプリのルートは `https://bncb2v.csb.app/` です。しかし、パスは `/sw.js` と書く必要があります。
- 指定されているサービスワーカーがアプリとは異なるオリジンにある。これは許可されていません。
- サービスワーカーはサービスワーカーのスコープ内にあるクライアントからのリクエストのみを取得します。
- サービスワーカーの最大スコープは、ワーカーのある場所です。
-- サービスワーカーの最大スコープはワーカーの位置です（言い換えれば、スクリプト `sw.js` が `/js/sw.js` にある場合、 既定では `/js/` 以下の URL しか制御できません）。サービスワーカーの最大スコープのリストは [`Service-Worker-Allowed`](/ja/docs/Web/HTTP/Header/Service-Worker-Allowed) ヘッダーで指定することができます。
-- Firefoxでは、ユーザーが[プライベートブラウジングモード](https://bugzil.la/1320796)である場合、履歴が無効である場合、Firefox を閉じたときに Cookie がクリアされる場合、サービスワーカーの API は隠され使用することができません。
+- サービスワーカーの最大スコープはワーカーの位置です（言い換えれば、スクリプト `sw.js` が `/js/sw.js` にある場合、 既定では `/js/` 以下の URL しか制御できません）。サービスワーカーの最大スコープのリストは `Service-Worker-Allowed` ヘッダーで指定することができます。
+- Firefox では、ユーザーが[プライベートブラウジングモード](https://bugzil.la/1320796)である場合、履歴が無効である場合、Firefox を閉じたときに Cookie がクリアされる場合、サービスワーカーの API は隠され使用することができません。
- Chrome の場合、「すべての Cookie をブロックする（推奨しない）」オプションが有効になっていると、登録に失敗します。
### インストールとアクティブ化: キャッシュの作成
diff --git a/files/ja/web/api/serviceworkerglobalscope/activate_event/index.md b/files/ja/web/api/serviceworkerglobalscope/activate_event/index.md
index 341deeb935b846..cad9c910ab66da 100644
--- a/files/ja/web/api/serviceworkerglobalscope/activate_event/index.md
+++ b/files/ja/web/api/serviceworkerglobalscope/activate_event/index.md
@@ -1,11 +1,12 @@
---
title: "ServiceWorkerGlobalScope: activate イベント"
+short-title: activate
slug: Web/API/ServiceWorkerGlobalScope/activate_event
l10n:
- sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1
+ sourceCommit: 2ef36a6d6f380e79c88bc3a80033e1d3c4629994
---
-{{APIRef("Service Workers API")}}
+{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
**`activate`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、{{domxref("ServiceWorkerRegistration")}} が新しいアクティブワーカー（{{domxref("ServiceWorkerRegistration.active")}} worker）を取得すると発生します。
@@ -13,7 +14,7 @@ l10n:
## 構文
-このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
```js
addEventListener("activate", (event) => {});
@@ -36,7 +37,7 @@ _固有のプロパティは実装していませんが、親である {{domxref
次のスニペットは、`activate` イベントハンドラーを使用してキャッシュをアップグレードする方法を示しています。
```js
-globalScope.addEventListener("activate", (event) => {
+self.addEventListener("activate", (event) => {
const cacheAllowlist = ["v2"];
event.waitUntil(
@@ -52,7 +53,7 @@ globalScope.addEventListener("activate", (event) => {
次のように `onactivate` プロパティを使用してイベントハンドラーを設定することもできます。
```js
-globalScope.onactivate = (event) => {
+self.onactivate = (event) => {
// ...
};
```
diff --git a/files/ja/web/api/serviceworkerglobalscope/backgroundfetchabort_event/index.md b/files/ja/web/api/serviceworkerglobalscope/backgroundfetchabort_event/index.md
new file mode 100644
index 00000000000000..fffa80b278b40f
--- /dev/null
+++ b/files/ja/web/api/serviceworkerglobalscope/backgroundfetchabort_event/index.md
@@ -0,0 +1,68 @@
+---
+title: "ServiceWorkerGlobalScope: backgroundfetchabort イベント"
+short-title: backgroundfetchabort
+slug: Web/API/ServiceWorkerGlobalScope/backgroundfetchabort_event
+l10n:
+ sourceCommit: c77a11ee1509542c16b0348afc4fcb3ffe588e1c
+---
+
+{{APIRef("Background Fetch API")}}{{SeeCompatTable}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
+
+**`backgroundfetchabort`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、ユーザーまたはアプリ自体が[バックグラウンドフェッチ操作](/ja/docs/Web/API/Background_Fetch_API)をキャンセルしたときに発生します。
+
+このイベントはキャンセル不可で、バブリングしません。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("backgroundfetchabort", (event) => {});
+
+onbackgroundfetchabort = (event) => {};
+```
+
+## イベント型
+
+{{domxref("BackgroundFetchEvent")}} です。
+
+{{InheritanceDiagram("BackgroundFetchEvent")}}
+
+## イベントプロパティ
+
+_親である {{domxref("ExtendableEvent")}} から継承したプロパティがあります。_
+
+- {{domxref("BackgroundFetchEvent.registration")}}
+ - : 中止されたフェッチのための {{domxref("BackgroundFetchRegistration")}} を返します。
+
+## 解説
+
+バックグラウンドフェッチ API では、ブラウザーがユーザーに UI 要素を表示して操作の進行状況を示します。この要素により、ユーザーはフェッチをキャンセルすることもできます。アプリ自体も、{{domxref("BackgroundFetchRegistration.abort()")}} を呼び出すことでフェッチをキャンセルできます。
+
+フェッチがキャンセルされた場合、ブラウザーはフェッチを中止し、必要に応じてサービスワーカーを起動し、そのサービスワーカーのグローバルスコープで `backgroundfetchabort` イベントを発生させます。
+
+このイベントのハンドラー内で、サービスワーカーは操作に関連するデータをクリーンアップできます。また、成功したレスポンスをすべて取得して保存することもできます（例えば、{{domxref("Cache")}} API を使用して）。レスポンスデータにアクセスするために、サービスワーカーはイベントの {{domxref("BackgroundFetchEvent/registration", "registration")}} プロパティを使用します。
+
+## 例
+
+### クリーンアップ
+
+このイベントハンドラーは、中止されたフェッチに関連するデータのクリーンアップを実行することができます。
+
+```js
+addEventListener("backgroundfetchabort", (event) => {
+ // 関連するデータをクリーンアップ
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [バックグラウンドフェッチ API](/ja/docs/Web/API/Background_Fetch_API)
diff --git a/files/ja/web/api/serviceworkerglobalscope/backgroundfetchclick_event/index.md b/files/ja/web/api/serviceworkerglobalscope/backgroundfetchclick_event/index.md
new file mode 100644
index 00000000000000..57a9edaf9a5a59
--- /dev/null
+++ b/files/ja/web/api/serviceworkerglobalscope/backgroundfetchclick_event/index.md
@@ -0,0 +1,72 @@
+---
+title: "ServiceWorkerGlobalScope: backgroundfetchclick イベント"
+short-title: backgroundfetchclick
+slug: Web/API/ServiceWorkerGlobalScope/backgroundfetchclick_event
+l10n:
+ sourceCommit: c77a11ee1509542c16b0348afc4fcb3ffe588e1c
+---
+
+{{APIRef("Background Fetch API")}}{{SeeCompatTable}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
+
+**`backgroundfetchclick`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、[バックグラウンドフェッチ](/ja/docs/Web/API/Background_Fetch_API)操作の進捗状況をユーザーに表示するためにブラウザーが提供する UI をユーザーがクリックしたときに発生します。
+
+このイベントはキャンセル不可で、バブリングしません。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("backgroundfetchclick", (event) => {});
+
+onbackgroundfetchclick = (event) => {};
+```
+
+## イベント型
+
+{{domxref("BackgroundFetchEvent")}} です。
+
+{{InheritanceDiagram("BackgroundFetchEvent")}}
+
+## イベントプロパティ
+
+_親である {{domxref("ExtendableEvent")}} から継承したプロパティがあります。_
+
+- {{domxref("BackgroundFetchEvent.registration")}}
+ - : 中止されたフェッチのための {{domxref("BackgroundFetchRegistration")}} を返します。
+
+## 解説
+
+[バックグラウンドフェッチ](/ja/docs/Web/API/Background_Fetch_API)操作が開始されると、ブラウザーはユーザーに UI 要素を表示して操作の進行状況を示します。ユーザーがこの要素をクリックすると、ブラウザーは必要に応じてサービスワーカーを開始し、サービスワーカーのグローバルスコープで `backgroundfetchclick` イベントを発生させます。
+
+このような状況下でハンドラーが実行する一般的なタスクは、ユーザーにフェッチ操作の詳細情報を提供するウィンドウを開くことです。
+
+## 例
+
+### 詳細を表示するウィンドウを開く
+
+このイベントハンドラーは、グローバルな {{domxref("ServiceWorkerGlobalScope.clients", "clients")}} プロパティを使用して、フェッチに関する詳細情報をユーザーに提供するウィンドウを開きます。フェッチが完了しているか否かによって、異なるウィンドウが開きます。
+
+```js
+addEventListener("backgroundfetchclick", (event) => {
+ const registration = event.registration;
+
+ if (registration.result === "success") {
+ clients.openWindow("/play-movie");
+ } else {
+ clients.openWindow("/movie-download-progress");
+ }
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [バックグラウンドフェッチ API](/ja/docs/Web/API/Background_Fetch_API)
diff --git a/files/ja/web/api/serviceworkerglobalscope/backgroundfetchfail_event/index.md b/files/ja/web/api/serviceworkerglobalscope/backgroundfetchfail_event/index.md
new file mode 100644
index 00000000000000..586a64c04997da
--- /dev/null
+++ b/files/ja/web/api/serviceworkerglobalscope/backgroundfetchfail_event/index.md
@@ -0,0 +1,68 @@
+---
+title: "ServiceWorkerGlobalScope: backgroundfetchfail イベント"
+short-title: backgroundfetchfail
+slug: Web/API/ServiceWorkerGlobalScope/backgroundfetchfail_event
+l10n:
+ sourceCommit: c77a11ee1509542c16b0348afc4fcb3ffe588e1c
+---
+
+{{APIRef("Background Fetch API")}}{{SeeCompatTable}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
+
+**`backgroundfetchfail`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、[バックグラウンドフェッチ](/ja/docs/Web/API/Background_Fetch_API)操作が失敗した場合、つまり、フェッチ内の少なくとも 1 つのネットワークリクエストが正常に完了しなかった場合に発生します。
+
+このイベントはキャンセル不可で、バブリングしません。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("backgroundfetchfail", (event) => {});
+
+onbackgroundfetchfail = (event) => {};
+```
+
+## イベント型
+
+{{domxref("BackgroundFetchUpdateUIEvent")}} です。
+
+{{InheritanceDiagram("BackgroundFetchUpdateUIEvent")}}
+
+## イベントプロパティ
+
+_親である {{domxref("BackgroundFetchEvent")}} から継承したプロパティがあります。_
+
+- {{domxref("BackgroundFetchUpdateUIEvent.updateUI()")}}
+ - : ブラウザーがフェッチ操作の進捗状況を表示するために表示する要素の UI を更新します。
+
+## 解説
+
+[バックグラウンドフェッチ](/ja/docs/Web/API/Background_Fetch_API)操作が失敗した場合（つまり、個々のネットワークリクエストの少なくとも 1 つが正常に完了していない場合）、ブラウザーは必要に応じてサービスワーカーを起動し、サービスワーカーのグローバルスコープで `backgroundfetchfail` イベントを発行します。
+
+バックグラウンドフェッチ API では、ブラウザーはユーザーに操作の進行状況を示す UI 要素を表示します。`backgroundfetchfail` ハンドラーでは、サービスワーカーがその UI を更新して操作が失敗したことを示すことができます。これを行うには、ハンドラーがイベントの {{domxref("BackgroundFetchUpdateUIEvent/updateUI", "updateUI()")}} メソッドを呼び出し、新しいタイトルやアイコンを渡します。
+
+この `backgroundfetchfail` のハンドラーでは、サービスワーカーは操作に関連するデータをクリーンアップすることもできます。また、成功したレスポンスをすべて取得して（{{domxref("Cache")}} APIを使用して）保存することもできます。レスポンスデータにアクセスするために、サービスワーカーはイベントの {{domxref("BackgroundFetchEvent/registration", "registration")}} プロパティを使用します。
+
+## 例
+
+### UI の更新
+
+このイベントハンドラーは、操作が失敗したことをユーザーに知らせるために UI を更新します。
+
+```js
+addEventListener("backgroundfetchfail", (event) => {
+ event.updateUI({ title: "Could not complete download" });
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [バックグラウンドフェッチ API](/ja/docs/Web/API/Background_Fetch_API)
diff --git a/files/ja/web/api/serviceworkerglobalscope/backgroundfetchsuccess_event/index.md b/files/ja/web/api/serviceworkerglobalscope/backgroundfetchsuccess_event/index.md
new file mode 100644
index 00000000000000..9a748334d1ae23
--- /dev/null
+++ b/files/ja/web/api/serviceworkerglobalscope/backgroundfetchsuccess_event/index.md
@@ -0,0 +1,86 @@
+---
+title: "ServiceWorkerGlobalScope: backgroundfetchsuccess イベント"
+short-title: backgroundfetchsuccess
+slug: Web/API/ServiceWorkerGlobalScope/backgroundfetchsuccess_event
+l10n:
+ sourceCommit: c77a11ee1509542c16b0348afc4fcb3ffe588e1c
+---
+
+{{APIRef("Background Fetch API")}}{{SeeCompatTable}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
+
+**`backgroundfetchsuccess`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、[バックグラウンドフェッチ](/ja/docs/Web/API/Background_Fetch_API)操作が正常に完了したとき、つまり、フェッチで行うネットワークリクエストがすべて正常に完了したときに発行されます。
+
+このイベントはキャンセル不可で、バブリングしません。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("backgroundfetchsuccess", (event) => {});
+
+onbackgroundfetchsuccess = (event) => {};
+```
+
+## イベント型
+
+{{domxref("BackgroundFetchUpdateUIEvent")}} です。
+
+{{InheritanceDiagram("BackgroundFetchUpdateUIEvent")}}
+
+## イベントプロパティ
+
+_親である {{domxref("BackgroundFetchEvent")}} から継承したプロパティがあります。_
+
+- {{domxref("BackgroundFetchUpdateUIEvent.updateUI()")}}
+ - : ブラウザーがフェッチ操作の進捗状況を表示するために表示する要素の UI を更新します。
+
+## 解説
+
+[バックグラウンドフェッチ](/ja/docs/Web/API/Background_Fetch_API)操作が正常に完了すると（つまり、すべての個々のネットワークリクエストが正常に完了すると）、必要に応じてブラウザーはサービスワーカーを開始し、サービスワーカーのグローバルスコープで `backgroundfetchsuccess` イベントを発行します。
+
+このイベントのハンドラーでは、サービスワーカーはレスポンスを取得し、（例えば、{{domxref("Cache")}} API を使用して）保存することができます。レスポンスデータにアクセスするには、サービスワーカーはイベントの {{domxref("BackgroundFetchEvent/registration", "registration")}} プロパティを使用します。
+
+バックグラウンドフェッチ API では、ブラウザーはユーザーに操作の進行状況を示す UI 要素を表示します。`backgroundfetchsuccess` ハンドラーでは、サービスワーカーがその UI を更新して操作が成功したことを示すことができます。これを行うには、ハンドラーがイベントの {{domxref("BackgroundFetchUpdateUIEvent/updateUI", "updateUI()")}} メソッドを呼び出し、新しいタイトルやアイコンを渡します。
+
+## 例
+
+### レスポンスを保存して UI を更新
+
+このイベントハンドラーは、すべてのレスポンスをキャッシュに格納し、UI を更新します。
+
+```js
+addEventListener("backgroundfetchsuccess", (event) => {
+ const registration = event.registration;
+
+ event.waitUntil(async () => {
+ // Open a cache
+ const cache = await caches.open("movies");
+ // Get all the records
+ const records = await registration.matchAll();
+ // Cache all responses
+ const cachePromises = records.map(async (record) => {
+ const response = await record.responseReady;
+ await cache.put(record.request, response);
+ });
+
+ // Wait for caching to finish
+ await Promise.all(cachePromises);
+
+ // Update the browser's UI
+ event.updateUI({ title: "Move download complete" });
+ });
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [バックグラウンドフェッチ API](/ja/docs/Web/API/Background_Fetch_API)
diff --git a/files/ja/web/api/serviceworkerglobalscope/canmakepayment_event/index.md b/files/ja/web/api/serviceworkerglobalscope/canmakepayment_event/index.md
new file mode 100644
index 00000000000000..e8c3a36326dbc0
--- /dev/null
+++ b/files/ja/web/api/serviceworkerglobalscope/canmakepayment_event/index.md
@@ -0,0 +1,66 @@
+---
+title: "ServiceWorkerGlobalScope: canmakepayment イベント"
+short-title: canmakepayment
+slug: Web/API/ServiceWorkerGlobalScope/canmakepayment_event
+l10n:
+ sourceCommit: a4675b9077ae32f989c7ecac94f454db2653c4fc
+---
+
+{{APIRef("Payment Handler API")}}{{SeeCompatTable}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
+
+**`canmakepayment`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、決済アプリのサービスワーカーで発生し、決済処理の準備ができているかどうかを確認します。具体的には、販売者ウェブサイトが {{domxref("PaymentRequest.PaymentRequest", "PaymentRequest()")}} コンストラクターを呼び出すと発生します。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("canmakepayment", (event) => {});
+
+oncanmakepayment = (event) => {};
+```
+
+## イベント型
+
+{{domxref("CanMakePaymentEvent")}} です。{{domxref("ExtendableEvent")}} から継承しています。
+
+{{InheritanceDiagram("CanMakePaymentEvent")}}
+
+## 例
+
+`canmakepayment` イベントは、決済アプリのサービスワーカーで発行され、決済処理の準備ができているかどうかを調べます。具体的には、販売者のウェブサイトが {{domxref("PaymentRequest.PaymentRequest", "PaymentRequest()")}} コンストラクターを呼び出すと発行されます。サービスワーカーは、次のように {{domxref("CanMakePaymentEvent.respondWith()")}} メソッドを使用して適切に応答することができます。
+
+```js
+self.addEventListener("canmakepayment", (e) => {
+ e.respondWith(
+ new Promise((resolve, reject) => {
+ someAppSpecificLogic()
+ .then((result) => {
+ resolve(result);
+ })
+ .catch((error) => {
+ reject(error);
+ });
+ }),
+ );
+});
+```
+
+`respondWith()` は、サービスワーカーが決済リクエストを処理できる状態にある (`true`) またはそうでない (`false`) ことを示す論理値で解決するプロミス ({{jsxref("Promise")}}) を返します。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Payment Handler API", "決済ハンドラー API", "", "nocode")}}
+- [Web-based payment apps overview](https://web.dev/articles/web-based-payment-apps-overview)
+- [Setting up a payment method](https://web.dev/articles/setting-up-a-payment-method)
+- [Life of a payment transaction](https://web.dev/articles/life-of-a-payment-transaction)
+- [決済リクエスト API の使用](/ja/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API)
+- [決済処理の概念](/ja/docs/Web/API/Payment_Request_API/Concepts)
diff --git a/files/ja/web/api/serviceworkerglobalscope/clients/index.md b/files/ja/web/api/serviceworkerglobalscope/clients/index.md
index 8012335eec837e..1f64196579d0a7 100644
--- a/files/ja/web/api/serviceworkerglobalscope/clients/index.md
+++ b/files/ja/web/api/serviceworkerglobalscope/clients/index.md
@@ -1,11 +1,12 @@
---
-title: ServiceWorkerGlobalScope.clients
+title: "ServiceWorkerGlobalScope: clients プロパティ"
+short-title: clients
slug: Web/API/ServiceWorkerGlobalScope/clients
l10n:
- sourceCommit: c7aeb96dac3e0ac2864cffe45c02d214ae1a5219
+ sourceCommit: 2ef36a6d6f380e79c88bc3a80033e1d3c4629994
---
-{{APIRef("Service Workers API")}}
+{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
**`clients`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスの読み取り専用プロパティで、サービスワーカーに関連付けられた [`Clients`](/ja/docs/Web/API/Clients) オブジェクトを返します。
@@ -25,6 +26,4 @@ l10n:
- [サービスワーカーの使用](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers)
- [サービスワーカーの基本的なコード例](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker)
-- [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/)
-- {{jsxref("Promise")}}
- [ウェブワーカーの使用](/ja/docs/Web/API/Web_Workers_API/Using_web_workers)
diff --git a/files/ja/web/api/serviceworkerglobalscope/contentdelete_event/index.md b/files/ja/web/api/serviceworkerglobalscope/contentdelete_event/index.md
index 7b9f07e9770ec8..068a25344f39c3 100644
--- a/files/ja/web/api/serviceworkerglobalscope/contentdelete_event/index.md
+++ b/files/ja/web/api/serviceworkerglobalscope/contentdelete_event/index.md
@@ -1,11 +1,12 @@
---
title: "ServiceWorkerGlobalScope: contentdelete イベント"
+short-title: contentdelete
slug: Web/API/ServiceWorkerGlobalScope/contentdelete_event
l10n:
- sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1
+ sourceCommit: 6c3bed9bcd275fd4ad714c4df0ed874e9bf87681
---
-{{APIRef("Content Index API")}}{{SeeCompatTable}}
+{{APIRef("Content Index API")}}{{SeeCompatTable}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
**`contentdelete`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、ユーザーエージェントを通じて索引付けされたコンテンツから項目が削除されたときに発行されます。
@@ -71,5 +72,4 @@ self.oncontentdelete = (event) => {
## 関連情報
- [コンテンツ索引 API](/ja/docs/Web/API/Content_Index_API)
-- [An introductory article on the Content Index API](https://web.dev/content-indexing-api/)
-- [An app which uses the Content Index API to list and remove 'save for later' content](https://contentindex.dev/)
+- [An introductory article on the Content Index API](https://developer.chrome.com/docs/capabilities/web-apis/content-indexing-api)
diff --git a/files/ja/web/api/serviceworkerglobalscope/cookiechange_event/index.md b/files/ja/web/api/serviceworkerglobalscope/cookiechange_event/index.md
new file mode 100644
index 00000000000000..e9c978b3003f4d
--- /dev/null
+++ b/files/ja/web/api/serviceworkerglobalscope/cookiechange_event/index.md
@@ -0,0 +1,37 @@
+---
+title: "ServiceWorkerGlobalScope: cookiechange イベント"
+short-title: cookiechange
+slug: Web/API/ServiceWorkerGlobalScope/cookiechange_event
+l10n:
+ sourceCommit: 60c3843f55839380e0c0cdc293ea694fe9943158
+---
+
+{{APIRef("Cookie Store API")}}{{SeeCompatTable}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
+
+**`cookiechange`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、サービスワーカーのクッキー変更購読リストで一致するクッキー変更が発生したときに発行されます。
+
+このイベントはキャンセル不可で、バブリングしません。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("cookiechange", (event) => {});
+
+oncookiechange = (event) => {};
+```
+
+## イベント型
+
+{{domxref("ExtendableCookieChangeEvent")}} です。{{domxref("ExtendableEvent")}} から継承しています。
+
+{{InheritanceDiagram("ExtendableCookieChangeEvent")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/serviceworkerglobalscope/cookiestore/index.md b/files/ja/web/api/serviceworkerglobalscope/cookiestore/index.md
new file mode 100644
index 00000000000000..a2b9d36dd2a47f
--- /dev/null
+++ b/files/ja/web/api/serviceworkerglobalscope/cookiestore/index.md
@@ -0,0 +1,23 @@
+---
+title: "ServiceWorkerGlobalScope: cookieStore プロパティ"
+short-title: cookieStore
+slug: Web/API/ServiceWorkerGlobalScope/cookieStore
+l10n:
+ sourceCommit: 60c3843f55839380e0c0cdc293ea694fe9943158
+---
+
+{{APIRef("Cookie Store API")}}{{SeeCompatTable}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
+
+**`cookieStore`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスの読み取り専用プロパティで、このサービスワーカーに関連付けられた {{domxref("CookieStore")}} オブジェクトへの参照を返します。
+
+## 値
+
+{{domxref("CookieStore")}} オブジェクトインスタンスです。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/serviceworkerglobalscope/fetch_event/index.md b/files/ja/web/api/serviceworkerglobalscope/fetch_event/index.md
index e9c97e03d53c55..7b6bb36f8d96f5 100644
--- a/files/ja/web/api/serviceworkerglobalscope/fetch_event/index.md
+++ b/files/ja/web/api/serviceworkerglobalscope/fetch_event/index.md
@@ -1,13 +1,14 @@
---
title: "ServiceWorkerGlobalScope: fetch イベント"
+short-title: fetch
slug: Web/API/ServiceWorkerGlobalScope/fetch_event
l10n:
- sourceCommit: 6f2391b536a4db607ea94e4ce07396b2cead6a88
+ sourceCommit: 58ad1df59f2ffb9ecab4e27fe1bdf1eb5a55f89b
---
-{{APIRef("Service Workers API")}}
+{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
-**`fetch`** イベントはメインスレッドがネットワークリクエストを行うときに発生します。これによりサービスワーカーがリクエストをカスタマイズされたレスポンス（ローカルキャッシュなど）に差し替えることができます。
+**`fetch`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、メインアプリスレッドがネットワークリクエストを発行したときに、サービスワーカーのグローバルスコープで発生します。これにより、サービスワーカーがネットワークリクエストを傍受し、独自のレスポンス（例えば、ローカルキャッシュからのレスポンス）を送信できるようになります。
このイベントはキャンセル不可で、バブリングしません。
@@ -23,23 +24,23 @@ onfetch = (event) => {};
## 解説
-この `fetch` イベントは、メインスレッドがネットワークリクエストを行う際に、サービスワーカーのグローバルスコープで発生します。これはメインスレッドからの明示的な {{domxref("fetch()")}} 呼び出しだけではなく、ページナビゲーションや JavaScript、CSS、画像などのリソースの取得による暗黙的なリクエストでも発生します。
+この `fetch` イベントは、メインスレッドがネットワークリクエストを行う際に、サービスワーカーのグローバルスコープで発生します。これはメインスレッドからの明示的な {{domxref("Window/fetch", "fetch()")}} 呼び出しだけではなく、ページナビゲーションや JavaScript、CSS、画像などのリソースの取得による暗黙的なリクエストでも発生します。
-イベントハンドラは {{domxref("FetchEvent")}} オブジェクトを受け取り、{{domxref("Request")}} インスタンスを通じてリクエストにアクセスできます。
+イベントハンドラーは {{domxref("FetchEvent")}} オブジェクトを受け取り、{{domxref("Request")}} インスタンスを通じてリクエストにアクセスできます。
-`FetchEvent` はパラメータに {{domxref("Response")}} 、または `Response` で解決する `Promise` を受け取る {{domxref("FetchEvent.respondWith()", "respondWith()")}} メソッドを持っています。これにより、サービスワーカーのイベントハンドラはメインスレッドでリクエストに返されるレスポンスを差し替えることができます。
+`FetchEvent` はパラメーターに {{domxref("Response")}} 、または `Response` で解決する `Promise` を受け取る {{domxref("FetchEvent.respondWith()", "respondWith()")}} メソッドを持っています。これにより、サービスワーカーのイベントハンドラーはメインスレッドでリクエストに返されるレスポンスを差し替えることができます。
例えばサービスワーカーは以下のような値へ差し替えることができます。
-- {{domxref("Cache")}} インターフェースから取得したレスポンスのローカルキャッシュ
-- {{domxref("Response.json()")}} や {{domxref("Response.Response()", "Response()")}} コンストラクタなどのメソッドでサービスワーカーが合成したレスポンス。
+- {{domxref("Cache")}} インターフェイスから取得したレスポンスのローカルキャッシュ
+- {{domxref("Response.json()")}} や {{domxref("Response.Response()", "Response()")}} コンストラクターなどのメソッドでサービスワーカーが合成したレスポンス。
- {{domxref("Response.error_static()", "Response.error()")}} による ネットワークエラー。これは `fetch()` 呼び出しを拒否させます。
`respondWith()` メソッドは、一つのリクエストに対して一度だけ呼び出すことができます。複数の `fetch` イベントリスナーが設定された場合、`respondWith()` が呼び出されるまで、登録された順に呼び出されます。
-`respondWith()` メソッドは同期的に呼び出す必要があります。つまり `then` ハンドラから呼び出すことはできません。
+`respondWith()` メソッドは同期的に呼び出す必要があります。つまり `then` ハンドラーから呼び出すことはできません。
-通常、`fetch` イベントハンドラは URL などのリクエスト特徴に応じて異なる戦略をとります。
+通常、`fetch` イベントハンドラーは URL などのリクエスト特徴に応じて異なる戦略をとります。
```js
function strategy1() {
@@ -63,7 +64,7 @@ self.addEventListener("fetch", (event) => {
});
```
-ハンドラ内で `respondWith()` が呼び出されなかった場合、ユーザーエージェントは自動的に元のネットワークリクエストを行います。例えば上記のコードでは `pattern1` または `pattern2` にマッチしないリクエストはすべて、サービスワーカーが存在しなかったかのように振る舞います。
+ハンドラー内で `respondWith()` が呼び出されなかった場合、ユーザーエージェントは自動的に元のネットワークリクエストを行います。例えば上記のコードでは `pattern1` または `pattern2` にマッチしないリクエストはすべて、サービスワーカーが存在しなかったかのように振る舞います。
## イベント型
@@ -73,7 +74,7 @@ self.addEventListener("fetch", (event) => {
### キャッシュからネットワークへのフォールバック
-この `fetch` イベントハンドラは、まずキャッシュ済みのレスポンスを探します。レスポンスが見つかった場合はキャッシュ済みのレスポンスを返します。そうでない場合はネットワークからリソースを取得しようとします。
+この `fetch` イベントハンドラーは、まずキャッシュ済みのレスポンスを探します。レスポンスが見つかった場合はキャッシュ済みのレスポンスを返します。そうでない場合はネットワークからリソースを取得しようとします。
```js
async function cacheThenNetwork(request) {
@@ -94,7 +95,7 @@ self.addEventListener("fetch", (event) => {
### キャッシュのみ
-この `fetch` イベントハンドラは、スクリプトとスタイルシートに対して「キャッシュのみ」ポリシーを実装します。リクエストの {{domxref("Request.destination", "destination")}} が `"script"` または `"style"` である場合、ハンドラはキャッシュだけを探し、レスポンスが見つからない場合はエラーを返します。その他のリクエストはすべてネットワークを通して行われます。
+この `fetch` イベントハンドラーは、スクリプトとスタイルシートに対して「キャッシュのみ」ポリシーを実装します。リクエストの {{domxref("Request.destination", "destination")}} が `"script"` または `"style"` である場合、ハンドラーはキャッシュだけを探し、レスポンスが見つからない場合はエラーを返します。その他のリクエストはすべてネットワークを通して行われます。
```js
async function cacheOnly(request) {
@@ -128,6 +129,6 @@ self.addEventListener("fetch", (event) => {
- [サービスワーカーの使用](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers)
- [サービスワーカーの基本的なコード例](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker)
-- {{domxref("fetch()")}} method
-- {{domxref("Request")}} interface
-- {{domxref("Response")}} interface
+- {{domxref("WorkerGlobalScope/fetch", "fetch()")}} メソッド
+- {{domxref("Request")}} インターフェイス
+- {{domxref("Response")}} インターフェイス
diff --git a/files/ja/web/api/serviceworkerglobalscope/index.md b/files/ja/web/api/serviceworkerglobalscope/index.md
index bf6dd536ce7b52..91538d2f6e4c05 100644
--- a/files/ja/web/api/serviceworkerglobalscope/index.md
+++ b/files/ja/web/api/serviceworkerglobalscope/index.md
@@ -2,10 +2,10 @@
title: ServiceWorkerGlobalScope
slug: Web/API/ServiceWorkerGlobalScope
l10n:
- sourceCommit: 6d194a9afcce7beef0082c1dc50644bd0fcda635
+ sourceCommit: c29cee3dcb0d0e66093dd0c18aa82e0eab9d6d14
---
-{{APIRef("Service Workers API")}}
+{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
**`ServiceWorkerGlobalScope`** は[サービスワーカー API](/ja/docs/Web/API/Service_Worker_API) のインターフェイスで、サービスワーカーのグローバル実行コンテキストを表します。
@@ -13,7 +13,7 @@ l10n:
いったん正しく登録されたら、サービスワーカーはメモリーとプロセッサーの力を温存するため、アイドル時であれば停止させることができます。アクティブなサービスワーカーは、例えば {{domxref("ServiceWorkerGlobalScope.fetch_event", "fetch")}} や {{domxref("ServiceWorkerGlobalScope.message_event", "message")}} などのイベントに応じて自動的に再起動します。
-加えて、同期リクエストはサービスワーカーでは許可されていません。非同期リクエスト、つまり {{domxref("fetch()")}} メソッド経由で初期化されたものが使われます。
+加えて、同期リクエストはサービスワーカーでは許可されていません。非同期リクエスト、つまり {{domxref("WorkerGlobalScope/fetch", "fetch()")}} メソッド経由で初期化されたものが使われます。
このインターフェイスは {{domxref("WorkerGlobalScope")}} インターフェイスと、その親の {{domxref("EventTarget")}} を継承しています。
@@ -21,33 +21,59 @@ l10n:
## インスタンスプロパティ
-- {{domxref("caches")}} {{ReadOnlyInline}}
- - : サービスワーカーに関連づけられた {{domxref("CacheStorage")}} オブジェクトを保持します。
+_このインターフェイスには {{domxref("WorkerGlobalScope")}} インターフェイス、およびその親である {{domxref("EventTarget")}} から継承したプロパティがあります。_
+
- {{domxref("ServiceWorkerGlobalScope.clients")}} {{ReadOnlyInline}}
- : サービスワーカーに関連付けられた {{domxref("Clients")}} オブジェクトを保持します。
+- {{domxref("ServiceWorkerGlobalScope.cookieStore")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+ - : このサービスワーカーに関連付けられた {{domxref("CookieStore")}} オブジェクトを参照します。
- {{domxref("ServiceWorkerGlobalScope.registration")}} {{ReadOnlyInline}}
- : サービスワーカーの登録を表す {{domxref("ServiceWorkerRegistration")}} オブジェクトを保持します。
+- {{domxref("ServiceWorkerGlobalScope.serviceWorker")}} {{ReadOnlyInline}}
+ - : サービスワーカーを表す {{domxref("ServiceWorker")}} オブジェクトを保持します。
+
+## インスタンスメソッド
+
+_このインターフェイスには {{domxref("WorkerGlobalScope")}} インターフェイス、およびその親である {{domxref("EventTarget")}} から継承したメソッドがあります。_
+
+- {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}}
+ - : 現在のサービスワーカーの登録を、待ち状態からクライアントが使っている時のアクティブ状態に進めます。
## イベント
+このイベントを待ち受けするには、 {{domxref("EventTarget/addEventListener()", "addEventListener()")}} などのメソッドで使用するか、このインターフェイスの `onイベント名` プロパティにイベントリスナー設定するかしてください。
+
- {{domxref("ServiceWorkerGlobalScope/activate_event", "activate")}}
- : {{domxref("ServiceWorkerRegistration")}} が新しい {{domxref("ServiceWorkerRegistration.active")}} ワーカーを得た時に発生します。
-- {{domxref("ServiceWorkerGlobalScope.canmakepayment_event", "canmakepayment")}} {{Experimental_Inline}}
- - : 決済アプリのサービスワーカーで発行され、決済を処理する準備ができたかどうかを調べるために使用されます。特に、販売者のウェブサイトが {{domxref("PaymentRequest.PaymentRequest", "new PaymentRequest()")}} を呼び出すと発行されます。
+- {{domxref("ServiceWorkerGlobalScope/backgroundfetchabort_event", "backgroundfetchabort")}} {{Experimental_Inline}}
+ - : ユーザーまたはアプリによって[バックグラウンドフェッチ](/ja/docs/Web/API/Background_Fetch_API)処理が中止された場合に発生します。
+- {{domxref("ServiceWorkerGlobalScope/backgroundfetchclick_event", "backgroundfetchclick")}} {{Experimental_Inline}}
+ - : ユーザーが UI をクリックして[バックグラウンドフェッチ](/ja/docs/Web/API/Background_Fetch_API)処理を実行したときに発生します。
+- {{domxref("ServiceWorkerGlobalScope/backgroundfetchfail_event", "backgroundfetchfail")}} {{Experimental_Inline}}
+ - : [バックグラウンドフェッチ](/ja/docs/Web/API/Background_Fetch_API)処理で、リクエストの少なくとも 1 つが失敗したときに発生します。
+- {{domxref("ServiceWorkerGlobalScope/backgroundfetchsuccess_event", "backgroundfetchsuccess")}} {{Experimental_Inline}}
+ - : [バックグラウンドフェッチ](/ja/docs/Web/API/Background_Fetch_API)処理で、リクエストされたすべてが成功したときに発生します。
+- {{domxref("ServiceWorkerGlobalScope/canmakepayment_event", "canmakepayment")}} {{Experimental_Inline}}
+ - : 決済アプリのサービスワーカーで発行され、決済を処理する準備ができたかどうかを調べるために使用されます。
+ 特に、販売者のウェブサイトが {{domxref("PaymentRequest.PaymentRequest", "PaymentRequest()")}} コンストラクターを呼び出すと発生します。
- {{domxref("ServiceWorkerGlobalScope/contentdelete_event", "contentdelete")}} {{Experimental_Inline}}
- - : {{domxref("ContentIndex", "コンテンツ索引", "", 1)}}からアイテムが取り除かれたときに発生します。
+ - : {{domxref("ContentIndex")}} からアイテムが取り除かれたときに発生します。
+- {{domxref("ServiceWorkerGlobalScope/cookiechange_event", "cookiechange")}} {{Experimental_Inline}}
+ - : サービスワーカーの Cookie 変更購読リストと一致する Cookie 変更があった場合に発生します。
- {{domxref("ServiceWorkerGlobalScope/fetch_event", "fetch")}}
- - : {{domxref("fetch()")}} が呼び出されたときに発生します。
+ - : {{domxref("WorkerGlobalScope/fetch", "fetch()")}} が呼び出されたときに発生します。
- {{domxref("ServiceWorkerGlobalScope/install_event", "install")}}
- : {{domxref("ServiceWorkerRegistration")}} が新しい {{domxref("ServiceWorkerRegistration.installing")}} ワーカーを得た時に発生します。
- {{domxref("ServiceWorkerGlobalScope/message_event", "message")}}
- - : メッセージを受信したときに発生します。制御中のページは {{domxref("MessagePort.postMessage()")}} メソッドを使用してサービスワーカーにメッセージを送信することができます。サービスワーカーは任意で [`event.data.port`](https://html.spec.whatwg.org/multipage/comms.html#messageport) で公開されている {{domxref("MessagePort")}} を通じて、対応する制御中のページに返信することができます。
+ - : メッセージを受信したときに発生します。制御中のページは {{domxref("MessagePort.postMessage()")}} メソッドを使用してサービスワーカーにメッセージを送信することができます。
+- {{domxref("ServiceWorkerGlobalScope/messageerror_event", "messageerror")}}
+ - : 受信メッセージがデシリアライズできなかった場合に発生します。
- {{domxref("ServiceWorkerGlobalScope/notificationclick_event", "notificationclick")}}
- : 表示された通知をユーザーがクリックしたときに発生します。
- {{domxref("ServiceWorkerGlobalScope/notificationclose_event", "notificationclose")}}
- : 表示された通知をユーザーが閉じたときに発生します。
-- {{domxref("ServiceWorkerGlobalScope.paymentrequest_event", "paymentrequest")}} {{Experimental_Inline}}
- - : 販売者のウェブサイトで {{domxref("PaymentRequest.show()")}} メソッドを介して支払いフローが開始されたときに、支払いアプリで発行されます。
+- {{domxref("ServiceWorkerGlobalScope/paymentrequest_event", "paymentrequest")}} {{Experimental_Inline}}
+ - : 販売者のウェブサイトで {{domxref("PaymentRequest.show()")}} メソッドを介して支払いフローが開始されたときに、支払いアプリで発生します。
- {{domxref("ServiceWorkerGlobalScope/sync_event", "sync")}}
- : サービスワーカーのクライアントページから {{domxref("SyncManager.register")}} への呼び出しが行われたときに発生します。ネットワークが有効であるか、すぐに利用可能になるのであれば、直ちに同期が試みられます。
- {{domxref("ServiceWorkerGlobalScope/periodicsync_event", "periodicsync")}} {{Experimental_Inline}}
@@ -57,21 +83,11 @@ l10n:
- {{domxref("ServiceWorkerGlobalScope/pushsubscriptionchange_event", "pushsubscriptionchange")}}
- : プッシュ通知への加入が無効化されたとき、または無効化されようとするとき (例えば、プッシュ通知の有効期限が設定されたとき) に発生します。
-## インスタンスメソッド
-
-- {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}}
- - : 現在のサービスワーカーの登録を、待ち状態からクライアントが使っている時のアクティブ状態に進めます。
-
-`ServiceWorkerGlobalScope` は {{domxref("WorkerGlobalScope")}} を実装しています。このため利用できる以下のプロパティもあります。
-
-- {{domxref("fetch()")}}
- - : リソース取得 (fetch) のプロセスを開始します。これはリクエストのレスポンスを表す {{domxref("Response")}} オブジェクトを解決するプロミスを返します。このアルゴリズムはサービスワーカーコンテキストに渡されるフェッチ処理のエントリーポイントです。
-
## 例
このコードスニペットは、[service worker prefetch の例](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js)（[prefetch の例のライブ版](https://googlechrome.github.io/samples/service-worker/prefetch/)を参照してください）からのものです。 {{domxref("ServiceWorkerGlobalScope.fetch_event", "onfetch")}} イベントハンドラーは `fetch` イベントを監視します。イベントが発生した時、コードは {{domxref("Cache")}} オブジェクト内で、最初に一致したリクエストに対して解決するプロミスを返します。もし、何も一致しなかった場合は、コードはネットワークからレスポンスを読み取ります。
-さらに、このコードは {{domxref("fetch()")}} 操作で発生した例外を処理しています。 HTTP のエラーレスポンス（たとえば、404）は、例外を引き起こさないことに注意してください。適切なエラーコードセットを持った通常のレスポンスオブジェクトを返します。
+さらに、このコードは {{domxref("WorkerGlobalScope/fetch", "fetch()")}} 操作で発生した例外を処理しています。 HTTP のエラーレスポンス（たとえば、404）は、例外を引き起こさないことに注意してください。適切なエラーコードセットを持った通常のレスポンスオブジェクトを返します。
```js
self.addEventListener("fetch", (event) => {
@@ -115,5 +131,3 @@ self.addEventListener("fetch", (event) => {
- [サービスワーカーの使用](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers)
- [サービスワーカーの基本的なコード例](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker)
-- [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/)
-- {{jsxref("Promise")}}
diff --git a/files/ja/web/api/serviceworkerglobalscope/install_event/index.md b/files/ja/web/api/serviceworkerglobalscope/install_event/index.md
index 6b0c38b0fb1c0b..76986f1ee7dd88 100644
--- a/files/ja/web/api/serviceworkerglobalscope/install_event/index.md
+++ b/files/ja/web/api/serviceworkerglobalscope/install_event/index.md
@@ -1,11 +1,12 @@
---
title: "ServiceWorkerGlobalScope: install イベント"
+short-title: install
slug: Web/API/ServiceWorkerGlobalScope/install_event
l10n:
- sourceCommit: e910d1f446a8b3fa8c60c7cb34c272f4a13b3892
+ sourceCommit: 2ef36a6d6f380e79c88bc3a80033e1d3c4629994
---
-{{APIRef("Service Workers API")}}
+{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
**`install`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、 {{domxref("ServiceWorkerRegistration")}} が新しい {{domxref("ServiceWorkerRegistration.installing")}} ワーカーを取得したときに発行されます。
@@ -36,7 +37,7 @@ _固有のプロパティは実装していませんが、親である {{domxref
以下のスニペットでは、`install`イベントハンドラーを使用して、キャッシュに多くのレスポンスを投入し、サービスワーカーがオフラインで資産を提供するために使用する方法を示しています。
```js
-this.addEventListener("install", (event) => {
+self.addEventListener("install", (event) => {
event.waitUntil(
caches
.open("v1")
@@ -61,7 +62,7 @@ this.addEventListener("install", (event) => {
また、 `oninstall` プロパティを使用して、イベントハンドラーを設定することもできます。
```js
-globalScope.oninstall = (event) => {
+self.oninstall = (event) => {
// ...
};
```
diff --git a/files/ja/web/api/serviceworkerglobalscope/message_event/index.md b/files/ja/web/api/serviceworkerglobalscope/message_event/index.md
index 165bc7b2f8727d..06c3b65e4e3237 100644
--- a/files/ja/web/api/serviceworkerglobalscope/message_event/index.md
+++ b/files/ja/web/api/serviceworkerglobalscope/message_event/index.md
@@ -1,13 +1,14 @@
---
title: "ServiceWorkerGlobalScope: message イベント"
+short-title: message
slug: Web/API/ServiceWorkerGlobalScope/message_event
l10n:
- sourceCommit: c7aeb96dac3e0ac2864cffe45c02d214ae1a5219
+ sourceCommit: 2ef36a6d6f380e79c88bc3a80033e1d3c4629994
---
-{{APIRef("Service Workers API")}}
+{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
-**`message`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、着信メッセージを受信したときに発生します。 制御されたページは、 {{domxref("Worker.postMessage()", "ServiceWorker.postMessage()")}} メソッドを使用して、サービスワーカーにメッセージを送信することができます。
+**`message`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、着信メッセージを受信したときに発生します。 制御されたページは、{{domxref("ServiceWorker.postMessage()")}} メソッドを使用して、サービスワーカーにメッセージを送信することができます。
サービスワーカーは、任意で、制御されたページに対応する {{domxref("Client.postMessage()")}} を介して返信することができます。
このイベントはキャンセル不可で、バブリングしません。
@@ -33,11 +34,11 @@ onmessage = (event) => {};
_親である {{domxref("ExtendableEvent")}} からプロパティを継承しています_。
- {{domxref("ExtendableMessageEvent.data")}} {{ReadOnlyInline}}
- - : イベントのデータを返します。任意のデータ型にすることができます。
+ - : イベントのデータを返します。任意のデータ型にすることができます。`messageerror` イベントで配信された場合、プロパティは `null` になります。
- {{domxref("ExtendableMessageEvent.origin")}} {{ReadOnlyInline}}
- : メッセージを送信した {{domxref("Client")}} のオリジンを返します。
- {{domxref("ExtendableMessageEvent.lastEventId")}} {{ReadOnlyInline}}
- - : [サーバー送信イベント](/ja/docs/Web/API/Server-sent_events/Using_server-sent_events)において、イベントソースの最後のイベント ID を表します。これは空文字列です。
+ - : [サーバー送信イベント](/ja/docs/Web/API/Server-sent_events/Using_server-sent_events)において、イベントソースの最後のイベント ID を表します。
- {{domxref("ExtendableMessageEvent.source")}} {{ReadOnlyInline}}
- : メッセージを送信した {{domxref("Client")}} オブジェクトへの参照を返します。
- {{domxref("ExtendableMessageEvent.ports")}} {{ReadOnlyInline}}
@@ -99,5 +100,4 @@ self.onmessage = (event) => {
- [サービスワーカーの使用](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers)
- [サービスワーカーの基本的なコード例](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker)（英語）
-- [ServiceWorker の準備はできていますか？](https://jakearchibald.github.io/isserviceworkerready/)（英語）
- [ウェブワーカーの使用](/ja/docs/Web/API/Web_Workers_API/Using_web_workers)
diff --git a/files/ja/web/api/serviceworkerglobalscope/messageerror_event/index.md b/files/ja/web/api/serviceworkerglobalscope/messageerror_event/index.md
new file mode 100644
index 00000000000000..050ff9942cfb5b
--- /dev/null
+++ b/files/ja/web/api/serviceworkerglobalscope/messageerror_event/index.md
@@ -0,0 +1,100 @@
+---
+title: "ServiceWorkerGlobalScope: messageerror イベント"
+short-title: messageerror
+slug: Web/API/ServiceWorkerGlobalScope/messageerror_event
+l10n:
+ sourceCommit: 2ef36a6d6f380e79c88bc3a80033e1d3c4629994
+---
+
+{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
+
+**`messageerror`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、受信メッセージがデシリアライズできない場合に発生します。
+
+このイベントはキャンセル不可で、バブリングしません。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("messageerror", (event) => {});
+
+onmessageerror = (event) => {};
+```
+
+## イベント型
+
+{{domxref("ExtendableMessageEvent")}} です。 {{domxref("ExtendableEvent")}} を継承しています。
+
+{{InheritanceDiagram("ExtendableMessageEvent")}}
+
+## イベントプロパティ
+
+_親である {{domxref("ExtendableEvent")}} からプロパティを継承しています_。
+
+- {{domxref("ExtendableMessageEvent.data")}} {{ReadOnlyInline}}
+ - : イベントのデータを返します。任意のデータ型にすることができます。`messageerror` イベントで配信された場合、プロパティは `null` になります。
+- {{domxref("ExtendableMessageEvent.origin")}} {{ReadOnlyInline}}
+ - : メッセージを送信した {{domxref("Client")}} のオリジンを返します。
+- {{domxref("ExtendableMessageEvent.lastEventId")}} {{ReadOnlyInline}}
+ - : [サーバー送信イベント](/ja/docs/Web/API/Server-sent_events/Using_server-sent_events)において、イベントソースの最後のイベント ID を表します。
+- {{domxref("ExtendableMessageEvent.source")}} {{ReadOnlyInline}}
+ - : メッセージを送信した {{domxref("Client")}} オブジェクトへの参照を返します。
+- {{domxref("ExtendableMessageEvent.ports")}} {{ReadOnlyInline}}
+ - : 関連するメッセージチャネルのポートを表す {{domxref("MessagePort")}} オブジェクトを含む配列を返します。
+
+## 例
+
+以下の例では、ページが {{domxref("ServiceWorkerRegistration.active")}} を介して {{domxref("ServiceWorker")}} オブジェクトへのハンドルを取得し、その `postMessage()` 関数を呼び出します。
+
+```js
+// main.js
+if (navigator.serviceWorker) {
+ navigator.serviceWorker.register("service-worker.js");
+
+ navigator.serviceWorker.addEventListener("message", (event) => {
+ // event は MessageEvent オブジェクトです
+ console.log(`The service worker sent me a message: ${event.data}`);
+ });
+
+ navigator.serviceWorker.ready.then((registration) => {
+ registration.active.postMessage("Hi service worker");
+ });
+}
+```
+
+サービスワーカーは、次のようにして "message" イベントを待ち受けすることでメッセージを受け取ることができます。
+
+```js
+// service-worker.js
+self.addEventListener("messageerror", (event) => {
+ // event は ExtendableMessageEvent オブジェクトです
+ console.error("Message deserialization failed");
+});
+```
+
+また、スクリプトは `onmessageerror` を使用してメッセージを待ち受けすることもできます。
+
+```js
+// service-worker.js
+self.onmessageerror = (event) => {
+ // event は ExtendableMessageEvent オブジェクトです
+ console.error("Message deserialization failed");
+};
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("ServiceWorkerGlobalScope/message_event", "message")}}
+- {{domxref("ServiceWorker.postMessage()")}}
+- [ウェブワーカーの使用](/ja/docs/Web/API/Web_Workers_API/Using_web_workers)
+- [Service workers basic code example](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker)
+- [Using web workers](/ja/docs/Web/API/Web_Workers_API/Using_web_workers)
diff --git a/files/ja/web/api/serviceworkerglobalscope/notificationclick_event/index.md b/files/ja/web/api/serviceworkerglobalscope/notificationclick_event/index.md
index 14c228d27bd68c..a71109dd9e9b07 100644
--- a/files/ja/web/api/serviceworkerglobalscope/notificationclick_event/index.md
+++ b/files/ja/web/api/serviceworkerglobalscope/notificationclick_event/index.md
@@ -1,13 +1,16 @@
---
title: "ServiceWorkerGlobalScope: notificationclick イベント"
+short-title: notificationclick
slug: Web/API/ServiceWorkerGlobalScope/notificationclick_event
l10n:
- sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1
+ sourceCommit: 28848ba41c082db2a8c55e85c804bd06363afb57
---
-{{APIRef}}
+{{APIRef("Web Notifications")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
-**`notificationclick`** イベントは、 {{domxref("ServiceWorkerRegistration.showNotification()")}} によって生み出されたシステム通知がクリックされたことを示すために発生します。
+**`notificationclick`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、 {{domxref("ServiceWorkerRegistration.showNotification()")}} によって生み出されたシステム通知がクリックされたことを示すために発生します。
+
+メインスレッドまたは {{domxref("Notification.Notification","Notification()")}} コンストラクターを使用するサービスワーカーではないワーカーで作成された通知は、{{domxref("Notification/click_event", "click")}} イベントを代わりに {{domxref("Notification")}} オブジェクト自体で受け取ります。
このイベントはキャンセル不可で、バブリングしません。
@@ -23,13 +26,13 @@ onnotificationclick = (event) => {};
## イベント型
-{{domxref("NotificationEvent")}} です。 {{domxref("Event")}} を継承しています。
+{{domxref("NotificationEvent")}} です。{{domxref("ExtendableEvent")}} および {{domxref("Event")}} を継承しています。
{{InheritanceDiagram("NotificationEvent")}}
## イベントプロパティ
-_親である {{domxref("Event")}} からプロパティを継承しています_。
+_祖先である {{domxref("ExtendableEvent")}} および {{domxref("Event")}} からプロパティを継承しています_。
- {{domxref("NotificationEvent.notification")}} {{ReadOnlyInline}}
- : クリックされイベントが発行された通知を表す {{domxref("Notification")}} オブジェクトを返します。
@@ -86,11 +89,11 @@ self.onnotificationclick = (event) => {
};
```
-イベントのアクションは `event.action` を使って {{domxref("ServiceWorkerGlobalScope.notificationclick_event", "notificationclick")}} イベントハンドラーの中で処理することができます。
+イベントのアクションは `event.action` を使って `notificationclick` イベントハンドラーの中で処理することができます。
```js
navigator.serviceWorker.register("sw.js");
-Notification.requestPermission((result) => {
+Notification.requestPermission().then((result) => {
if (result === "granted") {
navigator.serviceWorker.ready.then((registration) => {
// Archive というタイトルのアクションを含んだ通知を表示します。
diff --git a/files/ja/web/api/serviceworkerglobalscope/notificationclose_event/index.md b/files/ja/web/api/serviceworkerglobalscope/notificationclose_event/index.md
index 1e3a9c348f4103..b4fceddc45ced6 100644
--- a/files/ja/web/api/serviceworkerglobalscope/notificationclose_event/index.md
+++ b/files/ja/web/api/serviceworkerglobalscope/notificationclose_event/index.md
@@ -1,17 +1,16 @@
---
title: "ServiceWorkerGlobalScope: notificationclose イベント"
+short-title: notificationclose
slug: Web/API/ServiceWorkerGlobalScope/notificationclose_event
l10n:
- sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1
+ sourceCommit: 28848ba41c082db2a8c55e85c804bd06363afb57
---
-{{APIRef("Service Workers API")}}
+{{APIRef("Web Notifications")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
-**`notificationclose`** イベントは、 {{domxref("ServiceWorkerRegistration.showNotification()")}} によって生成された表示中の通知をユーザーが閉じたときに発生します。
+**`notificationclose`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、{{domxref("ServiceWorkerRegistration.showNotification()")}} によって生成された表示中の通知をユーザーが閉じたときに発生します。
-メインスレッドや、サービスワーカー以外のワーカーが {{domxref("Notification.Notification","Notification()")}} コンストラクターを使用して生成した通知では、`Notification` オブジェクト自身が {{domxref("Notification/close_event", "close")}} イベントを受け取ります。
-
-> **メモ:** {{domxref("ServiceWorkerGlobalScope")}} 内で {{domxref("Notification.Notification","Notification()")}} コンストラクターを使用して通知を生成しようとすると、エラーが発行されます。
+メインスレッドや、サービスワーカー以外のワーカーが {{domxref("Notification.Notification","Notification()")}} コンストラクターを使用して生成した通知では、{{domxref("Notification/close_event", "close")}} イベントを {{domxref("Notification")}} オブジェクト自身が受け取ります。
このイベントはキャンセル不可で、バブリングしません。
@@ -27,13 +26,13 @@ onnotificationclose = (event) => {};
## イベント型
-{{domxref("NotificationEvent")}} です。 {{domxref("Event")}} を継承しています。
+{{domxref("NotificationEvent")}} です。{{domxref("ExtendableEvent")}} および {{domxref("Event")}} を継承しています。
{{InheritanceDiagram("NotificationEvent")}}
## イベントプロパティ
-_親である {{domxref("Event")}} からプロパティを継承しています_。
+_祖先である {{domxref("ExtendableEvent")}} および {{domxref("Event")}} から継承したプロパティがあります_。
- {{domxref("NotificationEvent.notification")}} {{ReadOnlyInline}}
- : クリックされイベントが発行された通知を表す {{domxref("Notification")}} オブジェクトを返します。
diff --git a/files/ja/web/api/serviceworkerglobalscope/paymentrequest_event/index.md b/files/ja/web/api/serviceworkerglobalscope/paymentrequest_event/index.md
new file mode 100644
index 00000000000000..84b6cb11cd6384
--- /dev/null
+++ b/files/ja/web/api/serviceworkerglobalscope/paymentrequest_event/index.md
@@ -0,0 +1,72 @@
+---
+title: "ServiceWorkerGlobalScope: paymentrequest イベント"
+short-title: paymentrequest
+slug: Web/API/ServiceWorkerGlobalScope/paymentrequest_event
+l10n:
+ sourceCommit: b71d118ffc6d72b77efad9661110fcc9ede464eb
+---
+
+{{APIRef("Payment Handler API")}}{{SeeCompatTable}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
+
+**`paymentrequest`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、{{domxref("PaymentRequest.show()")}} メソッドを介して販売者ウェブサイト上で決済フローが開始された場合に決済アプリ上で発生します。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("paymentrequest", (event) => {});
+
+onpaymentrequest = (event) => {};
+```
+
+## イベント型
+
+{{domxref("PaymentRequestEvent")}} です。{{domxref("ExtendableEvent")}} から継承しています。
+
+{{InheritanceDiagram("PaymentRequestEvent")}}
+
+## 例
+
+{{domxref("PaymentRequest.show()")}} メソッドが呼び出されると、決済アプリのサービスワーカーに決済リクエストイベントが発行されます。このイベントは、決済アプリのサービスワーカー内でリスニングされ、決済プロセスの次の段階に入ります。
+
+```js
+let payment_request_event;
+let resolver;
+let client;
+
+// `self` is the global object in service worker
+self.addEventListener("paymentrequest", async (e) => {
+ if (payment_request_event) {
+ // If there's an ongoing payment transaction, reject it.
+ resolver.reject();
+ }
+ // Preserve the event for future use
+ payment_request_event = e;
+
+ // ...
+});
+```
+
+`paymentrequest` イベントを受信すると、決済アプリは {{domxref("PaymentRequestEvent.openWindow()")}} を呼んで決済ハンドラーウィンドウを開くことができます。決済ハンドラーウィンドウには、顧客が認証をしたり、配送先住所やオプションを選べたり、決済を承認したりできる、決済アプリのインターフェイスが表示されます。
+
+決済が処理されたら、{{domxref("PaymentRequestEvent.respondWith()")}} を使用して、決済結果を販売者のウェブサイトに渡します。
+
+この段階の詳細については、 [Receive a payment request event from the merchant](https://web.dev/articles/orchestrating-payment-transactions#receive-payment-request-event) を参照してください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Payment Handler API", "決済ハンドラー API", "", "nocode")}}
+- [Web-based payment apps overview](https://web.dev/articles/web-based-payment-apps-overview)
+- [Setting up a payment method](https://web.dev/articles/setting-up-a-payment-method)
+- [Life of a payment transaction](https://web.dev/articles/life-of-a-payment-transaction)
+- [決済リクエスト API の使用](/ja/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API)
+- [決済処理の概要](/ja/docs/Web/API/Payment_Request_API/Concepts)
diff --git a/files/ja/web/api/serviceworkerglobalscope/periodicsync_event/index.md b/files/ja/web/api/serviceworkerglobalscope/periodicsync_event/index.md
index 0dcdf109669920..003c4b82c2291c 100644
--- a/files/ja/web/api/serviceworkerglobalscope/periodicsync_event/index.md
+++ b/files/ja/web/api/serviceworkerglobalscope/periodicsync_event/index.md
@@ -1,11 +1,12 @@
---
title: "ServiceWorkerGlobalScope: periodicsync イベント"
+short-title: periodicsync
slug: Web/API/ServiceWorkerGlobalScope/periodicsync_event
l10n:
- sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1
+ sourceCommit: b74d47ab6e99d2bd43ef9638367d9c69fca04402
---
-{{APIRef("Periodic Background Sync")}}{{SeeCompatTable}}
+{{APIRef("Periodic Background Sync")}}{{SeeCompatTable}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
**`periodicsync`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、 {{domxref('PeriodicSyncManager')}}を登録したときに指定された時間間隔で発行されます。
@@ -64,5 +65,5 @@ self.onperiodicsync = (event) => {
## 関連情報
-- [Richer offline experiences with the Periodic Background Sync API](https://web.dev/periodic-background-sync/)
+- [Richer offline experiences with the Periodic Background Sync API](https://developer.chrome.com/docs/capabilities/periodic-background-sync)
- [A Periodic Background Sync demo app](https://webplatformapis.com/periodic_sync/periodicSync_improved.html)
diff --git a/files/ja/web/api/serviceworkerglobalscope/push_event/index.md b/files/ja/web/api/serviceworkerglobalscope/push_event/index.md
index 31e31e0d1584d5..8a735435fd00e7 100644
--- a/files/ja/web/api/serviceworkerglobalscope/push_event/index.md
+++ b/files/ja/web/api/serviceworkerglobalscope/push_event/index.md
@@ -3,10 +3,10 @@ title: "ServiceWorkerGlobalScope: push イベント"
short-title: push
slug: Web/API/ServiceWorkerGlobalScope/push_event
l10n:
- sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+ sourceCommit: 3a91caa0ebbc5131ed75afe0e5168cd5bffc0976
---
-{{APIRef("Push API")}}
+{{APIRef("Push API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
**`push`** イベントは、サービスワーカーがプッシュメッセージを受信したときにサービスワーカーのグローバルスコープ ({{domxref("ServiceWorkerGlobalScope")}} インターフェイスで表現されるもの) に送られます。
diff --git a/files/ja/web/api/serviceworkerglobalscope/pushsubscriptionchange_event/index.md b/files/ja/web/api/serviceworkerglobalscope/pushsubscriptionchange_event/index.md
index 749c5665f306b0..f25b5080ab8e5a 100644
--- a/files/ja/web/api/serviceworkerglobalscope/pushsubscriptionchange_event/index.md
+++ b/files/ja/web/api/serviceworkerglobalscope/pushsubscriptionchange_event/index.md
@@ -3,10 +3,10 @@ title: "ServiceWorkerGlobalScope: pushsubscriptionchange イベント"
short-title: pushsubscriptionchange
slug: Web/API/ServiceWorkerGlobalScope/pushsubscriptionchange_event
l10n:
- sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+ sourceCommit: 4f35a8237ee0842beb9cfef3354e05464ad7ce1a
---
-{{APIRef("Push API")}}
+{{APIRef("Push API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
**`pushsubscriptionchange`** イベントは[グローバルスコープ](/ja/docs/Web/API/ServiceWorkerGlobalScope)としての {{domxref("ServiceWorker")}} へ送信され、アプリケーションの制御の外から起動されたプッシュ通知への加入状況が変化したことを示します。
@@ -30,7 +30,7 @@ onpushsubscriptionchange = (event) => {};
## 使用上のメモ
-加入に関する情報をアプリケーションサーバーと共有する方法を示す例では {{domxref("fetch()")}} を使用する傾向がありますが、これは実際の使用には必ずしも最適な選択ではありません。たとえば、アプリがオフラインの場合は機能しないためです。
+加入に関する情報をアプリケーションサーバーと共有する方法を示す例では {{domxref("WorkerGlobalScope/fetch", "fetch()")}} を使用する傾向がありますが、これは実際の使用には必ずしも最適な選択ではありません。たとえば、アプリがオフラインの場合は機能しないためです。
サービスワーカーとアプリサーバー間で加入情報を同期するのに別の方法を使用することを検討するか、 `fetch()` を使用するコードが、データ交換の試行が失敗した場合を処理するのに十分堅牢であることを確認してください。
@@ -45,7 +45,15 @@ onpushsubscriptionchange = (event) => {};
self.addEventListener(
"pushsubscriptionchange",
(event) => {
- const subscription = swRegistration.pushManager
+ const conv = (val) =>
+ self.btoa(String.fromCharCode.apply(null, new Uint8Array(val)));
+ const getPayload = (subscription) => ({
+ endpoint: subscription.endpoint,
+ publicKey: conv(subscription.getKey("p256dh")),
+ authToken: conv(subscription.getKey("auth")),
+ });
+
+ const subscription = self.registration.pushManager
.subscribe(event.oldSubscription.options)
.then((subscription) =>
fetch("register", {
@@ -54,7 +62,8 @@ self.addEventListener(
"Content-type": "application/json",
},
body: JSON.stringify({
- endpoint: subscription.endpoint,
+ old: getPayload(event.oldSubscription),
+ new: getPayload(subscription),
}),
}),
);
@@ -64,14 +73,14 @@ self.addEventListener(
);
```
-加入の有効期限が切れたことを示す `pushsubscriptionchange` イベントが到着すると、プッシュマネージャーの {{domxref("PushManager.subscribe", "subscribe()")}} メソッドを呼び出して再加入します。返されたプロミスが解決されると、新しい加入を受け取ります。これは、 {{domxref("fetch()")}} 呼び出しを使用してアプリサーバーに配信され、 {{Glossary("JSON")}} 形式で加入の {{domxref("PushSubscription.endpoint", "endpoint")}} の返信をアプリサーバーに送信します。
+加入の有効期限が切れたことを示す `pushsubscriptionchange` イベントが到着すると、プッシュマネージャーの {{domxref("PushManager.subscribe", "subscribe()")}} メソッドを呼び出して再加入します。返されたプロミスが解決されると、新しい加入を受け取ります。これは、 {{domxref("WorkerGlobalScope/fetch", "fetch()")}} 呼び出しを使用してアプリサーバーに配信され、 {{Glossary("JSON")}} 形式で加入の {{domxref("PushSubscription.endpoint", "endpoint")}} の返信をアプリサーバーに送信します。
`onpushsubscriptionchange` イベントハンドラープロパティを使用してイベントハンドラーを設定することもできます。
```js
self.onpushsubscriptionchange = (event) => {
event.waitUntil(
- swRegistration.pushManager
+ self.registration.pushManager
.subscribe(event.oldSubscription.options)
.then((subscription) => {
/* ... */
diff --git a/files/ja/web/api/serviceworkerglobalscope/registration/index.md b/files/ja/web/api/serviceworkerglobalscope/registration/index.md
index 93526ce437ec92..d774c825b04a6f 100644
--- a/files/ja/web/api/serviceworkerglobalscope/registration/index.md
+++ b/files/ja/web/api/serviceworkerglobalscope/registration/index.md
@@ -1,11 +1,12 @@
---
-title: ServiceWorkerGlobalScope.registration
+title: "ServiceWorkerGlobalScope: registration プロパティ"
+short-title: registration
slug: Web/API/ServiceWorkerGlobalScope/registration
l10n:
- sourceCommit: c7aeb96dac3e0ac2864cffe45c02d214ae1a5219
+ sourceCommit: 2ef36a6d6f380e79c88bc3a80033e1d3c4629994
---
-{{APIRef("Service Workers API")}}
+{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
**`registration`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスの読み取り専用プロパティで、サービスワーカーの登録を表す {{domxref("ServiceWorkerRegistration")}} オブジェクトの参照を返します。
@@ -25,6 +26,4 @@ l10n:
- [サービスワーカーの使用](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers)
- [サービスワーカーの基本的なコード例](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker)
-- [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/)
-- {{jsxref("Promise")}}
- [ウェブワーカーの使用](/ja/docs/Web/API/Web_Workers_API/Using_web_workers)
diff --git a/files/ja/web/api/serviceworkerglobalscope/serviceworker/index.md b/files/ja/web/api/serviceworkerglobalscope/serviceworker/index.md
new file mode 100644
index 00000000000000..fe02e32429fefe
--- /dev/null
+++ b/files/ja/web/api/serviceworkerglobalscope/serviceworker/index.md
@@ -0,0 +1,27 @@
+---
+title: "ServiceWorkerGlobalScope: serviceWorker プロパティ"
+short-title: serviceWorker
+slug: Web/API/ServiceWorkerGlobalScope/serviceWorker
+l10n:
+ sourceCommit: 2ef36a6d6f380e79c88bc3a80033e1d3c4629994
+---
+
+{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
+
+**`serviceWorker`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスの読み取り専用プロパティで、サービスワーカーを表す {{domxref("ServiceWorker")}} オブジェクトへの参照を返します。
+
+## 値
+
+{{domxref("ServiceWorker")}} オブジェクトです。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ウェブワーカーの使用](/ja/docs/Web/API/Web_Workers_API/Using_web_workers)
diff --git a/files/ja/web/api/serviceworkerglobalscope/skipwaiting/index.md b/files/ja/web/api/serviceworkerglobalscope/skipwaiting/index.md
index 1c11cd5e0a43f8..2694d2f03d1a98 100644
--- a/files/ja/web/api/serviceworkerglobalscope/skipwaiting/index.md
+++ b/files/ja/web/api/serviceworkerglobalscope/skipwaiting/index.md
@@ -1,13 +1,14 @@
---
-title: ServiceWorkerGlobalScope.skipWaiting()
+title: "ServiceWorkerGlobalScope: skipWaiting() メソッド"
+short-title: skipWaiting()
slug: Web/API/ServiceWorkerGlobalScope/skipWaiting
l10n:
- sourceCommit: 16e398809d62247dbadc89ff4024a0ffa4781f0e
+ sourceCommit: 2ef36a6d6f380e79c88bc3a80033e1d3c4629994
---
-{{APIRef("Service Workers API")}}
+{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
-**`ServiceWorkerGlobalScope.skipWaiting()`** は {{domxref("ServiceWorkerGlobalScope")}} のメソッドで、待機しているサービスワーカーがアクティブになるように強制します。
+**`skipWaiting()`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのメソッドで、待機しているサービスワーカーがアクティブになるように強制します。
このメソッドは、 {{domxref("Clients.claim()")}} と併用することで、現在のクライアントと他のすべてのアクティブなクライアントの両方で、元となるサービスワーカーの更新が即座に有効になるようにします。
@@ -23,7 +24,7 @@ skipWaiting()
### 返値
-{{jsxref("Promise")}} で、直ちに `undefined` に解決します。
+{{jsxref("Promise")}} で、新しくインストールされたサービスワーカーを起動しようとした後、`undefined` で解決します。
## 例
@@ -54,7 +55,5 @@ self.addEventListener("install", (event) => {
- [サービスワーカーの使用](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers)
- [サービスワーカーの基本的なコード例](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker)
-- [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/)
- {{domxref("Clients.claim()")}}
-- {{jsxref("Promise", "プロミス", "", 1)}}
- [ウェブワーカーの使用](/ja/docs/Web/API/Web_Workers_API/Using_web_workers)
diff --git a/files/ja/web/api/serviceworkerglobalscope/sync_event/index.md b/files/ja/web/api/serviceworkerglobalscope/sync_event/index.md
index fd2309dfb0932d..ee920c466e7af9 100644
--- a/files/ja/web/api/serviceworkerglobalscope/sync_event/index.md
+++ b/files/ja/web/api/serviceworkerglobalscope/sync_event/index.md
@@ -1,11 +1,12 @@
---
title: "ServiceWorkerGlobalScope: sync イベント"
+short-title: sync
slug: Web/API/ServiceWorkerGlobalScope/sync_event
l10n:
- sourceCommit: ad50409e75b81d80e24c745cd033ee9f57fdb4ec
+ sourceCommit: 56df677713fecf43ec0eb8862cb91c141aaa0005
---
-{{DefaultAPISidebar("Background Sync")}}
+{{APIRef("Background Sync")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
**`sync`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、 {{domxref('SyncManager')}} にイベントを登録したページ（またはワーカー）が実行されているとき、ネットワーク接続が利用できるようになるとすぐに発行されます。
@@ -23,13 +24,13 @@ onsync = (event) => {};
## イベント型
-{{domxref("SyncEvent")}} です。 {{domxref("Event")}} を継承しています。
+{{domxref("SyncEvent")}} です。{{domxref("ExtendableEvent")}} および {{domxref("Event")}} を継承しています。
{{InheritanceDiagram("SyncEvent")}}
## イベントプロパティ
-_祖先である {{domxref("Event")}} からプロパティを継承しています_。
+_祖先である {{domxref("ExtendableEvent")}} および {{domxref("Event")}} からプロパティを継承しています_。
- {{domxref("SyncEvent.tag")}} {{ReadOnlyInline}}
- : この `SyncEvent` の開発者が定義した識別子を返します。
@@ -66,5 +67,5 @@ self.onsync = (event) => {
## 関連情報
-- [Richer offline experiences with the Periodic Background Sync API](https://web.dev/periodic-background-sync/)
+- [Richer offline experiences with the Periodic Background Sync API](https://developer.chrome.com/docs/capabilities/periodic-background-sync)
- [A Periodic Background Sync demo app](https://webplatformapis.com/periodic_sync/periodicSync_improved.html)
diff --git a/files/ja/web/api/setinterval/index.md b/files/ja/web/api/setinterval/index.md
index 7032fe289170f1..bd46d77512bc96 100644
--- a/files/ja/web/api/setinterval/index.md
+++ b/files/ja/web/api/setinterval/index.md
@@ -1,13 +1,14 @@
---
-title: setInterval()
+title: setInterval() グローバル関数
+short-title: setInterval()
slug: Web/API/setInterval
l10n:
- sourceCommit: c8485a8f94319d289a8892fd261d2fe38b623aa0
+ sourceCommit: bb48907e64eb4bf60f17efd7d39b46c771d220a0
---
-{{APIRef("HTML DOM")}}
+{{APIRef("HTML DOM")}}{{AvailableInWorkers}}
-**`setInterval()`** メソッドは {{domxref("Window")}} および {{domxref("Worker")}} メソッドで提供され、一定の遅延間隔を置いて関数やコードスニペットを繰り返し呼び出します。
+**`setInterval()`** メソッドは {{domxref("Window")}} および {{domxref("WorkerGlobalScope")}} インターフェイスで提供され、一定の遅延間隔を置いて関数やコードスニペットを繰り返し呼び出します。
このメソッド、インターバルを一意に識別するインターバル ID を返します。よって {{domxref("clearInterval", "clearInterval()")}} を呼び出して、後でインターバルを削除できます。
@@ -19,9 +20,9 @@ setInterval(code, delay)
setInterval(func)
setInterval(func, delay)
-setInterval(func, delay, arg0)
-setInterval(func, delay, arg0, arg1)
-setInterval(func, delay, arg0, arg1, /* … ,*/ argN)
+setInterval(func, delay, arg1)
+setInterval(func, delay, arg1, arg2)
+setInterval(func, delay, arg1, arg2, /* …, */ argN)
```
### 引数
@@ -29,20 +30,24 @@ setInterval(func, delay, arg0, arg1, /* … ,*/ argN)
- `func`
- : `delay` ミリ秒が経過するたびに実行する{{jsxref("function", "関数")}}です。最初の実行は `delay` ミリ秒後に行われます。
- `code`
- - : 関数の代わりに文字列を含める構文も許容されており、 `delay` ミリ秒が経過するたびに文字列をコンパイルして実行します。 {{jsxref("Global_Objects/eval", "eval()")}} の使用にリスクがあるのと同じ理由で、この構文は**推奨しません**。
+ - : 関数の代わりに文字列を含める構文も許容されており、 `delay` ミリ秒が経過するたびに文字列をコンパイルして実行します。
+ この構文は**推奨しません**。{{jsxref("Global_Objects/eval", "eval()")}} の使用にセキュリティ上のリスクがあるのと同じ理由です。
- `delay` {{optional_inline}}
- - : 指定した関数またはコードを実行する前にタイマーが待つべき時間をミリ秒 (1/1000 秒) 単位で指定します。引数が 10 より小さい場合は、10 を使用します。実際の遅延が長くなることがあります。例えば[遅延の制約](#遅延の制約)をご覧ください。
-- `arg0, …, argN` {{optional_inline}}
+ - : 指定した関数またはコードを実行する前にタイマーが待つべき時間をミリ秒 (1/1000 秒) 単位で指定します。指定されなかった場合の既定値は 0 です。
+ `delay` 値で許される範囲についての詳細は、[遅延の制約](#遅延の制約)をご覧ください。
+- `arg1`, …, `argN` {{optional_inline}}
- : タイマーが満了したときに、 _func_ で指定した関数に渡す追加の引数です。
### 返値
返値 `intervalID` は 0 ではない正の整数値で、 `setInterval()` を呼び出して作成したタイマーを識別します。この値を {{domxref("clearInterval()")}} へ渡せば、インターバルを取り消すことができます。
-`setInterval()` と {{domxref("setTimeout()")}} は同じ ID プールを共有しており、 `clearInterval()` と {{domxref("clearTimeout", "clearTimeout()")}} は技術的に入れ替えて使用できることを意識すると役に立つでしょう。ただし明快さのために、コードを整備するときは混乱を避けるため、常に一致させるようにするべきです。
+`setInterval()` と {{domxref("setTimeout()")}} は同じ ID プールを共有しており、 `clearInterval()` と {{domxref("clearTimeout", "clearTimeout()")}} は技術的に入れ替えて使用できることを意識すると役に立つでしょう。
+ただし明快さのために、コードを整備するときは混乱を避けるため、常に一致させるようにするべきです。
> [!NOTE]
-> 引数 `delay` は、符号付き 32 ビット整数に変換されます。 IDL における符号付き整数の定義によって、`delay` は事実上 2147483647ms に制限されます。
+> 引数 `delay` は、符号付き 32 ビット整数に変換されます。
+> IDL における符号付き整数の定義によって、`delay` は事実上 2147483647ms に制限されます。
## 例
@@ -122,7 +127,8 @@ document.getElementById("stop").addEventListener("click", stopTextColor);
## "this" 問題
-`setInterval()` に（もっと言うと他のどんな関数でも）メソッドを渡すと、間違った [`this`](/ja/docs/Web/JavaScript/Reference/Operators/this) の値で呼び出されることがあります。この問題は [JavaScript リファレンス](/ja/docs/Web/JavaScript/Reference/Operators/this#オブジェクトのメソッドとして)で詳しく説明しています。
+`setInterval()` に（もっと言うと他のどんな関数でも）メソッドを渡すと、間違った [`this`](/ja/docs/Web/JavaScript/Reference/Operators/this) の値で呼び出されることがあります。
+この問題は [JavaScript リファレンス](/ja/docs/Web/JavaScript/Reference/Operators/this#コールバック)で詳しく説明しています。
### 解説
@@ -139,10 +145,11 @@ myArray.myMethod(); // "zero,one,two" と表示
myArray.myMethod(1); // "one" と表示
setTimeout(myArray.myMethod, 1000); // "[object Window]" と 1 秒後に表示
setTimeout(myArray.myMethod, 1500, "1"); // "undefined" と 1.5 秒後に表示
-// passing the 'this' object with .call won't work
+
+// Passing the 'this' object with .call won't work
// because this will change the value of this inside setTimeout itself
-// while we want to change the value of this inside myArray.myMethod
-// in fact, it will be an error because setTimeout code expects this to be the window object:
+// while we want to change the value of this inside myArray.myMethod.
+// In fact, it will be an error because setTimeout code expects this to be the window object:
setTimeout.call(myArray, myArray.myMethod, 2000); // エラー: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
setTimeout.call(myArray, myArray.myMethod, 2500, 2); // 同じエラー
```
@@ -196,7 +203,7 @@ IE に対応する必要がある場合は、[`Function.prototype.bind()`](/ja/d
## 関連情報
- [core-js にある `setInterval` のポリフィルで、コールバックに引数を渡すことができるもの](https://github.com/zloirock/core-js#settimeout-and-setinterval)
-- {{domxref("setTimeout")}}
-- {{domxref("clearTimeout")}}
-- {{domxref("clearInterval")}}
-- {{domxref("window.requestAnimationFrame")}}
+- {{domxref("setTimeout()")}}
+- {{domxref("clearTimeout()")}}
+- {{domxref("clearInterval()")}}
+- {{domxref("window.requestAnimationFrame()")}}
diff --git a/files/ja/web/api/settimeout/index.md b/files/ja/web/api/settimeout/index.md
index 2087794e2fec07..1e92b92e070af4 100644
--- a/files/ja/web/api/settimeout/index.md
+++ b/files/ja/web/api/settimeout/index.md
@@ -1,11 +1,12 @@
---
-title: setTimeout()
+title: setTimeout() グローバル関数
+short-title: setTimeout()
slug: Web/API/setTimeout
l10n:
- sourceCommit: c09b8e9dd0022a33cf84355704ca281d6a5f29f5
+ sourceCommit: 8acf54a3eb1536134a39896c3ceb1578f9b4eea7
---
-{{APIRef("HTML DOM")}}
+{{APIRef("HTML DOM")}}{{AvailableInWorkers}}
グローバルの **`setTimeout()`** メソッドは、時間切れになると関数または指定されたコードの断片を実行するタイマーを設定します。
@@ -19,7 +20,7 @@ setTimeout(functionRef)
setTimeout(functionRef, delay)
setTimeout(functionRef, delay, param1)
setTimeout(functionRef, delay, param1, param2)
-setTimeout(functionRef, delay, param1, param2, /* … ,*/ paramN)
+setTimeout(functionRef, delay, param1, param2, /* …, */ paramN)
```
### 引数
@@ -44,11 +45,11 @@ setTimeout(functionRef, delay, param1, param2, /* … ,*/ paramN)
返される `timeoutID` は正の整数値で、 `setTimeout()` を呼び出して作成したタイマーを識別します。この値を {{domxref("clearTimeout","clearTimeout()")}} へ渡すことで、タイムアウトを取り消すことができます。
-`timeoutID` の値は、同じオブジェクト (ウィンドウやワーカー) において、後に `setTimeout()` や `setInterval()` を呼び出しても再使用されないことが保証されています。ただし、別なオブジェクトでは別の ID プールを使用します。
+`timeoutID` の値は、同じオブジェクト（ウィンドウやワーカー）においてタイマーが有効な間、後に `setTimeout()` や `setInterval()` を呼び出しても再使用されないことが保証されています。ただし、別なオブジェクトでは別の ID プールを使用します。
## 解説
-タイムアウトは、 {{domxref("clearTimeout()")}} を使用して取り消すことができます。
+タイムアウトは、{{domxref("clearTimeout()")}} を使用して取り消すことができます。
関数を繰り返して（例えば _N_ ミリ秒ごとに）呼び出すには、 {{domxref("setInterval()")}} を使用することを検討してください。
@@ -62,7 +63,7 @@ setTimeout(() => {
}, "1000");
```
-しかし、多くの場合、暗黙の型強制は予期しない、驚くべき結果をもたらす可能性があります。例えば、以下のコードを実行すると、文字列 `"1 second"` は最終的に数字 `0` に強制され、その結果、コードは遅延ゼロで直ちに実行されます。
+しかし、多くの場合、暗黙の型強制は予期しない、驚くべき結果をもたらす可能性があります。例えば、以下のコードを実行すると、文字列 `"1 second"` は最終的に数字 `0` に変換され、その結果、コードは遅延ゼロで直ちに実行されます。
```js example-bad
setTimeout(() => {
@@ -109,9 +110,9 @@ setTimeout(() => {
### "this" の問題
-`setTimeout()` にメソッドを渡すと、 `this` が期待とは異なる値で起動されることがあります。一般的な問題は [JavaScript リファレンス](/ja/docs/Web/JavaScript/Reference/Operators/this#オブジェクトのメソッドとして)で詳細に説明されています。
+`setTimeout()` にメソッドを渡すと、 `this` が期待とは異なる値で起動されることがあります。一般的な問題は [JavaScript リファレンス](/ja/docs/Web/JavaScript/Reference/Operators/this#コールバック)で詳細に説明されています。
-`setTimeout()` によって実行されるコードは、 `setTimeout` が呼び出された関数とは別の実行コンテキスト内から呼び出されます。呼び出された関数に `this` キーワードを設定する通常の規則を適用して、呼び出しあるいは `bind` で `this` を設定しなければ、厳格モードでなければ `global` (または `window`)、厳格モードでは undefined になります。これは、 `setTimeout` が呼び出された関数の `this` 値と同じにはなりません。
+`setTimeout()` によって実行されるコードは、`setTimeout` が呼び出された関数とは別の実行コンテキストから呼び出されます。呼び出された関数で `this` キーワードを設定する際の通常のルールが適用され、`this` を呼び出し時に設定していない場合、または `bind` で設定していない場合、`window`（または `global` ）オブジェクトが既定で使用されます。これは、[厳格モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)であっても同様です。これは、`setTimeout` を呼び出した関数の `this` の値と同じではありません。
以下の例をご覧ください。
@@ -199,7 +200,7 @@ setTimeout(() => {
}, 500);
```
-{{domxref("setTimeout()")}} に渡した文字列はグローバルコンテキストで評価されます。そのため、{{domxref("setTimeout()")}} が呼び出されたコンテキストのローカルシンボルは、文字列を評価したコードからは利用できません。
+`setTimeout()` に渡した文字列はグローバルコンテキストで評価されます。そのため、`setTimeout()` が呼び出されたコンテキストのローカルシンボルは、文字列を評価したコードからは利用できません。
### 遅延が指定値より長い理由
@@ -212,9 +213,17 @@ setTimeout(() => {
この例では、 `setTimeout` の呼び出しを `0` ミリ秒の遅延でネストし、ハンドラーが呼び出されるたびに遅延時間を記録しています。最初の 4 回は遅延が約 0 ミリ秒、その後は約 4 ミリ秒になります。
```html
-
-
+
+
```
```js
@@ -222,10 +231,9 @@ let last = 0;
let iterations = 10;
function timeout() {
- // log the time of this call
+ // この呼び出しの時刻をログ出力
logline(new Date().getMilliseconds());
-
- // if we are not finished, schedule the next call
+ // まだ終わっていない場合は、次の呼び出しをスケジュール
if (iterations-- > 0) {
setTimeout(timeout, 0);
}
@@ -238,36 +246,47 @@ function run() {
log.removeChild(log.lastElementChild);
}
- // initialize iteration count and the starting timestamp
+ // 反復処理の回数と開始タイムスタンプを初期化
iterations = 10;
last = new Date().getMilliseconds();
-
// start timer
setTimeout(timeout, 0);
}
-function pad(number) {
- return number.toString().padStart(3, "0");
-}
-
function logline(now) {
- // log the last timestamp, the new timestamp, and the difference
- const newLine = document.createElement("pre");
- newLine.textContent = `${pad(last)} ${pad(now)} ${
- now - last
- }`;
- document.getElementById("log").appendChild(newLine);
+ // 最後のタイムスタンプ、新しいタイムスタンプ、および差分をログ出力
+ const tableBody = document.getElementById("log");
+ const logRow = tableBody.insertRow();
+ logRow.insertCell().textContent = last;
+ logRow.insertCell().textContent = now;
+ logRow.insertCell().textContent = now - last;
last = now;
}
document.querySelector("#run").addEventListener("click", run);
```
+```css hidden
+* {
+ font-family: monospace;
+}
+th,
+td {
+ padding: 0 10px 0 10px;
+ text-align: center;
+ border: 1px solid;
+}
+table {
+ border-collapse: collapse;
+ margin-top: 10px;
+}
+```
+
{{EmbedLiveSample("Nested_timeouts", 100, 420)}}
#### アクティブでないタブのタイムアウト
-バックグラウンドのタブによる負荷（および関連するバッテリーの使用量）を軽減するために、ブラウザはアクティブでないタブの最小タイムアウト時間を強制します。また、ページがウェブオーディオ API の {{domxref("AudioContext")}} を使用して音声を再生している場合、このタイムアウトが免除されることもあります。
+バックグラウンドのタブによる負荷（および関連するバッテリーの使用量）を軽減するために、ブラウザーはアクティブでないタブの最小タイムアウト時間を強制します。また、ページがウェブオーディオ API の {{domxref("AudioContext")}} を使用して音声を再生している場合、このタイムアウトが免除されることもあります。
この仕様はブラウザーに依存します。
@@ -284,7 +303,8 @@ Firefox は、トラッキングスクリプトとして認識されたスクリ
#### タイムアウトの遅延
-ページ（または OS やブラウザー）が他のタスクでビジー状態場合、タイムアウトが予想より遅れて発生することがあります。注意すべき重要なケースとして、 `setTimeout()` を呼び出したスレッドが終了するまで、関数やコードスニペットを実行することができないことがあります。例えば、
+ページ（または OS やブラウザー）が他のタスクでビジー状態場合、タイムアウトが予想より遅れて発生することがあります。
+注意すべき重要なケースとして、 `setTimeout()` を呼び出したスレッドが終了するまで、関数やコードスニペットを実行することができないことがあります。例えば、
```js
function foo() {
@@ -296,7 +316,7 @@ console.log("After setTimeout");
このコードは、コンソールへ以下のように出力します。
-```
+```plain
After setTimeout
foo has been called
```
@@ -313,7 +333,22 @@ Firefox は現在のタブがロードされている間、 `setTimeout()` タ
### 最大の遅延時間
-Internet Explorer、Chrome、Safari、Firefox を含むブラウザーは、内部で遅延時間を 32 ビット符号付き整数値で保存します。このため 2,147,483,647 ms (約 24.8 日) より大きな遅延時間を使用すると整数値がオーバーフローして、その結果直ちに実行されるタイムアウトになります。
+ブラウザーは遅延時間を内部的に 32 ビット符号付き整数として格納するため、
+2,147,483,647 ミリ秒(約 24.8 日)を超える遅延時間を使用すると、整数オーバーフローが発生します。例えば、次のコードでは、
+
+```js
+setTimeout(() => console.log("hi!"), 2 ** 32 - 5000);
+```
+
+…タイムアウトが即座に実行される結果となります（`2**32 - 5000` が負の数にオーバーフローするため）。一方、次のコードのようにすると、
+
+```js
+setTimeout(() => console.log("hi!"), 2 ** 32 + 5000);
+```
+
+…タイムアウトは約5秒後に実行されます。
+
+**メモ**: これは、Node.js の `setTimeout` の動作と一致しません。Node.js では、2,147,483,647 ミリ秒を超えるタイムアウトは即座に実行されます。
## 例
diff --git a/files/ja/web/api/shadowroot/adoptedstylesheets/index.md b/files/ja/web/api/shadowroot/adoptedstylesheets/index.md
new file mode 100644
index 00000000000000..e6104bba95493c
--- /dev/null
+++ b/files/ja/web/api/shadowroot/adoptedstylesheets/index.md
@@ -0,0 +1,92 @@
+---
+title: "ShadowRoot: adoptedStyleSheets プロパティ"
+short-title: adoptedStyleSheets
+slug: Web/API/ShadowRoot/adoptedStyleSheets
+l10n:
+ sourceCommit: 4f35a8237ee0842beb9cfef3354e05464ad7ce1a
+---
+
+{{APIRef("CSSOM")}}
+
+**`adoptedStyleSheets`** は {{domxref("ShadowRoot")}} インターフェイスのプロパティで、構築されたスタイルシートの配列を設定し、シャドウ DOM サブツリーで使用します。
+
+> [!NOTE]
+> 構築されたスタイルシートは、[`CSSStyleSheet()` コンストラクター](/ja/docs/Web/API/CSSStyleSheet/CSSStyleSheet)を使用してプログラムで作成されたスタイルシートです（ユーザーエージェントがスクリプトからスタイルシートをインポートする際に作成するスタイルシート、{{HTMLElement('style')}} と {{CSSXref('@import')}} を使用してインポートするスタイルシート、または {{HTMLElement('link')}} を使用してリンクするスタイルシートと比較すると）。
+
+このスタイルシートは、複数の {{domxref("ShadowRoot")}} インスタンスや、親文書にも（ {{domxref("Document.adoptedStyleSheets")}} プロパティを使用して）適用することができます。
+適用されたスタイルシートを変更すると、適用されたすべてのオブジェクトに影響します。
+
+`adoptedStyleSheets` プロパティ内のスタイルシートは、シャドウ DOM の他のスタイルシートとともに考慮されます。
+そのため、最終的な計算結果の CSS を決定する目的では、シャドウ DOM 内の他のスタイルシート ([`ShadowRoot.styleSheets`](/ja/docs/Web/API/ShadowRoot/styleSheets)) の後に追加されたものとみなされます。
+
+[`CSSStyleSheet()` コンストラクター](/ja/docs/Web/API/CSSStyleSheet/CSSStyleSheet)を使用して作成し、シャドウルートと同じ親文書 ({{domxref("Document")}}) 内のもののみ、このスタイルシートを適用することができます。
+
+## 値
+
+値は {{domxref("CSSStyleSheet")}} インスタンスの配列であり、シャドウルートの親文書 ({{domxref("Document")}}) のコンテキスト内で {{domxref("CSSStyleSheet.CSSStyleSheet()", "CSSStyleSheet()")}} コンストラクターを使用して作成されたものでなければなりません。
+
+配列を変更する必要がある場合は、その場で変更する `push()` のような方法を使用します。{{domxref("CSSStyleSheet")}} インスタンス自体も変更することができ、この変更は、このスタイルシートが採用されている場所すべてに適用されます。
+
+仕様書の以前のバージョンでは、配列は変更することができなかったため、新しいスタイルシートを追加する唯一の方法は、`adoptedStyleSheets` に新しい配列を割り当てることでした。
+
+## 例
+
+### スタイルシートの適用
+
+下記のコードでは、最初のスタイルシートが構築され、その後、{{domxref("CSSStyleSheet.replaceSync()")}} が呼び出されて、シートにルールが追加されます。
+
+```js
+// 空の「構築された」スタイルシートを作成
+const sheet = new CSSStyleSheet();
+// シートにルールを適用
+sheet.replaceSync("a { color: red; }");
+```
+
+次に {{domxref("ShadowRoot")}} を作成し、シートオブジェクトを配列内の `adoptedStyleSheets` に渡します。
+
+```js
+// 文書内の要素を作成し、次にシャドウルートを作成
+const node = document.createElement("div");
+const shadow = node.attachShadow({ mode: "open" });
+
+// シートをシャドウ DOM に適用
+shadow.adoptedStyleSheets = [sheet];
+```
+
+このスタイルシートは、配列に追加した後でも変更することができます。
+次の例では、{{domxref("CSSStyleSheet.insertRule()")}} を使用して、同じスタイルシートに新しいルールを追加しています。
+
+```js
+sheet.insertRule("* { background-color: blue; }");
+// The document will now have blue background.
+```
+
+### 新しいスタイルシートの追加
+
+`adoptedStyleSheets.push()` を使用することで、新しいスタイルシートを文書またはシャドウルートに追加することができます。
+
+```js
+const extraSheet = new CSSStyleSheet();
+extraSheet.replaceSync("p { color: green; }");
+
+// 新しいシートに結合する
+shadow.adoptedStyleSheets.push(extraSheet);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [Constructable Stylesheets](https://web.dev/articles/constructable-stylesheets) (web.dev)
+- [シャドウ DOM の使用](/ja/docs/Web/API/Web_components/Using_shadow_DOM)
+- [`CSSStyleSheet()` コンストラクター](/ja/docs/Web/API/CSSStyleSheet/CSSStyleSheet)
+- {{domxref("CSSStyleSheet.replaceSync()")}}
+- {{domxref("CSSStyleSheet.replace()")}}
+- {{domxref("CSSStyleSheet.insertRule()")}}
+- {{domxref("CSSStyleSheet.deleteRule()")}}
diff --git a/files/ja/web/api/shadowroot/clonable/index.md b/files/ja/web/api/shadowroot/clonable/index.md
new file mode 100644
index 00000000000000..7aac326113b640
--- /dev/null
+++ b/files/ja/web/api/shadowroot/clonable/index.md
@@ -0,0 +1,41 @@
+---
+title: "ShadowRoot: clonable プロパティ"
+short-title: clonable
+slug: Web/API/ShadowRoot/clonable
+l10n:
+ sourceCommit: 26091e4af9c73bb6c5d1466df5070c949498fdbd
+---
+
+{{APIRef("Shadow DOM")}}
+
+**`clonable`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、シャドウルートが複製可能であれば `true` を返し、そうでなければ `false` を返します。
+
+値が `true` の場合、{{domxref("Node.cloneNode()")}} または {{domxref("Document.importNode()")}} で複製されたシャドウホストにはシャドウルートのコピーが含まれます。
+
+既定値は `false` です。
+`true` に設定するには、{{domxref("Element.attachShadow()")}} メソッドの `clonable` オプションを使用するか、またはシャドウルートを宣言的に関連付ける使用される `` 要素の [`shadowrootclonable`](/ja/docs/Web/HTML/Element/template#shadowrootclonable) 属性を設定します。
+
+## 値
+
+シャドウルートが複製可能であれば `true`、そうでなければ `false` です。
+
+## 例
+
+```js
+const host = document.createElement("div");
+const shadowRoot = host.attachShadow({
+ mode: "open",
+ clonable: true,
+});
+
+shadowRoot.clonable;
+// true
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/shadowroot/delegatesfocus/index.md b/files/ja/web/api/shadowroot/delegatesfocus/index.md
index 3283d521ff23d1..9ae871c425b859 100644
--- a/files/ja/web/api/shadowroot/delegatesfocus/index.md
+++ b/files/ja/web/api/shadowroot/delegatesfocus/index.md
@@ -1,28 +1,39 @@
---
-title: ShadowRoot.delegatesFocus
+title: "ShadowRoot: delegatesFocus プロパティ"
+short-title: delegatesFocus
slug: Web/API/ShadowRoot/delegatesFocus
+l10n:
+ sourceCommit: 26091e4af9c73bb6c5d1466df5070c949498fdbd
---
{{APIRef("Shadow DOM")}}
**`delegatesFocus`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、シャドウルートがフォーカスを委任する場合は `true`、そうでなければ `false` を返します。
-`true` の場合、シャドウ DOM のフォーカスを受け取れない部分がクリックさると、フォーカスを受け取ることができる最初の部分がフォーカスを受け取り、シャドウホストが `:focus` のスタイルになります。
+`true` の場合、シャドウ DOM のフォーカスを受け取れない部分がクリックされるか、ホスト要素に対して `.focus()` が呼び出されると、フォーカスを受け取ることができる最初の部分がフォーカスを受け取り、シャドウホストが `:focus` のスタイルになります。
-このプロパティの値は {{domxref("Element.attachShadow()")}}) に渡されたオブジェクトの `delegatesFocus` プロパティを使用して設定します。
+キーボードのユーザー（スクリーンリーダーを使用するユーザーも含む）にとっては、フォーカスが特に重要です。 `delegatesFocus` の既定の動作は、最初のフォーカス可能な要素にフォーカスを当てるというものです。これは、その要素がタブ順序の一部として意図されていない場合（例えば、`tabindex="-1"` の要素）や、より「重要な」フォーカス可能な要素に初期フォーカスを当てるべき場合（例えば、最初のテキストフィールドをその前にある「閉じる」ボタンより優先させるなど）には望ましくない場合があります。このような場合、初期フォーカスを受け取る要素に `autofocus` 属性を指定することができます。 `autofocus` 属性は、アクセシビリティに関する課題を引き起こす可能性があるため、使用する際には注意が必要です。例えば、DOM の順序が後にある要素にフォーカスが設定されているために気づかないような重要なコンテンツを回避するといった課題です。
+
+このプロパティ値は、元々、{{domxref("Element.attachShadow()")}} に渡すオブジェクトの `delegatesFocus` プロパティを使用するか、またはシャドウルートを宣言的に作成する際の [``](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootdelegatesfocus`](/ja/docs/Web/HTML/Element/template#shadowrootclonable) 属性を使用して設定します。
### 値
+シャドウルートがフォーカスを譲る場合は `true`、そうでない場合は `false`。
+
+## 例
+
```js
-let customElem = document.querySelector('my-shadow-dom-element');
+let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;
- ...
+// ...
// Does it delegate focus?
let hostElem = shadow.delegatesFocus;
```
+`` のドキュメント内の[フォーカスのｐ譲渡を伴う宣言的シャドウ DOM](/ja/docs/Web/HTML/Element/template#フォーカスを譲渡を伴う宣言的シャドウ_dom)の例では、フォーカスを譲ることの効果が示されています。
+
## 仕様書
{{Specifications}}
diff --git a/files/ja/web/api/shadowroot/fullscreenelement/index.md b/files/ja/web/api/shadowroot/fullscreenelement/index.md
index c99e18aa67a36b..60ae26ce4792c5 100644
--- a/files/ja/web/api/shadowroot/fullscreenelement/index.md
+++ b/files/ja/web/api/shadowroot/fullscreenelement/index.md
@@ -1,19 +1,16 @@
---
-title: ShadowRoot.fullscreenElement
+title: "ShadowRoot: fullscreenElement プロパティ"
+short-title: fullscreenElement
slug: Web/API/ShadowRoot/fullscreenElement
+l10n:
+ sourceCommit: f2f9346c0c0e9f6676f2df9f1850933e274401de
---
{{APIRef("Shadow DOM")}}
**`fullscreenElement`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、現在全画面モードで表示されているシャドウツリー内の要素を返します。
-## 構文
-
-```js
-shadowRoot.fullscreenElement;
-```
-
-### 値
+## 値
現在全画面モードで表示されている {{domxref('Element')}}、または全画面モードの要素がなければ `null` を返します。
diff --git a/files/ja/web/api/shadowroot/getanimations/index.md b/files/ja/web/api/shadowroot/getanimations/index.md
index bd8c45e67d9aad..d0b246395b89b1 100644
--- a/files/ja/web/api/shadowroot/getanimations/index.md
+++ b/files/ja/web/api/shadowroot/getanimations/index.md
@@ -1,16 +1,19 @@
---
-title: ShadowRoot.getAnimations()
+title: "ShadowRoot: getAnimations() メソッド"
+short-title: getAnimations()
slug: Web/API/ShadowRoot/getAnimations
+l10n:
+ sourceCommit: 76717f752447b6eef25bf29c12272e407ee5cb6b
---
{{APIRef("Web Animations")}}
-**`getAnimations()`** は {{domxref("ShadowRoot")}} のメソッドで、ターゲット要素がシャドウツリーの子孫である、現在有効なすべての {{domxref("Animation")}} オブジェクトの配列を返します。この配列には [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations)、[CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions)、[ウェブアニメーション](/ja/docs/Web/API/Web_Animations_API) が含まれています。
+**`getAnimations()`** は {{domxref("ShadowRoot")}} のメソッドで、ターゲット要素がシャドウツリーの子孫である、現在有効なすべての {{domxref("Animation")}} オブジェクトの配列を返します。この配列には [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations)、[CSS トランジション](/ja/docs/Web/CSS/CSS_transitions)、[ウェブアニメーション](/ja/docs/Web/API/Web_Animations_API) が含まれています。
## 構文
-```js
-getAnimations();
+```js-nolint
+getAnimations()
```
### 引数
@@ -28,7 +31,7 @@ getAnimations();
```js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;
-shadow.getAnimations().forEach(function (animation) {
+shadow.getAnimations().forEach((animation) => {
animation.playbackRate *= 0.5;
});
```
@@ -44,8 +47,8 @@ shadow.getAnimations().forEach(function (animation) {
## 関連情報
- [Web Animations API](/ja/docs/Web/API/Web_Animations_API)
-- [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations)
-- [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions)
+- [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations)
+- [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions)
- {{domxref("Element.getAnimations()")}} - 単一の
{{domxref("Element")}} とその配下のアニメーションのみを読み取ります。
- {{domxref("Animation")}}
diff --git a/files/ja/web/api/shadowroot/gethtml/index.md b/files/ja/web/api/shadowroot/gethtml/index.md
new file mode 100644
index 00000000000000..1f9a491ea6e537
--- /dev/null
+++ b/files/ja/web/api/shadowroot/gethtml/index.md
@@ -0,0 +1,58 @@
+---
+title: "ShadowRoot: getHTML() メソッド"
+short-title: getHTML()
+slug: Web/API/ShadowRoot/getHTML
+l10n:
+ sourceCommit: 4558d208395a5b1df4db44b0c8ef4e9a0f8adbbf
+---
+
+{{APIRef("DOM")}}
+
+**`getHTML()`** は {{domxref("ShadowRoot")}} インターフェイスのメソッドで、シャドウルートの DOM を HTML 文字列にシリアライズするために使用します。
+
+このメソッドは、options 引数を提供しており、シャドウルートである子ノードのシリアライズができるようにします。options を使用すると、{{domxref("ShadowRoot/serializable","シリアライズ可能","",1)}}なネストされたシャドウルートを含めることができます。また、{{domxref("ShadowRoot")}} オブジェクトの指定された配列を含めることもできます。この配列は、開いているものも閉じているものも含みます。
+
+引数がない場合、シャドウルートである子ノードはシリアライズされず、このメソッドは {{domxref("Element.innerHTML")}} の値を読み取る場合と同じ動作をします。
+
+## 構文
+
+```js-nolint
+const html = shadowRoot.getHTML(options)
+```
+
+### 引数
+
+- `options` {{optional_inline}}
+
+ - : 次のオプションのパラメーターを持つオプションオブジェクトです。
+
+ - `serializableShadowRoots`
+ - : 論理値で、[シリアライズ可能](/ja/docs/Web/API/ShadowRoot/serializable)なシャドウルートを含めるかどうかを指定します。
+ 既定値は `false` です。
+ - `shadowRoots`
+ - : シリアライズする {{domxref("ShadowRoot")}} オブジェクトの配列です。
+ これらは、`serializable` としてマークされているかどうか、または開かれているか閉じられたかに関係なく含まれます。
+ 既定値は空の配列です。
+
+### 返値
+
+文字列で、シャドウルートの HTML シリアライズを表します。
+
+### 例外
+
+なし。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Element.getHTML()")}}
+- {{domxref("Element.innerHTML")}}
+- {{domxref("ShadowRoot.setHTMLUnsafe()")}}
+- {{domxref("Element.setHTMLUnsafe()")}}
diff --git a/files/ja/web/api/shadowroot/host/index.md b/files/ja/web/api/shadowroot/host/index.md
index b12a9737c66b44..156645cf3a3f4e 100644
--- a/files/ja/web/api/shadowroot/host/index.md
+++ b/files/ja/web/api/shadowroot/host/index.md
@@ -1,29 +1,26 @@
---
-title: ShadowRoot.host
+title: "ShadowRoot: host プロパティ"
+short-title: host
slug: Web/API/ShadowRoot/host
+l10n:
+ sourceCommit: 584e1d86cc4d770f43b32ec62613a4840d2821db
---
{{APIRef("Shadow DOM")}}
-**`host`** は {{domxref("ShadowRoot")}} の読み取り専用プロパティで、 `ShadowRoot` が取り付けられている DOM 要素の参照を返します。
+**`host`** は {{domxref("ShadowRoot")}} の読み取り専用プロパティで、 `ShadowRoot` が装着されている DOM 要素の参照を返します。
-## 構文
-
-```js
-const someElement = shadowRoot.host;
-```
-
-### 値
+## 値
DOM の {{domxref('Element')}} です。
## 例
```js
-let customElem = document.querySelector('my-shadow-dom-element');
+let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;
- ...
+// ...
// 後で、元のホスト要素を返す
let hostElem = shadow.host;
@@ -36,3 +33,10 @@ let hostElem = shadow.host;
## ブラウザーの互換性
{{Compat}}
+
+## 関連情報
+
+- HTML の [`part`](/ja/docs/Web/HTML/Global_attributes#part) および [`exportparts`](/ja/docs/Web/HTML/Global_attributes#exportparts) 属性
+- HTML の {{HTMLelement("template")}} および {{HTMLElement("slot")}} 要素
+- CSS の {{CSSXref(":host")}}, {{CSSXref(":host_function", ":host()")}}, {{CSSXref(":host-context", ":host-context()")}} 擬似クラス
+- CSS の {{CSSXref("::part")}} および {{CSSXref("::slotted")}} 擬似クラス
diff --git a/files/ja/web/api/shadowroot/index.md b/files/ja/web/api/shadowroot/index.md
index 2fc6c99642de53..95902a04976d28 100644
--- a/files/ja/web/api/shadowroot/index.md
+++ b/files/ja/web/api/shadowroot/index.md
@@ -2,7 +2,7 @@
title: ShadowRoot
slug: Web/API/ShadowRoot
l10n:
- sourceCommit: 9091d8b54a600e5b751c97b1e47261324ef475d8
+ sourceCommit: 4558d208395a5b1df4db44b0c8ef4e9a0f8adbbf
---
{{APIRef('Shadow DOM')}}
@@ -20,8 +20,10 @@ l10n:
- {{domxref("ShadowRoot.adoptedStyleSheets")}}
- : シャドウ DOM のサブツリーで使用するために構築されたスタイルシートの配列を追加します。
これらは、同じ親 {{domxref("Document")}} ノードを共有する他の DOM サブツリーや、文書自身と共有されることがあります。
+- {{domxref("ShadowRoot.clonable")}} {{ReadOnlyInline}}
+ - : 論理値で、シャドウルートがクローン可能であるかどうかを示します。
- {{domxref("ShadowRoot.delegatesFocus")}} {{ReadOnlyInline}}
- - : シャドウが取り付けられたときに `delegatesFocus` が設定されていたかどうかを示す論理値を返します（{{domxref("Element.attachShadow()")}} を参照）。
+ - : 論理値で、フォーカスできないノードが選択された場合に、シャドウルートがフォーカスを譲るかどうかを示します。
- {{DOMxRef("ShadowRoot.fullscreenElement")}} {{ReadOnlyInline}}
- : このシャドウツリーで現在全画面モードになっている要素です。
- {{domxref("ShadowRoot.host")}} {{ReadOnlyInline}}
@@ -36,6 +38,12 @@ l10n:
- {{DOMxRef("ShadowRoot.pointerLockElement")}} {{ReadOnlyInline}}
- : ポインターがロックされている間、マウスイベントのターゲットとして設定されている {{DOMxRef('Element')}} を返します。
ロックが保留中か、ポインターがロックされていないか、ターゲットがほかのツリーにある場合は `null` を返します。
+- {{DOMxRef("ShadowRoot.serializable")}} {{ReadOnlyInline}}
+ - : 論理値で、シャドウルートがシリアライズ可能かどうかを示します。
+ 要素内のシリアライズ可能なシャドウルートは、[`options.serializableShadowRoots`](/ja/docs/Web/API/Element/getHTML#serializableshadowroots) 引数が `true` に設定されている場合、{{DOMxRef('Element.getHTML()')}} または {{DOMxRef('ShadowRoot.getHTML()')}} によってシリアライズされます。
+ これは、シャドウルートが作成される際に設定されます。
+- {{DOMxRef("ShadowRoot.slotAssignment")}} {{ReadOnlyInline}}
+ - : スロット割り当ての型（`manual` または `named`）を持つ文字列を返します。
- {{domxref("ShadowRoot.styleSheets")}} {{ReadOnlyInline}}
- : シャドウツリーに明示的にリンクされている、または埋め込まれている {{domxref('CSSStyleSheet')}} オブジェクトの {{domxref('StyleSheetList')}} を返します。
@@ -49,6 +57,8 @@ l10n:
- : 指定された座標における最上位の要素を返します。
- {{domxref("ShadowRoot.elementsFromPoint()")}} {{Non-standard_Inline}}
- : 指定された座標における全要素からなる配列を返します。
+- {{DOMxRef("ShadowRoot.setHTMLUnsafe()")}}
+ - : HTML 文字列を、無害化せずに文書フラグメントとして解析し、シャドウルートに元から存在するサブツリーを置き換えます。HTML 文字列には宣言型のシャドウルートを記載することができます。これは、[`ShadowRoot.innerHTML`](#shadowroot.innerhtml) を使用して設定された HTML のテンプレート要素として解釈されます。
## イベント
diff --git a/files/ja/web/api/shadowroot/mode/index.md b/files/ja/web/api/shadowroot/mode/index.md
index 37071c3aeac35d..dea6b8e4ad0f01 100644
--- a/files/ja/web/api/shadowroot/mode/index.md
+++ b/files/ja/web/api/shadowroot/mode/index.md
@@ -1,41 +1,42 @@
---
-title: ShadowRoot.mode
+title: "ShadowRoot: mode プロパティ"
+short-title: mode
slug: Web/API/ShadowRoot/mode
+l10n:
+ sourceCommit: 26091e4af9c73bb6c5d1466df5070c949498fdbd
---
{{APIRef("Shadow DOM")}}
-**`mode`** は {{domxref("ShadowRoot")}} の読み取り専用プロパティで、モードを `open` と `closed` のどちらかで示します。これはシャドウルートの内部機能を JavaScript からアクセスできるかどうかを定義します。
+**`mode`** は {{domxref("ShadowRoot")}} の読み取り専用プロパティで、モードを `open` と `closed` のどちらかで示します。
+これはシャドウルートの内部機能を JavaScript からアクセスできるかどうかを定義します。
シャドウルートの `mode` が "`closed`" であった場合、シャドウルートの内部的な実装は JavaScript からアクセスできず、変更できなくなります。例えば、 {{HTMLElement("video")}} の内部の実装は JavaScript からアクセスも変更もできないのと同様になります。
-## 構文
-
-```js
-var mode = shadowRoot.mode;
-```
+このプロパティ値を設定するには、{{domxref("Element.attachShadow()")}} に渡すオブジェクトの `options.mode` プロパティを使用するか、シャドウルートを宣言的に作成する場合は、[``](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootmode`](/ja/docs/Web/HTML/Element/template#shadowrootmode) 属性を使用します。
### 値
-[`ShadowRootMode`](https://dom.spec.whatwg.org/#enumdef-shadowrootmode) 列挙型で定義された値です。 `open` か `closed` のどちらかです。
+次のどちらかの値を取りうる文字列です。
+
+- `open`
+ - : このシャドウルートの要素は、ルート外の JavaScript からアクセスすることができます。
+- `closed`
+ - : 閉じられたシャドウツリー内のノードは、ルート外の JavaScript でアクセスすることはできません。
## 例
```js
- // アクセスできない closed のシャドウルートを作成します
- let element = document.createElement("div");
- element.attachShadow({ mode: "closed" });
- element.shadowRoot // シャドウルートが closed なので null
-
- // アクセスできる open のシャドウルートを作成します
- let element2 = document.createElement("div");
- element2.attachShadow({ mode: "open" });
- console.log("The shadow is" + element2.shadowRoot.mode) // "The shadow is open" と出力
- element2.shadowRoot.innerHTML("
-
-Opened shadow
-
-") // シャドウは open なので、外部からアクセスできます
+// アクセスできない closed のシャドウルートを作成します
+let element = document.createElement("div");
+element.attachShadow({ mode: "closed" });
+element.shadowRoot; // シャドウルートが closed なので null
+
+// アクセスできる open のシャドウルートを作成します
+let element2 = document.createElement("div");
+element2.attachShadow({ mode: "open" });
+console.log(`The shadow is ${element2.shadowRoot.mode}`); // "The shadow is open" と出力
+element2.shadowRoot.textContent("Opened shadow"); // シャドウは open なので、外部からアクセスできる
```
## 仕様書
diff --git a/files/ja/web/api/shadowroot/pictureinpictureelement/index.md b/files/ja/web/api/shadowroot/pictureinpictureelement/index.md
index a0cf6da35a22c0..2de006a59951f6 100644
--- a/files/ja/web/api/shadowroot/pictureinpictureelement/index.md
+++ b/files/ja/web/api/shadowroot/pictureinpictureelement/index.md
@@ -1,19 +1,16 @@
---
-title: ShadowRoot.pictureInPictureElement
+title: "ShadowRoot: pictureInPictureElement プロパティ"
+short-title: pictureInPictureElement
slug: Web/API/ShadowRoot/pictureInPictureElement
+l10n:
+ sourceCommit: f2f9346c0c0e9f6676f2df9f1850933e274401de
---
{{APIRef("Shadow DOM")}}
**`pictureInPictureElement`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、このシャドウツリー内で現在、ピクチャインピクチャモードで表示されている要素 ({{domxref("Element")}}) を返します。現在、ピクチャインピクチャモードが使用されていない場合は `null` を返します。
-## 構文
-
-```js
-shadowRoot.pictureInPictureElement;
-```
-
-### 値
+## 値
現在ピクチャインピクチャモードになっている {{domxref("Element")}} オブジェクトへの参照、またはピクチャインピクチャモードが現在シャドウツリーで使われていない場合は `null` が返されます。
diff --git a/files/ja/web/api/shadowroot/pointerlockelement/index.md b/files/ja/web/api/shadowroot/pointerlockelement/index.md
index 283971be8d9160..cd79d888190211 100644
--- a/files/ja/web/api/shadowroot/pointerlockelement/index.md
+++ b/files/ja/web/api/shadowroot/pointerlockelement/index.md
@@ -1,19 +1,16 @@
---
-title: ShadowRoot.pointerLockElement
+title: "ShadowRoot: pointerLockElement プロパティ"
+short-title: pointerLockElement
slug: Web/API/ShadowRoot/pointerLockElement
+l10n:
+ sourceCommit: c99ff93a1b71e7d664509fdd3e0c168920be967a
---
-{{APIRef("DOM")}}
+{{APIRef("Pointer Lock API")}}
-**`pointerLockElement`** は {{domxref("ShadowRoot")}} インターフェースの読み取り専用プロパティで、ポインターがロックされている間、マウスイベントのターゲットとして設定される要素を提供します。ロックが保留されている場合、ポインタのロックが解除されている場合、ターゲットが別のツリーにある場合は `null` になります。
+**`pointerLockElement`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、ポインターがロックされている間、マウスイベントのターゲットとして設定される要素を提供します。ロックが保留されている場合、ポインターのロックが解除されている場合、ターゲットが別のツリーにある場合は `null` になります。
-## 構文
-
-```js
-shadowRoot.pointerLockElement;
-```
-
-### 値
+## 値
{{domxref("Element")}} または `null` です。
diff --git a/files/ja/web/api/shadowroot/serializable/index.md b/files/ja/web/api/shadowroot/serializable/index.md
new file mode 100644
index 00000000000000..10e1c583459c1f
--- /dev/null
+++ b/files/ja/web/api/shadowroot/serializable/index.md
@@ -0,0 +1,39 @@
+---
+title: "ShadowRoot: serializable プロパティ"
+short-title: serializable
+slug: Web/API/ShadowRoot/serializable
+l10n:
+ sourceCommit: 4558d208395a5b1df4db44b0c8ef4e9a0f8adbbf
+---
+
+{{APIRef("Shadow DOM")}}
+
+**`serializable`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、このシャドウルートがシリアライズ可能であれば、`true` を返します。
+
+設定されている場合、このシャドウルートは、{{DOMxRef('Element.getHTML()')}} または {{DOMxRef('ShadowRoot.getHTML()')}} メソッドを `options.serializableShadowRoots` 引数に `true` を指定して呼び出すことでシリアライズできます。
+
+シャドウルートの serializable プロパティは、シャドウルートが作成された際に指定されます。`` 要素に [`shadowrootserializable`](/ja/docs/Web/HTML/Element/template#shadowrootserializable) 属性を（許可された [`shadowrootmode`](/ja/docs/Web/HTML/Element/template#shadowrootmode) 値とともに）追加することで宣言的に指定するか、[`options.serializable`](/ja/docs/Web/API/Element/attachShadow#serializable) 引数を `true` に設定して [`Element.attachShadow()`](/ja/docs/Web/API/Element/attachShadow) を使用します。
+
+## 値
+
+このシャドウルートがシリアライズ可能であれば `true`、そうでなければ `false`。
+
+## 例
+
+```js
+let customElem = document.querySelector("my-shadow-dom-element");
+let shadow = customElem.shadowRoot;
+
+// ...
+
+// シリアライズ可能かどうか
+let hostElem = shadow.serializable;
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/shadowroot/sethtmlunsafe/index.md b/files/ja/web/api/shadowroot/sethtmlunsafe/index.md
new file mode 100644
index 00000000000000..2528e68b802235
--- /dev/null
+++ b/files/ja/web/api/shadowroot/sethtmlunsafe/index.md
@@ -0,0 +1,52 @@
+---
+title: "ShadowRoot: setHTMLUnsafe() メソッド"
+short-title: setHTMLUnsafe()
+slug: Web/API/ShadowRoot/setHTMLUnsafe
+l10n:
+ sourceCommit: 4f35a8237ee0842beb9cfef3354e05464ad7ce1a
+---
+
+{{APIRef("Shadow DOM")}}
+
+**`setHTMLUnsafe()`** は {{domxref("ShadowRoot")}} インターフェイスのメソッドで、HTML の文字列を {{domxref("DocumentFragment")}} に解釈できるもので、DOM 内の要素のサブツリーを置き換えます。
+入力 HTML には、[宣言型のシャドウルート](/ja/docs/Web/HTML/Element/template#宣言的シャドウ_dom)を含めることができます。
+
+メソッド名の接尾辞 "Unsafe" は、このメソッドが、`
+
+
+
+
+
+
previous this actual delay- + +
| 前回 | +今回 | +実際の遅延 | +
|---|
Page title
+ +
+ 最初の節
+ 二番目の節
+
+
+