Adapt ServiceWorkerContainer API to new events structure (#13924)

* Adapt ServiceWorkerContainer API to new events structure This PR adapts the ServiceWorkerContainer API to conform to the new events structure. * Fix redirect * Add controllerchange_event page
mdn · Mar 24, 2022 · d12a8bd · d12a8bd
1 parent 88ebce4
commit d12a8bd
Show file tree

Hide file tree

Showing 10 changed files with 144 additions and 199 deletions.
diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
@@ -9277,6 +9277,9 @@
 /en-US/docs/Web/API/ServiceWorkerContainer.controller	/en-US/docs/Web/API/ServiceWorkerContainer/controller
 /en-US/docs/Web/API/ServiceWorkerContainer.getRegistration([scope])	/en-US/docs/Web/API/ServiceWorkerContainer/getRegistration
 /en-US/docs/Web/API/ServiceWorkerContainer.register	/en-US/docs/Web/API/ServiceWorkerContainer/register
+/en-US/docs/Web/API/ServiceWorkerContainer/oncontrollerchange	/en-US/docs/Web/API/ServiceWorkerContainer/controllerchange_event
+/en-US/docs/Web/API/ServiceWorkerContainer/onerror	/en-US/docs/Web/API/ServiceWorkerContainer/error_event
+/en-US/docs/Web/API/ServiceWorkerContainer/onmessage	/en-US/docs/Web/API/ServiceWorkerContainer/message_event
 /en-US/docs/Web/API/ServiceWorkerGlobalScope.skipWaiting	/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting
 /en-US/docs/Web/API/ServiceWorkerGlobalScope/ServiceWorkerGlobalScope.onfetch	/en-US/docs/Web/API/ServiceWorkerGlobalScope/onfetch
 /en-US/docs/Web/API/ServiceWorkerGlobalScope/ServiceWorkerGlobalScope.onmessage	/en-US/docs/Web/API/ServiceWorkerGlobalScope/onmessage

diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json
@@ -72385,6 +72385,19 @@
       "kscarfone"
     ]
   },
+  "Web/API/ServiceWorkerContainer/error_event": {
+    "modified": "2020-10-15T21:33:32.607Z",
+    "contributors": [
+      "Wind1808",
+      "anlex-N",
+      "daniel.z.tg",
+      "sideshowbarker",
+      "fscholz",
+      "jpmedley",
+      "chrisdavidmills",
+      "kscarfone"
+    ]
+  },
   "Web/API/ServiceWorkerContainer/getRegistration": {
     "modified": "2020-10-15T21:32:19.814Z",
     "contributors": [
@@ -72422,46 +72435,6 @@
       "fscholz"
     ]
   },
-  "Web/API/ServiceWorkerContainer/oncontrollerchange": {
-    "modified": "2020-10-15T21:33:27.368Z",
-    "contributors": [
-      "Wind1808",
-      "sideshowbarker",
-      "fscholz",
-      "abbycar",
-      "jpmedley",
-      "chrisdavidmills",
-      "teoli",
-      "kscarfone"
-    ]
-  },
-  "Web/API/ServiceWorkerContainer/onerror": {
-    "modified": "2020-10-15T21:33:32.607Z",
-    "contributors": [
-      "Wind1808",
-      "anlex-N",
-      "daniel.z.tg",
-      "sideshowbarker",
-      "fscholz",
-      "jpmedley",
-      "chrisdavidmills",
-      "kscarfone"
-    ]
-  },
-  "Web/API/ServiceWorkerContainer/onmessage": {
-    "modified": "2020-10-15T21:33:53.088Z",
-    "contributors": [
-      "Wind1808",
-      "anlex-N",
-      "wbamberg",
-      "sideshowbarker",
-      "fscholz",
-      "abbycar",
-      "jpmedley",
-      "chrisdavidmills",
-      "kscarfone"
-    ]
-  },
   "Web/API/ServiceWorkerContainer/ready": {
     "modified": "2020-10-15T21:33:32.791Z",
     "contributors": [

diff --git a/files/en-us/web/api/serviceworkercontainer/controllerchange_event/index.md b/files/en-us/web/api/serviceworkercontainer/controllerchange_event/index.md
@@ -0,0 +1,49 @@
+---
+title: 'ServiceWorkerContainer: controllerchange event'
+slug: Web/API/ServiceWorkerContainer/controllerchange_event
+tags:
+  - API
+  - Experimental
+  - Interface
+  - Event
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - ServiceWorkerContainer
+  - controllerchange
+browser-compat: api.ServiceWorkerContainer.controllerchange_event
+---
+{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}
+
+The **`controllerchange`** event of the
+{{domxref("ServiceWorkerContainer")}} interface fires when the document's associated
+{{domxref("ServiceWorkerRegistration")}} acquires a new
+{{domxref("ServiceWorkerRegistration.active","active")}} worker.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('controllerchange', event => { });
+
+oncontrollerchange = event => { };
+```
+
+## Event type
+
+A generic {{domxref("Event")}}.
+
+## Example
+
+```js
+// TBD
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
diff --git a/files/en-us/web/api/serviceworkercontainer/error_event/index.md b/files/en-us/web/api/serviceworkercontainer/error_event/index.md
@@ -0,0 +1,43 @@
+---
+title: 'ServiceWorkerContainer: error event'
+slug: Web/API/ServiceWorkerContainer/error_event
+tags:
+  - API
+  - Experimental
+  - Event
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - ServiceWorkerContainer
+  - error
+browser-compat: api.ServiceWorkerContainer.error_event
+---
+{{APIRef("Service Workers API")}}{{Deprecated_header}}
+
+The `error` event fires when an error occurs in the service worker.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('error', event => { });
+
+onerror = event => { };
+```
+
+## Event type
+
+A generic {{domxref("Event")}}.
+
+## Example
+
+```js
+navigator.serviceWorker.onerror = function(errorevent) {
+  console.log(`received error message: ${errorevent.message}`);
+}
+```
+
+## Browser compatibility
+
+{{Compat}}
diff --git a/files/en-us/web/api/serviceworkercontainer/index.md b/files/en-us/web/api/serviceworkercontainer/index.md
@@ -30,14 +30,12 @@ Most importantly, it exposes the {{domxref("ServiceWorkerContainer.register", "S
 
 ## Events
 
-- `controllerchange`
+- [`controllerchange`](/en-US/docs/Web/API/ServiceWorkerContainer/controllerchange_event)
   - : Occurs when the document's associated {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active","active")}} worker.
-    Also available via the {{domxref("ServiceWorkerContainer.oncontrollerchange")}} property.
-- `error`
+- [`error`](/en-US/docs/Web/API/ServiceWorkerContainer/error_event)
   - : Fired whenever an error occurs in the associated service workers.
 - [`message`](/en-US/docs/Web/API/ServiceWorkerContainer/message_event)
-  - : Occurs when incoming messages are received by the {{domxref("ServiceWorkerContainer")}} object (e.g. via a {{domxref("MessagePort.postMessage()")}} call.)
-    Also available via the {{domxref("ServiceWorkerContainer.onmessage")}} property.
+  - : Occurs when incoming messages are received by the {{domxref("ServiceWorkerContainer")}} object (e.g. via a {{domxref("MessagePort.postMessage()")}} call).
 
 ## Methods
 

diff --git a/files/en-us/web/api/serviceworkercontainer/message_event/index.md b/files/en-us/web/api/serviceworkercontainer/message_event/index.md
@@ -12,32 +12,38 @@ browser-compat: api.ServiceWorkerContainer.message_event
 
 The **`message`** event is used in a page controlled by a service worker to receive messages from the service worker.
 
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">Bubbles</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th scope="row">Cancelable</th>
-      <td>No</td>
-    </tr>
-    <tr>
-      <th scope="row">Interface</th>
-      <td>{{domxref("MessageEvent")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">Event handler property</th>
-      <td>
-        <code
-          ><a href="/en-US/docs/Web/API/ServiceWorkerContainer/onmessage"
-            >onmessage</a
-          ></code
-        >
-      </td>
-    </tr>
-  </tbody>
-</table>
+This event is not cancelable and does not bubble.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener('message', event => { });
+
+onmessage = event => { };
+```
+
+## Event type
+
+An {{domxref("MessageEvent")}}. Inherits from {{domxref("Event")}}.
+
+{{InheritanceDiagram("MessageEvent")}}
+
+## Event properties
+
+_This interface also inherits properties from its parent, {{domxref("Event")}}._
+
+- {{domxref("MessageEvent.data")}} {{readonlyInline}}
+  - : The data sent by the message emitter.
+- {{domxref("MessageEvent.origin")}} {{readonlyInline}}
+  - : A {{domxref("USVString")}} representing the origin of the message emitter.
+- {{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}
+  - : A {{domxref("DOMString")}} representing a unique ID for the event.
+- {{domxref("MessageEvent.source")}} {{readonlyInline}}
+  - : A `MessageEventSource` (which can be a {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, or {{domxref("ServiceWorker")}} object) representing the message emitter.
+- {{domxref("MessageEvent.ports")}} {{readonlyInline}}
+  - : An array of {{domxref("MessagePort")}} objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. in channel messaging or when sending a message to a shared worker).
 
 ## Examples
 

diff --git a/files/en-us/web/api/serviceworkercontainer/oncontrollerchange/index.md b/files/en-us/web/api/serviceworkercontainer/oncontrollerchange/index.md
diff --git a/files/en-us/web/api/serviceworkercontainer/onerror/index.md b/files/en-us/web/api/serviceworkercontainer/onerror/index.md
diff --git a/files/en-us/web/api/serviceworkercontainer/onmessage/index.md b/files/en-us/web/api/serviceworkercontainer/onmessage/index.md
diff --git a/files/en-us/web/api/serviceworkercontainer/startmessages/index.md b/files/en-us/web/api/serviceworkercontainer/startmessages/index.md
@@ -30,7 +30,7 @@ example if you've invoked a message handler using
 want to start processing the messages right away.
 
 > **Note:** The messages start being sent automatically when setting the
-> handler directly using {{domxref("ServiceWorkerContainer.onmessage")}}. In this you
+> handler directly using {{domxref("ServiceWorkerContainer.message_event", "onmessage")}}. In this you
 > don't need `startMessages()`.
 
 ## Syntax