message event is used in a page controlled by a service worker to receive messages from the service worker.

冒泡 No
可取消 No
接口 MessageEvent
事件处理程序特性 onmessage

范例

In this example the service worker get the client's ID from a fetch event and then sends it a message using Client.postMessage :

// in the service worker
async function messageClient(clientId) {
    const client = await clients.get(clientId);
    client.postMessage('Hi client!');
}
addEventListener('fetch', (event) => {
    messageClient(event.clientId);
    event.respondWith(() => {
      // ...
    });
});
					

The client can receive the message by listening to the message event:

// in the page being controlled
navigator.serviceWorker.addEventListener('message', (message) => {
    console.log(message);
});
					

规范

规范 状态
服务工作者
The definition of 'message' in that specification.
工作草案

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据
桌面 移动
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
message event Chrome 40 Edge 17
17
16 Disabled
Disabled From version 16: this feature is behind the Enable service workers preference.
Firefox 44 注意事项
44 注意事项
Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE 不支持 No Opera 27 Safari 11.1 WebView Android 40 Chrome Android 40 Firefox Android 44 Opera Android 27 Safari iOS 11.3 Samsung Internet Android 4.0

图例

完整支持

完整支持

不支持

不支持

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

元数据

  • 最后修改: