CSS 元属性（在规范定义中使用）

• Name
  • 特性的名称
• Value
  • 特性的合法的值的格式
• Initial
  • 特性的初始值
• Applies to
  • 特性作用的元素范围
• Inherited
  • 特性是否可继承
• Percentages
  • 特性是否可接受百分比值
• Computed value
  • 特性指定值解析为计算值方式
• Canonical order
  • 特性指定值序列化的规则
• Animation type
  • 特性在动画中变换的类型
  • not animatable 不支持动画
  • discrete 无法有意义地组合变换
  • by computed value 使用该值类型指定的方式进行组合（插值，添加或累积）
  • repeatable list 同上，但优先重复至最小公倍数再按计算值组合；若不可组合则使用离散值

WebContainer 是一个基于 WebAssembly 的能在浏览器内执行 Node.js 应用程序和操作系统命令的库

基本使用

准备工作

由于 WebContainer 需要使用 SharedArrayBuffer 功能，而该功能需要设置跨域隔离 cross-origin isolated，因此需要设置 COOP 和 COEP 标头

1
2
3
4

Cross-Origin-Opener-Policy: same-origin

Cross-Origin-Embedder-Policy: require-corp
// or Cross-Origin-Embedder-Policy: credentialless

启动系统

调用 WebContainer 类的 boot 静态方法启动系统

1
2
3

import { WebContainer } from '@webcontainer/api'

const webcontainerInstance = await WebContainer.boot()

此方法只能被调用一次，在系统启动之后，系统注销之前，调用该方法会报错

挂载文件

调用 WebContainer 实例的 mount 方法一次性挂载大量文件到文件系统中，这比直接调用文件系统方法单次挂载文件更有校性能优势

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

const files = {
  'index.js': {
    file: {
      contents: `
import express from 'express'

const app = express()

app.get('/', (req, res) => {
res.send('Welcome to a WebContainer app!')
})

app.listen(8888, () => {
console.log(\`App is live at http://localhost:8888\`)
})`,
    },
  },
  'package.json': {
    file: {
      contents: `
      {
        "name": "webcontainer",
        "type": "module",
        "dependencies": {
          "express": "latest",
          "nodemon": "latest"
        },
        "scripts": {
          "start": "nodemon index.js"
        }
      }`,
    },
  },
}

await webcontainerInstance.mount(files)

执行命令

调用 WebContainer 实例的 spawn 方法执行命令，如下载 npm 依赖

1

const installProcess = await webcontainerInstance.spawn('npm', ['install'])

或运行本地服务器

1

await webcontainerInstance.spawn('npm', ['run', 'start'])

监听事件

可以监听 WebContainer 实例上一系列事件以执行对应的操作

1
2
3

webcontainerInstance.on('server-ready', (port, url) => {
  el.src = url
})

注销系统

调用 WebContainer 实例的 teardown 方法注销系统运行

1

webcontainerInstance.teardown()

文件系统机制

文件系统结构

文件系统结构中，包括文件，目录和链接，其数据结构如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

{
    // This is a file - provide its path as a key:
  'package.json': {
    // Because it's a file, add the "file" key
    file: {
      // Now add its contents
      contents: `
{
  "name": "vite-starter",
  "private": true,
  // ...
  "devDependencies": {
    "vite": "^4.0.4"
  }
}
      `,
    },
  },
  src: {
    // Because it's a directory, add the "directory" key
    directory: {
      // Here we will add files
      // This is a file - provide its path as a key:
      'main.js': {
        // Because it's a file, add the "file" key
        file: {
          contents: `
console.log('Hello from WebContainers!')
          `,
        },
      },
      'main.cache.js': {
        file: {
          symlink: './main.js',
        },
      },
    },
  },
}

对于文件，通过 file.contents 键指定文件的内容

对于目录，通过 directory 键指定目录中包含的文件

对于链接，通过 file.contents 键指定链接所指向的目标

文件系统挂载

使用 WebContainer 实例的 mount 方法一次性挂载大量文件（及目录）到文件系统中

1

await webcontainerInstance.mount(files)

文件系统数据需要遵循 FileSystemTree 类型的结构（可以自 @webcontainer/api 中导出）

1

/** @type {import('@webcontainer/api').FileSystemTree} */

默认情况下，文件会被挂载到根目录下；可以指定 mountPoint 参数以挂载到其他目录下

1

await webcontainerInstance.mount(files, { mountPoint: 'custom-mount-point' })

文件系统操作

主要的文件系统操作包括读取文件、读取目录、删除文件目录、写入文件、创建目录，通过 WebContainer 实例的 fs 属性使用

1. 读取文件 readFile

   1 2	const file = await webcontainerInstance.fs.readFile('/package.json') const file = await webcontainerInstance.fs.readFile('/package.json', 'utf-8')

2. 读取目录 readdir

   1 2 3 4 5

   const files = await webcontainerInstance.fs.readdir('/src') for (const file of files) { console.log('file or dir name: ', file) }

   withFileTypes 参数指定返回值的是否为 Dirent 类型对象数组

   1 2 3 4 5 6 7 8 9 10 11 12

   const files = await webcontainerInstance.fs.readdir('/src', { withFileTypes: true, }) for (const file of files) { if (file.isFile()) { console.log('file name: ', file.name) } if (file.isDirectory()) { console.log('dir name: ', file.name) } }

   encoding 参数指定返回值的类型

   1	const files = await webcontainerInstance.fs.readdir('/src', { encoding: 'buffer' })

3. 删除文件目录 rm

   1	await webcontainerInstance.fs.rm('/src/main.js');

   删除非空目录时需要指定 recursive 参数以递归删除

   1	await webcontainerInstance.fs.rm('/src', { recursive: true });

4. 写入文件 writeFile

   1 2 3 4 5 6 7

   await webcontainerInstance.fs.writeFile('/src/main.js', 'console.log("Hello from WebContainers!")') await webcontainerInstance.fs.writeFile( '/src/main.js', '\xE5\x8D\x83\xE8\x91\x89\xE5\xB8\x82\xE3\x83\x96\xE3\x83\xAB\xE3\x83\xBC\xE3\x82\xB9', { encoding: 'latin1' } )

5. 创建目录 mkdir

   1	await webcontainerInstance.fs.mkdir('src')

   传递 recursive 参数以递归创建目录

   1	await webcontainerInstance.fs.mkdir('this/is/my/nested/folder', { recursive: true })

文件系统快照

可以使用 @webcontainer/snapshot 包提供的 snapshot 方法来生成一个本地文件系统的快照

1
2
3

import { snapshot } from '@webcontainer/snapshot'

const folderSnapshot = await snapshot(SOURCE_CODE_FOLDER)

从而可以提供给客户端挂载到文件系统上

1
2
3
4

const snapshotResponse = await fetch('/snapshot');
const snapshot = await snapshotResponse.arrayBuffer();

await webcontainer.mount(snapshot)

线程机制

使用 WebContainer 实例的 spawn 方法执行命令

第一个参数表示命令的名称，第二个参数表示命令的参数，第三个参数表示执行命令的额外选项

方法返回的是一个 WebContainerProcess 实例

1
2
3

const installProcess = await webcontainerInstance.spawn('npm', ['install'])

await webcontainerInstance.spawn('ls', ['src', '-l'])

可以通过 WebContainerProcess 实例的 exit 属性，其返回一个兑现 number 值的 Promise，兑现后返回线程执行结果的状态码

线程输入输出

WebContainerProcess 实例的 input 属性返回 WritableStream<string> 值，向线程传入输入数据

WebContainerProcess 实例的 output 属性返回 ReadableStream<string> 值，接收对于线程终端的输出

1
2
3
4
5

installProcess.output.pipeTo(new WritableStream({
  write(data) {
    console.log(data)
  }
}))

中止线程

调用 WebContainerProcess 实例的 kill 方法中止线程的执行

1

installProcess.kill()

状态事件

系统包含多个事件响应

server-ready 事件，当服务完全可接收请求时触发
port 事件，当端口被线程开启或关闭时触发
error 事件，当内部错误抛出时触发

1
2
3

webcontainerInstance.on('server-ready', (port, url) => {
  el.src = url
})

通常可以通过 WebContainer 实例的 on 方法监听对应的事件并绑定事件回调函数

LCP

LCP，即最大内容绘制（Largest Contentful Paint），是视口中可见的最大图片、文本块或视频的呈现时间，其目标是 < 2.5s

其是 FMP 和 SI 的替代

其考虑的元素包括 <img> 元素、<svg> 元素内的 <image> 元素、<video> 元素（封面图）、使用 url() 函数加载背景图片的元素、包含文本节点或其他内嵌级文本元素子级的块级元素

其报告的元素的尺寸通常是用户在视口内可见的尺寸，超出的元素的尺寸会被裁剪

浏览器会在绘制第一帧后立即报告 LCP 指标。但是，在渲染后续帧后，只要最大的内容元素发生变化，新的 LCP 指标就会报告；直到用户开始与网页互动为止

JavaScript API 示例如下（用于计算指标时，应当忽略后台标签页、单独计算往返缓存标签页、考虑 iframe 中的标签页、预渲染网页需从 activationStart 开始计算）：

1
2
3
4
5

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

CLS

CLS，即累积布局偏移（Cumulative Layout Shift），测量页面整个生命周期内发生的每次意外布局偏移中的最大布局偏移分数，其目标是 < 0.1

JavaScript API 示例如下：

1
2
3
4
5

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

INP

INP，即 Interaction to Next Paint，测量用户访问网页期间发生的所有交互行为的延迟时间，其目标是 < 200ms

它是 FID 的替代

FID

FID，即首次输入延迟（First Input Delay），测量从用户首次与页面交互到浏览器对交互作出响应所经过的时间，其目标是 < 100ms

通常该指标在 FCP 和 TTI 之间

FCP

FCP，即首次内容绘制（First Contentful Paint），测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间，其目标是 < 1.8s

TTI

TTI，即可交互时间（Time to Interactive），测量页面从开始加载到主要子资源完成渲染并能够响应用户交互所需的时间，其目标是尽可能降低 FCP 与 TTI 的差值，其目标是 < 3.8s

TBT

TBT，即总阻塞时间（Total Blocking Time），测量 FCP 与 TTI 之间的总时间，其目标是 < 30ms

SI

SI，即速度指数（Speed Index），测量页面可视区域中内容的填充速度，其目标是 > 75

Tools

• Web VSCode
• Web GitHub VSCode
• Web Console
• Worker Playground

Survey

• Devographics Surveys: state of HTML, CSS, JavaScript and React

• template-sky
  • vite-vue-template-sky
  • vite-react-template-sky
  • rollup-template-sky
  • springboot-template-sky
• mdn/content
  • fix mdn content issues, see https://jc-verse.github.io/mdn-graph/warnings
  • add missing documentations, see https://openwebdocs.github.io/web-docs-backlog/
• mdn/translated-content
  • add translation for mdn content, see MDN Translations
  • sync translated mdn translation content
• mdn/browser-compat-data
  • add impl_url for unimplemented features
  • sync node.js data
• mdn/data
  *sync css features data
  • write lint to fix css data issues
  • add zh-CN translation for l10n data

生成及查看 GPG 密钥

1. 下载并安装 GPG 命令行工具（需根据操作系统来选择适合的版本下载）

2. 运行如下命令生成 GPG 密钥对

   1	gpg --full-generate-key

3. 在生成时，会依次提示选择要生成的密钥类型、密钥大小、密钥有效时长及确认选择，以上均选择默认值即可；随后需输入用户 ID 信息，需保证信息与 Github 保存的信息一致；接着需输入一个安全密码；最后完成生成过程

4. 完成生成后，可以运行如下命令查看已生成的 GPG 密钥

   1	gpg --list-secret-keys --keyid-format=long

5. 从已生成的 GPG 密钥中选择一个，并复制密钥 ID；例如，如下示例的密钥 ID 为 3AA5C34371567BD2

   1 2 3 4 5

   /Users/hubot/.gnupg/secring.gpg ------------------------------------ sec 4096R/3AA5C34371567BD2 2016-03-10 [expires: 2017-03-10] uid Hubot <hubot@example.com> ssb 4096R/4BB6D45482678BE3 2016-03-10

6. 运行如下命令生成 GPG 密钥的公钥文本，需将 <GPG-ID> 替换为对应的 GPG 密钥 ID

   1	gpg --armor --export <GPG-ID>

7. 复制生成结果，即以 -----BEGIN PGP PUBLIC KEY BLOCK----- 开头，以 -----END PGP PUBLIC KEY BLOCK----- 结尾的部分

添加 GPG 密钥至 Github

1. 前往 https://github.com/settings/keys 页面，或通过个人资料照片-设置-SSH 和 GPG 密钥前往对应页面
2. 点击新建 GPG 密钥，在标题字段输入 GPG 密钥的名称，在密钥字段中输入复制的生成的 GPG 密钥的公钥文本，最后点击添加 GPG 密钥
3. 完成后续身份验证等步骤以完成操作

添加 GPG 密钥至 Git

1. 运行如下命令以在 Git 中设置 GPG 签名主键

   1	git config --global user.signingkey <GPG-ID>

2. 运行如下命令指定安装的 GPG 命令行工具的路径

   1	git config --global gpg.program <path/to/gpg>

3. 可以运行如下命令以配置默认对所有提交使用 GPG 签名

   1	git config --global commit.gpgsign true

参见

• 生成新 GPG 密钥 - GitHub 文档
• 将 GPG 密钥添加到 GitHub 帐户 - GitHub 文档
• 将您的签名密钥告知 Git
• GnuPG 工具

WebOTP API 是对 Credential Management API 的扩展，允许开发者请求用户访问短信验证码，以便方便地完成表单等填写

使用

使用 CredentialsContainer.get() 方法并指定 otp 选项请求短信验证凭证

其中 otp 选项传递一个对象，其唯一选项 transport 接收一个字符串数组，其唯一合法项为 sms

方法返回一个 Promise，其兑现一个 OTPCredential 实例

方法在传入的 signal 选项对应的 AbortSignal 已终止时抛出 AbortError 异常；在方法被权限策略拒绝时抛出 SecurityError 异常

OTPCredential 接口表示短信验证凭证

其 code 只读属性代表一个字符串，表示收到的短信验证码

1
2
3
4
5
6
7
8
9
10
11
12

navigator.credentials
  .get({
    otp: {
      transport: ["sms"],
    },
  })
  .then((otp) => {
    console.log(otp.code)
  })
  .catch((err) => {
    console.error(err)
  })

步骤

1. 首先用户填写其手机号码，网页将其发送到应用服务器
2. 随后调用 navigator.credentials.get() 方法执行相关操作
3. 接着应用服务器向指定的手机号发送验证码短信
4. 随后用户代理会弹窗提醒用户是否允许网页访问验证码
5. 用户授权后可通过 navigator.credentials.get() 方法执行结果获取到验证码并可将其填写在网页上
6. 最终填写结果会发送给应用服务器进行验证，并进行后续一些操作

短信格式限制

限制短信最后一行必须以 @ 开头，后接调用 API 的网页的域名；随后以空格分隔，以 # 开头，后接短信验证码

1
2
3

Your verification code is 123456.

@www.example.com #123456

若其在内嵌第三方网页中调用；且第一段需为顶层网页的域名；最后一行还需要增加以 # 开头，后接内嵌第三方网页的域名

1
2
3

Your verification code is 123456.

@top-level.example.com #123456 @embedded.com

替代策略

可以利用 autocomplete 属性的 one-time-code 值在某种程度上提示用户代理自动填充短信验证码

1

<input autocomplete="one-time-code" required/>

权限策略

该 API 调用受到 otp-credentials 权限策略的控制，可以通过 Permissions-Policy 响应头指定，或通过 <iframe> 标签的 allow 属性指定

默认值是 self，即允许同源的浏览上下文使用该 API

类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

interface OTPCredential extends Credential {
  readonly code: string
}

interface CredentialRequestOptions {
  otp: OTPCredentialRequestOptions
}

interface OTPCredentialRequestOptions {
  transport?: OTPCredentialTransportType[]
}

enum OTPCredentialTransportType {
  "sms",
}

链接

• https://developer.mozilla.org/en-US/docs/Web/API/WebOTP_API
• https://wicg.github.io/web-otp/

Credential Management API 允许网站存储和检索密码、公钥与联合凭证

用户无需显式登录即可直接登录、查看登录站点的联合账户及恢复会话

通用凭证管理

凭证管理主要通过 CredentialsContainer 接口提供的各类方法实现

通过 Navigator 接口的 credentials 只读属性获取其实例

创建凭证

可以直接使用对应凭证具体类型的构造函数创建新凭证

或调用 CredentialsContainer 接口的 create() 方法用于创建新凭证

方法可以传入一个可选的配置项

配置项中 signal 可选参数接收一个 AbortSignal 实例，可用于编程式终止创建进程

此外，必须向配置项中传入 password federated publicKey 中某个选项，以创建对应的具体类型的凭证，具体选项细节见下及 Web Authentication API 内容

方法返回一个 Promise，其兑现一个 Credential 实例，或 null（若无法创建凭证）

相关示例见下具体凭证类型章节

存储凭证

调用 CredentialsContainer 接口的 store() 方法存储凭证

方法需要传入一个 Credential 接口或其子接口的实例，代表需要保存的凭证

方法返回一个 Promise

示例如下所示

1
2
3
4
5
6
7

try {
  await navigator.credentials.store(credential)

  console.log('success')
} catch {
  console.log('failure')
}

读取凭证

调用 CredentialsContainer 接口的 get() 方法用于获取已存储的凭证，从而用于执行身份验证等用途

方法可以传入一个可选的配置项

配置项中 signal 可选参数接收一个 AbortSignal 实例，可用于编程式终止读取进程

配置项中 mediation 可选参数接收 silent optional conditional required 之一，默认为 optional，指定用户是否会在每次访问时请求登录

• silent 不会要求用户进行身份验证
• optional 若凭据无需用户中介即可移交，则会直接移交；反之则会要求用户进行身份验证
• conditional 凭据将会通过非模态对话框提供给用户并指示凭证的来源，其相当于自动填充可用的凭证
• required 始终要求用户进行登录身份验证

此外，可以向配置项中传入 password federated publicKey otp identity 中多个选项，以仅读取对应的具体类型的凭证，具体选项细节见下及 Web Authentication API、WebOTP API、Federated Credential Management API 等内容

方法返回一个 Promise，其兑现一个 Credential 实例，或 null（若无法读取凭证）

相关示例见下具体凭证类型章节

阻止自动登录

调用 CredentialsContainer 接口的 preventSilentAccess() 方法用于未来访问时阻止自动登录功能

方法返回一个 Promise

此方法可以在用户退出网站时调用，以避免用户登录信息在下次访问时不会自动传递

通用凭证

Credential 抽象接口表示通用凭证，其子接口表示各种具体类型的凭证

Credential 接口的 id 只读属性返回一个字符串，表示凭证的标识符

Credential 接口的 type 只读属性返回一个字符串，表示凭证的具体类型

子接口与类型的映射如下：

子接口	type 属性值
PasswordCredential	password
FederatedCredential	federated
PublicKeyCredential	public-key
OTPCredential	otp
IdentityCredential	identity

密码凭证

PasswordCredential 接口表示密码凭证

密码凭证信息

PasswordCredential 接口的 iconURL 只读属性返回一个字符串，表示凭证的图标的 URL

PasswordCredential 接口的 name 只读属性返回一个字符串，表示凭证的名称

PasswordCredential 接口的 password 只读属性返回一个字符串，表示凭证所包含的密码

创建密码凭证

可以调用 PasswordCredential() 构造函数创建密码凭证

可以向构造函数传入一个 HTMLFormElement 实例参数

表单至少需要包含 id 和 password 字段，可以包含一个 csrf_token 以及 name 和 iconURL 字段

1
2
3
4
5
6
7

<form id="form">
  <label for="id">Username:</label>
  <input type="text" name="id" autocomplete="username" />
  <label for="password">Password:</label>
  <input type="password" name="password" autocomplete="current-password" />
  <input type="hidden" name="csrf_token" value="*****" />
</form>

1
2

const form = document.getElementById("form");
const credential = new PasswordCredential(form);

也可以直接向构造函数传入一个配置项参数，至少需要包含 id、password 和 origin 字段，可选传入 name 和 iconURL 字段

1
2
3
4
5
6

const data = {
  id: "xxxxxx",
  password: "xxxxxx",
  origin: "www.example.com",
};
const credential = new PasswordCredential(data);

亦可以通过 CredentialsContainer 接口的 create() 方法创建密码凭证

需要在配置项中传入 password 选项，其为一个对象，对象结构同传入 PasswordCredential() 构造函数的配置项结构

1
2
3
4
5
6
7
8

navigator.credentials
  .create({
    password: {
      id: "xxxxxx",
      password: "xxxxxx",
      origin: "www.example.com",
    }
  })

读取密码凭证

通过 CredentialsContainer 接口的 get() 方法读取密码凭证

需要在配置项中传入 password 选项，其接收一个布尔值，默认为 false

1
2
3

navigator.credentials.get({
  password: true,
})

联合凭证

FederatedCredential 接口表示联合凭证

联合凭证信息

FederatedCredential 接口的 iconURL 只读属性返回一个字符串，表示凭证的图标的 URL

FederatedCredential 接口的 name 只读属性返回一个字符串，表示凭证的名称

FederatedCredential 接口的 provider 只读属性返回一个字符串，表示凭证的联合身份提供者的 URL

FederatedCredential 接口的 protocol 只读属性返回一个字符串，表示凭证的联合身份协议

创建联合凭证

可以调用 FederatedCredential() 构造函数创建联合凭证

需要传入一个配置项参数，至少需要包含 id、provider 和 origin 字段，可选传入 name、iconURL 和 protocol 字段

1
2
3
4
5
6

const data = {
  id: "xxxxxx",
  provider: "https://account.google.com",
  origin: "www.example.com",
};
const credential = new FederatedCredential(data);

亦可以通过 CredentialsContainer 接口的 create() 方法创建联合凭证

需要在配置项中传入 federated 选项，其为一个对象，对象结构同传入 FederatedCredential() 构造函数的配置项结构

1
2
3
4
5
6
7
8

navigator.credentials
  .create({
    federated: {
      id: "xxxxxx",
      provider: "https://account.google.com",
      origin: "www.example.com",
    }
  })

读取联合凭证

通过 CredentialsContainer 接口的 get() 方法读取联合凭证

需要在配置项中传入 federated 选项，其接收一个配置项，需要传入 providers 参数与可选的 protocols 参数，两参数均接收一个字符串数组

1
2
3
4
5

navigator.credentials.get({
  federated: {
    providers: ["https://account.google.com"],
  },
})

类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

interface Navigator {
  readonly credentials: CredentialsContainer
}

interface CredentialsContainer {
  get(options?: CredentialRequestOptions): Promise<Credential | null>
  store(credential: Credential): Promise<undefined>
  create(options?: CredentialCreationOptions): Promise<Credential | null>
  preventSilentAccess(): Promise<undefined>
}

interface CredentialUserData {
  readonly name: string
  readonly iconURL: string
}

enum CredentialMediationRequirement {
  "silent",
  "optional",
  "conditional",
  "required",
}

interface CredentialRequestOptions {
  mediation?: CredentialMediationRequirement
  signal?: AbortSignal
}

interface CredentialCreationOptions {
  signal?: AbortSignal
}

interface CredentialData {
  id: string
}

interface Credential {
  readonly id: string
  readonly type: string
}

interface PasswordCredential extends Credential, CredentialUserData {
  constructor(form: HTMLFormElement): PasswordCredential
  constructor(data: PasswordCredentialData): PasswordCredential
  readonly password: string
}

interface CredentialRequestOptions {
  password?: boolean
}

interface PasswordCredentialData extends CredentialData {
  name?: string
  iconURL?: string
  origin: string
  password: string
}

type PasswordCredentialInit = PasswordCredentialData | HTMLFormElement

interface CredentialCreationOptions {
  password?: PasswordCredentialInit
}

interface FederatedCredential extends Credential, CredentialUserData {
  constructor(data: FederatedCredentialInit): FederatedCredential
  readonly provider: string
  readonly protocol?: string
}

interface FederatedCredentialRequestOptions {
  providers?: string[]
  protocols?: string[]
}

interface CredentialRequestOptions {
  federated?: FederatedCredentialRequestOptions
}

interface FederatedCredentialInit extends CredentialData {
  name?: string
  iconURL?: string
  origin: string
  provider: string
  protocol?: string
}

interface CredentialCreationOptions {
  federated?: FederatedCredentialInit
}

链接

• https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API
• https://w3c.github.io/webappsec-credential-management/

Sensor APIs 提供了一系列的传感器 API， 用以提供网页访问应用传感器的权限

通用传感器

Sensor 抽象接口表示通用传感器，该接口被其他具体传感器接口继承，通常不会直接使用该接口

激活

调用 start() 方法激活传感器

在完全激活后，其 activated 属性值会改变，并触发 activate 事件（返回 Event 事件）

停用

调用 stop() 方法停用传感器

读取数据

在每次读取数据时，会触发 reading 事件（返回 Event 事件）

异常处理

在每次读取数据中触发异常时，会触发 error 事件，并返回一个 SensorErrorEvent 事件，可通过其 error 只读属性读取到对应的 DOMException 实例

相关参数

其 activated 只读属性指示传感器是否已激活

其 hasReading 只读属性指示传感器是否已读取数据

其 timestamp 只读属性指示传感器最近一次读取数据的高精度时间戳

加速度传感器

Accelerometer 接口表示加速度传感器，继承自 Sensor 接口

构造该接口时，除了 Sensor 接口构造函数的 frequency 参数外，还可以额外指定 referenceFrame 参数指示，值可以为 device 或 screen 之一，默认值是 device

该接口的 x y z 只读属性分别表示在 x 轴、y 轴和 z 轴上的分加速度

线性加速度传感器

LinearAccelerationSensor 接口表示线性加速度传感器，继承自 Accelerometer 接口

线性加速度指不考虑重力影响下的加速度

重力加速度传感器

GravitySensor 接口表示重力加速度传感器，继承自 Accelerometer 接口

物理方向传感器

OrientationSensor 抽象接口表示物理方向传感器，该接口被其他具体物理方向传感器接口继承，通常不会直接使用该接口

该接口的 quaternion 只读属性返回一个四元数只读元组，表示设备物理方向的四元组（x y z w）的值

该接口的 populateMatrix() 方法使用最新的旋转矩阵填充给定的目标矩阵

绝对物理方向传感器

AbsoluteOrientationSensor 接口表示绝对物理方向传感器，继承自 OrientationSensor 接口

绝对物理方向指相对地球坐标系的物理方向

构造该接口及其子接口时，除了 Sensor 接口构造函数的 frequency 参数外，还可以额外指定 referenceFrame 参数指示，值可以为 device 或 screen 之一，默认值是 device

相对物理方向传感器

RelativeOrientationSensor 接口表示相对物理方向传感器，继承自 OrientationSensor 接口

相对物理方向指根据设备决定的物理方向，不考虑地球坐标系

构造该接口及其子接口时，除了 Sensor 接口构造函数的 frequency 参数外，还可以额外指定 referenceFrame 参数指示，值可以为 device 或 screen 之一，默认值是 device

环境光传感器

AmbientLightSensor 接口表示环境光传感器，继承自 Sensor 接口

该接口的 illuminance 只读属性返回环境光的强度，单位流明

陀螺仪传感器

Gyroscope 接口表示陀螺仪传感器，继承自 Sensor 接口

构造该接口时，除了 Sensor 接口构造函数的 frequency 参数外，还可以额外指定 referenceFrame 参数指示，值可以为 device 或 screen 之一，默认值是 device

该接口的 x y z 只读属性分别表示在 x 轴、y 轴和 z 轴上的分角速度

磁场传感器

Magnetometer 接口表示磁场传感器，继承自 Sensor 接口

构造该接口时，除了 Sensor 接口构造函数的 frequency 参数外，还可以额外指定 referenceFrame 参数指示，值可以为 device 或 screen 之一，默认值是 device

该接口的 x y z 只读属性分别表示在 x 轴、y 轴和 z 轴上的分磁场强度

权限策略

该组 API 调用受到 accelerometer gyroscope magnetometer ambient-light-sensor 等权限策略的控制，可以通过 Permissions-Policy 响应头指定，或通过 <iframe> 标签的 allow 属性指定

默认值均是 self，即允许允许在顶层浏览上下文及其同源的嵌入浏览上下文中使用

权限 API

该组 API 调用时需要用户授予 accelerometer gyroscope magnetometer ambient-light-sensor 等权限，可以调用 Permission.query() 方法检查用户是否已授予了该权限

类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

interface Sensor extends EventTarget {
  readonly activated: boolean
  readonly hasReading: boolean
  readonly timestamp?: DOMHighResTimeStamp

  start(): void
  stop(): void

  onreading: ((this: Sensor, ev: Event) => any) | null
  onactivate: ((this: Sensor, ev: Event) => any) | null
  onerror: ((this: Sensor, ev: SensorErrorEvent) => any) | null
}

interface SensorOptions {
  frequency: number
}

interface SensorErrorEvent extends Event {
  constructor(type: string, errorEventInitDict: SensorErrorEventInit)
  readonly error: DOMException
}

interface SensorErrorEventInit extends EventInit {
  error: DOMException
}

interface Accelerometer extends Sensor {
  constructor(options?: AccelerometerSensorOptions)
  readonly x?: number
  readonly y?: number
  readonly z?: number
}

enum AccelerometerLocalCoordinateSystem { "device", "screen" }

interface AccelerometerSensorOptions extends SensorOptions {
  referenceFrame?: AccelerometerLocalCoordinateSystem
}

interface LinearAccelerationSensor extends Accelerometer {
  constructor(options?: AccelerometerSensorOptions)
}

interface GravitySensor extends Accelerometer {
  constructor(options?: AccelerometerSensorOptions)
}

type RotationMatrixType = Float32Array | Float64Array | DOMMatrix

interface OrientationSensor extends Sensor {
  readonly quaternion?: ReadonlyArray<number>
  populateMatrix(targetMatrix: RotationMatrixType): void
}

enum OrientationSensorLocalCoordinateSystem { "device", "screen" }

interface OrientationSensorOptions extends SensorOptions {
  referenceFrame?: OrientationSensorLocalCoordinateSystem
}

interface AbsoluteOrientationSensor extends OrientationSensor {
  constructor(sensorOptions?: OrientationSensorOptions)
}

interface RelativeOrientationSensor extends OrientationSensor {
  constructor(sensorOptions?: OrientationSensorOptions)
}

interface AmbientLightSensor extends Sensor {
  constructor(options?: SensorOptions)
  readonly illuminance?: number
}

interface Gyroscope extends Sensor {
  constructor(sensorOptions?: GyroscopeSensorOptions)
  readonly x?: number
  readonly y?: number
  readonly z?: number
}

enum GyroscopeLocalCoordinateSystem { "device", "screen" }

interface GyroscopeSensorOptions extends SensorOptions {
  referenceFrame?: GyroscopeLocalCoordinateSystem
}

interface Magnetometer : Sensor {
  constructor(sensorOptions?: MagnetometerSensorOptions)
  readonly x?: number
  readonly y?: number
  readonly z?: number
}

enum MagnetometerLocalCoordinateSystem { "device", "screen" }

interface MagnetometerSensorOptions extends SensorOptions {
  referenceFrame?: MagnetometerLocalCoordinateSystem
}

链接

• https://developer.mozilla.org/en-US/docs/Web/API/Sensor_APIs
• https://w3c.github.io/sensors/
• https://w3c.github.io/accelerometer/
• https://w3c.github.io/orientation-sensor/
• https://w3c.github.io/ambient-light/
• https://w3c.github.io/gyroscope/
• https://w3c.github.io/magnetometer/