What's new for web developers
Media & Web 入门 18m

Web 开发者有什么新功能

What's new for web developers

2020年6月23日

在 Apple 官方观看视频

一句话判断

Safari 14 是近几年最大的一次 Web 平台更新——WebExtensions API、SSL 证书有效期缩短、新增 CSS 特性、WebAuthn 支持、以及 Performance API 的增强，如果你做 Web 开发，这场 Session 值得完整看一遍。

这场 Session 讲了什么

这场 Session 是 Safari 14 / macOS Big Sur 面向 Web 开发者的年度功能总结，内容覆盖广泛：

Safari Web Extensions。Safari 14 支持 Chrome/Firexe 的 WebExtensions API，可以快速把现有浏览器插件移植到 Safari。Xcode 12 提供了 Safari Extension App 的项目模板。

安全与隐私。Safari 14 是首个将 SSL/TLS 证书有效期限制为 398 天的浏览器（之前是 825 天）。ITP（Intelligent Tracking Prevention）继续加强，跨域跟踪被进一步限制。

CSS 新特性。Safari 14 新增了对 CSS aspect-ratio、:is() / :where() 伪类、CSS Painting API（Houdini 的一部分）的支持。color() 函数支持了 Display P3 广色域。

Web API 增强。WebAuthn（FIDO2）支持 Face ID/Touch ID 作为认证器、PerformanceObserver 支持长任务检测、IntersectionObserver 支持延迟加载。

值得深挖的点

WebExtensions 的移植路径

Safari 14 的 WebExtensions 不是「兼容层」，而是原生实现。Chrome 扩展的大部分 API（tabs、bookmarks、storage、webRequest 等）都直接可用。用 xcrun safari-web-extension-converter 命令行工具可以把现有的 Chrome 扩展一键转换为 Xcode 项目。转换后需要用 Xcode 编译签名，作为 Mac app 或 Safari App Extension 分发。

WebAuthn + Face ID 的意义

Safari 14 支持 navigator.credentials.create() 和 .get() 的 WebAuthn API，可以用 Touch ID 或 Face ID 作为 Web 认证的生物识别器。用户在网页上注册/登录时，不需要输入密码，直接用指纹或面容验证。这对银行、企业内部系统等需要强认证的 Web 应用非常有价值。

代码片段

<!-- CSS 新特性示例 -->
<style>
    /* aspect-ratio：告别 padding-top hack */
    .video-container {
        width: 100%;
        aspect-ratio: 16 / 9;
        background: #000;
    }
    
    /* :is() 伪类：减少重复选择器 */
    :is(h1, h2, h3):hover {
        color: #007AFF;
    }
    
    /* 等价于：
    h1:hover, h2:hover, h3:hover { color: #007AFF; } */
    
    /* Display P3 广色域 */
    .vibrant-color {
        color: color(display-p3 1 0 0 1);
        /* 比 sRGB 的红色更鲜艳 */
    }
</style>

<!-- 图片延迟加载（Safari 14 原生支持） -->
<img src="hero.jpg" loading="lazy" alt="延迟加载的图片">
// WebAuthn：用 Touch ID / Face ID 注册和登录

// 注册
async function registerWithBiometrics() {
    const challenge = new Uint8Array(32);
    crypto.getRandomValues(challenge);
    
    const credential = await navigator.credentials.create({
        publicKey: {
            challenge: challenge,
            rp: { name: "我的网站", id: "example.com" },
            user: {
                id: new Uint8Array(16),
                name: "user@example.com",
                displayName: "张三"
            },
            pubKeyCredParams: [
                { alg: -7, type: "public-key" }  // ES256
            ],
            authenticatorSelection: {
                authenticatorAttachment: "platform",  // 使用设备内置认证器
                userVerification: "required"  // 要求 Face ID / Touch ID
            }
        }
    });
    
    // 发送 credential 到服务端
    console.log("注册成功", credential.id);
}

// 登录
async function loginWithBiometrics() {
    const challenge = new Uint8Array(32);
    crypto.getRandomValues(challenge);
    
    const assertion = await navigator.credentials.get({
        publicKey: {
            challenge: challenge,
            userVerification: "required"
        }
    });
    
    // 发送 assertion 到服务端验证
    console.log("认证成功");
}

最佳实践

  1. SSL 证书有效期注意 398 天限制。Safari 14 拒绝有效期超过 398 天的 SSL 证书。如果你有自签名证书或内部 CA，记得重新签发。Let’s Encrypt 默认 90 天，不受影响。
  2. 给图片加 loading="lazy"。Safari 14 原生支持懒加载，不需要引入第三方库。对长页面（博客、电商列表）的加载性能有明显提升。
  3. WebExtensions 移植先用 converter 工具。xcrun safari-web-extension-converter 会自动处理 API 差异和生成签名配置，不要手动从头搭建。

还有什么值得关注

  • Safari 14 的 ITP 现在会阻止所有第三方 Cookie，不仅仅是跟踪类的，这对广告和嵌入场景影响很大。
  • SpeechRecognition API 在 Safari 14 中支持了中文语音识别，可以用于语音搜索和语音输入。
  • Safari 14 的标签页功能终于支持了 favicon 显示，网页加个好看的 favicon 比以前更有必要了。
WWDC 2020