the Web in 2018

the Web in 2018

W3C

https://www.w3.org/people/xiaoqian/talks/yy-2018/

主题

1. 关于 W3C
• 概览
• 社区
• 参与
2. 核心 Web 技术发展
   • CSS Houdini
   • HTML Web Components
   • Web Perf APIs
   • PWA
3. 拓展 Web 的能力
   • Media & Web XR
   • Web 5G
   • Web RTC
   • Web Assembly
   • Web Payment
   • Web Authentication
   • Web Security & Privacy
4. Web for All
   • 国际化
   • 无障碍

Lead the Web to its Full Potential

• The Web is a tool for communicating. Web 是一个沟通工具。
• The Web can help people understand each other. Web 能帮助人们彼此理解。
• Let's use the web to create neat new exciting things. 让我们用 Web 创造一点美好的东西。
• Let's use the Web to help people understand each other. 让我们用 Web 帮助人们理解对方。

W3C 标准文档

W3C 需要你

• 有问题？GitHub Issues
• 有想法？WICG
• 怎么用？MDN
• 能用吗？web-platform-tests
• Code of Ethics and Professional Conduct

核心 Web 技术发展

Web Layout 的未来

• 天下一网

  蒂姆伯李

  “One web under heaven” — Timblucius @frivoal

• 现在？CSS Snapshot 2018
• 重点：flexbox and grid layout
• Houdini: 可与样式布局渲染引擎交互的API，深入实现底层，动态构建绘制
  • CSS Painting API：用一个函数，根据需求动态绘制背景图片
  • CSS Properties and Values API
    • 自定义元素属性值
    • 打破Custom Properties 的限制：必须是继承的；无法定义语法
  • CSS Typed OM: 性能优化，用数字代替 String 来传递信息
  • Worklet 和 animation
• 更好的 Fonts 支持：WOFF2, 提高了压缩效率，使用率 70%+

参与: CSS Working Group, drafts, blog, GH

HTML Web Components

• Shadow DOM
  • -> shadow trees in the DOM spec
  • 实现：
• Custom Elements
  • -> Custom Elements in the HTML spec
  • 实现：
• HTML Templates
  • -> the template element in the HTML spec
  • 实现：
• 更多想法
  • Template instantiation
  • HTML modules

Performance

寻找性能瓶颈

Performance Observer

      
      var observer = new PerformanceObserver(function(list) {
        for (var i = 0; i < perfEntries.length; i++)
        {
          ...
        }
        if (doneObservingEvents) {
           observer.disconnect();
        }
      });
      // subscribe to Resource-Timing and User-Timing events
      observer.observe({entryTypes: ['resource', 'mark', 'measure']});
  
    

示例：

Server Timing

Server Timing: 允许 Server 和 浏览器沟通 request-response 循环里的性能数据

•       
        GET /resource HTTP/1.1
        > Host: example.com
  
        < HTTP/1.1 200 OK
        < Server-Timing: miss, db;dur=53, app;dur=47.2
        < Server-Timing: customView, dc;desc=atl
        < Server-Timing: cache;desc="Cache Read";dur=23.2
        
      

•       
  [Exposed=(Window,Worker)]
  interface PerformanceServerTiming {
      readonly attribute DOMString           name;
      readonly attribute DOMHighResTimeStamp duration;
      readonly attribute DOMString           description;
      [Default] object toJSON();
  };
        
      

示例：

Resource Timing 资源加载

• performance.getEntriesByType(“resource”)
• 可衡量的资源：img, video, iframe, css, XHR等
• 示例：

Navigation Timing 页面浏览

• performance.getEntriesByType(“navigation”)
• 浏览器把请求到的HTML, CSS和JavaScript渲染为用户可见的像素点
• 示例：

Paint Timing API 绘制时间

• observer.observe({entryTypes: ["paint"]});
• First Paint (FP)： 屏幕上出现第一个和原 navigation 不一样的点，name == “first-paint”
• First Contentful Paint (FCP)：首次绘制出 DOM 内容，name == “first-contentful-paint”
• 下一步：First Meaningful Paint？Hero Elements
• 示例：

Long Tasks API 任务响应

• observer.observe({entryTypes: ["longtask"]});
• 瓶颈之一： CPU 资源
• RAIL 性能模型：在 100ms 内响应用户输入
• 大于 50ms 的都是 long task！
• 下一步：自定义阈值？Time to Interact?
• 示例：

User Timing 用户行为

• performance.mark("task")
• performance.getEntriesByType(“mark”)
• performance.measure(“name”, “task1”, "task2" )
• performance.getEntriesByType(“measure”)
• 下一步：Event Timing？
• 示例：

NetInfo API 网络链接

• navigator.connection.effectiveType
• navigator.connection.type
• 示例：

Device Memory 内存能力

• server: Accept-CH = Device-Memory
• client hints header: Device-Memory: 0.5
• 使用：navigator.deviceMemory
• [0.25, 0.5, 1, 2, 4, 8] —> [256M, 500M/768M, 1G/1000M, 2G, 4G, 8G]
• 使用：

节流 — PV, IO

• Page Visibility：document.visibilityState == “hidden" ？ “visible"；
• 减少不必要的开销，节约电源
• new IntersectionObserver(changes => {…}, {})；监测 DOM 元素的；
• Intersection Observer：可见性 visibility 和 位置 position；

让浏览器更智能 — Cooperative Scheduling of Background Tasks

• window.requestIdleCallback(dowork);
• requestIdleCallback：告诉浏览器你希望如何利用 idle 资源；

优化资源加载效率 Preload

<link rel="preload" href=“/url" as=“type”>

当前页 as=audio, video, style, script, document(for iframe), image…

高优先级的 fetch，预加载资源，但不执行，as 必须定义；

优化资源加载效率 Resource Hints

Progressive Web Application (PWA)

• Home screen integration & UI theme customization (Web App Manifest)
• Programmatic offline behavior Service Worker
• Push Notifications (Push and Notifications)

参与: PWAs and Beyond: The Next Generation of Web Apps (Sakura)

拓展 Web 的能力

Web 媒体

On-demand 内容媒体 -- TV, 电影，高清视频等

版本保护EME，Presentation API，Remote Playback API, TTML字幕控制，WebAudio API

Live 内容媒体 -- 体育赛事，演唱会，新闻，直播

CDN, Web RTC 分布式推送, WebAssembly, Picture-in-Picture

Interactive 内容媒体 -- 游戏，虚拟视频，在线教育等

WebXR Device API, Web5G

更丰富的 Web 媒体娱乐

Web TV 与娱乐：HTML5支持、EME版权保护、XR支持

Web RTC 分布式推送

CTA WAVE 项目：商业媒体 Web 支持

为虚拟未来准备

VR / AR / MR:

WebXR

360 videos

Harness processing power:

GPU for the Web

WebAssembly

5G

WebXR Device API

• 检测可用的 XR 设备
• 获取 XR 设备的参数和能力
• 实时跟踪设备的角度和位置
• 实时跟踪设备环境
• 根据设备的更新帧率传送合适的图像
• 提供 XR 输入信息，包括设备操作和手势
• 对支持 AR 的设备，根据现实图像生成会话，并提供与现实交互的接口

Web5G

• 应用层的变革: XR, IoT, automotive, 4K & 8K videos
• 网络层和传输层变革: 5G, NFV, SDN, MEC, QUIC
• AI 和 Machine Learning 跨层次影响

它们能否协作?

W3C Web5G技术研讨会: 应对互联网与Web技术的发展

WebRTC

• WebRTC 1.0 定稿 -- 在线通讯和点对点应用的基石
• 下一代 WebRTC -- 在线通讯和点对点应用的基石
• 国内应用场景：直播视频内容推送

Web Assembly

• 一种全新的虚拟机、运行环境、子令集
• SIMD (single instruction, multiple data): make loops like forEach execute in parallel
• Threads
• Exceptions
• JS-like: 1) access to DOM; 2) library module interface like ES6
• shared memory (access to SharedArrayBuffer)

探索需求和语言定义 WebAssembly Community Group

测试与社区 review WebAssembly Working Group

为什么要做 Web 支付

• 一份代码，多平台适用
• 不需要插件安装
• 不需要app占用存储空间
• 实时更新
• 全球用户可用
• 全球开发者社区
• W3C Royalty-free 协议
• 简单易读的代码

优雅、流畅、安全的支付体验

PaymentRequest API

安全地存储账户信息，实现流畅支付

跨平台地实现用户个性化支付

减少商户冗余代码，一个API替代各种插件

Chrome，Safari，Edge，三星已实现，Firefox 8月支持

Facebook, Shopify, Stripe, Braintree, WePay, Bluesnap, Paysafe, BS Payone等已使用

Payment Handler API

通过浏览器电子钱包实现支付

以浏览器协调电商、银行、用户的关系，提供安全便捷的接口支持

通过浏览器UI简化用户交互

Safari 和 Chrome 已经支持app handler

Chrome 已经支持浏览器 handler，三星和FF开发中

Coil, Facebook, Klarna, Lyra Networks, Mastercard, Shopify, Worldline,和 Worldpay等公司在试验中

优雅、流畅、安全的支付体验

优雅、流畅、安全的支付体验 —— methodData

      
      const methodData = [{
        supportedMethods: "basic-card",
        data: {
          supportedNetworks: ["visa", "mastercard"],
          supportedTypes: ["debit", "credit"],
        },
      }, {
      supportedMethods: "https://example.com/bobpay",
        data: {
        merchantIdentifier: "XXXX",
        bobPaySpecificField: true,
      },
    }];
  
    

优雅、流畅、安全的支付体验 —— details

      
      const details = {
        id: "super-store-order-123-12312",
        displayItems: [{
          label: "Sub-total",
          amount: { currency: "USD", value: "55.00" },
        }, {
        label: "Sales Tax",
        amount: { currency: "USD", value: "5.00" },
        type: "tax"
      }],
      total: {
        label: "Total due",
        amount: { currency: "USD", value: "65.00" },
      }};
  
    

      
async function doPaymentRequest() {
  try {
    const request = new PaymentRequest(methodData, details, options);
    request.onshippingoptionchange = ev => ev.updateWith(details);
    const response = await request.show();
    await validateResponse(response);
  } catch (err) {}
}
async function validateResponse(response) {
  try {
    if (await checkAllValuesAreGood(response)) {
      await response.complete("success");
    } else {
      await response.complete("fail");
    }
  } catch (err) {}
}
doPaymentRequest();
  
    

Web Applications Security

• 第一道防线：同源资源 -> CORS?
• CSP: 开发者自定义资源安全策略的策略语言；通过安全隧道传输的应用，避免脚本注入和跨域攻击等；
• Subresource Integrity: 安全地把子资源自载入应用，避免中间人攻击或被攻击的第三方供应商;
• Mixed Content: 设置明确的规则，确定那些 HTTPs 不提供的内容在何时可以或不可以从 HTTPs 页面上加载;
• Secure Contexts: 敏感数据或私有数据只能在安全上下文中通过经过身份验证和加密的渠道传输;
• Upgrade Insecure Requests: 指示浏览器通过 HTTPs 加载原来是 HTTP 的网站等资源来帮助迁移;
• Permissions API
• Credential Management

Participate: Group, drafts

Security and Privacy Considerations Everywhere

• 服务于整个开放的 Web 平台.
• Review, review, review!
• 在接口设计阶段考虑 security 和 privacy risk.
• 为开放者提供更多的使用该技术的安全建议.

Web Authentication

普适、安全、强认证方式

每个站点提供强大、唯一且基于公钥的凭证

Participate: Group, GH

Web Authentication

• 更简单的身份验证：用户只需使用一种手势登录
  • PC、笔记本电脑和/或移动设备中的内部或内置认证器（如指纹或面部生物识别技术）
  • 使用CTAP进行设备到设备认证的外部认证器（如安全密钥和移动设备），一个由FIDO联盟开发的用于补充WebAuthn的外部认证器协议
• 更强的身份验证：用户只需使用一种手势登录
  • 用户证书和生物识别模板永远不会离开用户的设备，也不会存储在服务器上
  • 帐户可以免受网络钓鱼，中间人攻击和使用被盗密码的反复攻击
• 开发人员可以开始在FIDO新的开发者资源页面上创建利用FIDO身份验证的应用程序和服务。

Privacy and GDPR

• 用户对 Privacy 的关注正在增加...
• EU General Data Protection Regulation goes into effect on May 25:
  protect and empower all EU citizens’ data privacy
• Tracking Preference Expression (DNT) 是解决方案的一部分

Verifiable Claims可验证声明

• 检验“可验证的声明证书” (加密信息), 向权威方的请求验证用户信息，并使用验证结果分类展示推送。

• 

Web for All

Make the World Wide Web worldwide!

• 国际化？多语言？本地化？
• 让 Web 支持各国文化语言 Review
• 最佳实践：bidi?

Participate: Group, GH