随着 10 月份的到来，我们将推出 Firefox 82。在这个版本中，我们终于启用了对媒体会话 API 的支持，提供了一些新的 CSS 伪选择器行为，修复了与Window.name属性相关的安全漏洞，并在我们的开发者工具中提供了对服务器发送事件的检查。

这篇博文只是概述了一些重点内容；如需了解更多详情，请查看以下内容

• MDN 上面向开发者的 Firefox 82
• Firefox 82 终端用户发布说明

检查服务器发送事件

服务器发送事件 允许反转传统的客户端发起 Web 请求模型，服务器可以通过推送消息随时向网页发送新数据。在这个版本中，我们添加了使用网络监视器 检查服务器发送事件及其消息内容的功能。

您可以进入网络监视器，选择发送服务器发送事件的文件，并在右侧面板的“响应”选项卡中查看接收到的消息。

如需了解更多信息，请查看我们的检查服务器发送事件 指南。

Web 平台更新

现在让我们看看我们在 82 中提供的 Web 平台新增功能。

媒体会话 API

媒体会话 API 使得两组主要的功能成为可能。

1. 首先，它提供了一种自定义媒体通知的方式。它通过为您的 Web 应用正在播放的媒体提供元数据，以便操作系统进行显示。
2. 其次，它提供事件处理程序，浏览器可以使用这些处理程序访问平台媒体键，例如键盘、耳机、遥控器上的硬件键，以及移动设备的通知区域和锁定屏幕上的软件键。因此，您可以在不查看网页的情况下，通过设备无缝控制 Web 提供的媒体。

下面的代码提供了这两者在实际应用中的概述

if ('mediaSession' in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Unforgettable',
    artist: 'Nat King Cole',
    album: 'The Ultimate Collection (Remastered)',
    artwork: [
      { src: 'https://dummyimage.com/96x96',   sizes: '96x96',   type: 'image/png' },
      { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
      { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
      { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
      { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
      { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
    ]
  });

  navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('pause', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('seekbackward', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('seekforward', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('previoustrack', function() { /* Code excerpted. */ });
  navigator.mediaSession.setActionHandler('nexttrack', function() { /* Code excerpted. */ });
}

让我们考虑一下这对于 Web 用户来说意味着什么 - 假设他们正在通过 Spotify 或 YouTube 等 Web 应用播放音乐。使用上面的第一段代码，我们可以为当前正在播放的曲目提供元数据，这些元数据可以在系统通知、锁定屏幕等地方显示。

第二段代码说明我们可以设置特殊的动作处理程序，它们的工作方式与事件处理程序相同，但在操作系统级别执行等效动作时触发。例如，这可能包括按下键盘播放按钮或在移动设备锁定屏幕上按下跳过按钮。

目的是让用户无需打开启动它的特定网页，即可了解正在播放的内容并进行控制。

Window.name 中是什么？

此 Window.name 属性用于获取或设置窗口当前浏览上下文的名称 - 这主要用于设置超链接和表单的目标。以前的一个问题是，当从不同域加载的页面被加载到同一个选项卡时，它可以访问存储在Window.name中的任何信息，如果这些信息是敏感的，可能会造成安全问题。

为了解决这个问题，Firefox 82 和其他现代浏览器将在选项卡加载来自不同域的页面时将Window.name重置为空字符串，并在重新加载原始页面（例如，通过选择“后退”按钮）时恢复名称。

这可能会带来一些问题 - 历史上，Window.name也曾被一些框架用于提供跨域消息传递（例如SessionVars和 Dojo 的dojox.io.windowName），作为 JSONP 的更安全的替代方案。然而，这不是Window.name的预期用途，并且有更安全/更好的方法在窗口之间共享信息，例如Window.postMessage()。

CSS 亮点

我们在 Firefox 82 中添加了一些有趣的 CSS 新增功能。

首先，我们引入了标准的::file-selector-button 伪元素，它允许您选择和设置<input type=”file”> 元素内部的文件选择按钮的样式。

因此，现在可以做到以下几点

input[type=file]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: .2em .4em;
  border-radius: .2em;
  background-color: #a29bfe;
  transition: 1s;
}
 
input[type=file]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

请注意，这以前是由专有的::-webkit-file-upload-button 伪类处理的，但所有浏览器都应该很快开始遵循这一标准。

我们还想提到，:is()和:where()伪类已更新，因此它们的错误处理更宽容 - 提供的选择器列表中单个无效选择器不再使整个规则无效。它只会被忽略，并且规则将应用于所有存在的有效选择器。

WebExtensions

从 Firefox 82 开始，语言包将与 Firefox 更新同步更新。拥有有效语言包的用户不再需要处理在语言包更新待定交付时恢复为英语的麻烦。

查看附加组件博客，了解 Firefox 82 中对 WebExtensions API 的更多更新！