简单介绍2020Google开发者大会web亮点

网络

sameSite

Chrome 51 开始，浏览器的 Cookie 新增加了一个SameSite属性，用来防止 CSRF 攻击和用户追踪，分为Strict ，Lax，None

Strict最为严格，完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。换言之，只有当前网页的 URL 与请求目标一致，才会带上 Cookie

这个规则过于严格，可能造成非常不好的用户体验。比如，当前网页有一个 GitHub 链接，用户点击跳转就不会带有 GitHub 的 Cookie，跳转过去总是未登陆状态

Lax规则稍稍放宽，允许同站请求发送Cookie，但大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。
None允许跨站请求，前提是必须同时设置Secure属性（Cookie 只能通过 HTTPS 协议发送），否则无效

sameSite	HTTP → HTTPS	HTTPS → HTTP
SameSite=Strict	⛔ Blocked	⛔ Blocked
SameSite=Lax	✓ Allowed	✓ Allowed
SameSite=None; Secure	✓ Allowed	⛔ Blocked

查看更多信息

User-Agent Client Hints(UA-CH)

从Chrome 85开始，正式发布

⬇️ ResponseAccept-CH	⬆️ Requestheader	⬆️ RequestExample value	Description
UA	Sec-CH-UA	“Chromium”; v=”84”, “Google Chrome”; v=”84”	List of browser brands and their significant version.
UA-Mobile	Sec-CH-UA-Mobile	?1	Boolean indicating if the browser is on a mobile device (?1 for true) or not (?0 for false).
UA-Full-Version	Sec-CH-UA-Full-Version	“84.0.4143.2”	The complete version for the browser.
UA-Platform	Sec-CH-UA-Platform	“Android”	The platform for the device, usually the operating system (OS).
UA-Platform-Version	Sec-CH-UA-Platform-Version	“10”	The version for the platform or OS.
UA-Arch	Sec-CH-UA-Arch	“ARM64”	The underlying architecture for the device. While this may not be relevant to displaying the page, the site may want to offer a download which defaults to the right format.
UA-Model	Sec-CH-UA-Model	“Pixel 3”	The device model.

JavaScript API

Alongside the headers, the User-Agent can also be accessed in JavaScript via navigator.userAgentData. The default Sec-CH-UA and Sec-CH-UA-Mobile header information can be accessed via the brands and mobile properties, respectively:

// Log the brand data
console.log(navigator.userAgentData.brands);

// output
[{
    brand: 'Chromium',
    version: '84',
  },
  {
    brand: 'Google Chrome',
    version: '84',
  },
];

// Log the mobile indicator
console.log(navigator.userAgentData.mobile);

// output
false;

查看更多信息

CSS布局

介绍了一些grid新特性

强居中

三段式布局

经典布局

查看更多实例

思考：优化运营后台页面，自适应布局？

搜索（高级SEO）

利用结构化数据获取 Google 搜索的自然流量

构建富媒体搜索数据，助力Bigo海外电商，直播，imoJobs等业务

imojobs

测试地址

下面是一个购物信息汇总网站页面示例

 <html>

 <head>
   <title>Executive Anvil</title>
 </head>

 <body>
   <div>
     <div itemtype="http://schema.org/Product" itemscope>
       <meta itemprop="mpn" content="925872" />
       <meta itemprop="name" content="Executive Anvil" />
       <link itemprop="image" href="https://example.com/photos/16x9/photo.jpg" />
       <link itemprop="image" href="https://example.com/photos/4x3/photo.jpg" />
       <link itemprop="image" href="https://example.com/photos/1x1/photo.jpg" />
       <meta itemprop="description" content="Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height." />
       <div itemprop="offers" itemtype="http://schema.org/AggregateOffer" itemscope>
         <meta itemprop="lowPrice" content="119.99" />
         <meta itemprop="highPrice" content="199.99" />
         <meta itemprop="offerCount" content="6" />
         <meta itemprop="priceCurrency" content="USD" />
       </div>
       <div itemprop="aggregateRating" itemtype="http://schema.org/AggregateRating" itemscope>
         <meta itemprop="reviewCount" content="89" />
         <meta itemprop="ratingValue" content="4.4" />
       </div>
       <div itemprop="review" itemtype="http://schema.org/Review" itemscope>
         <div itemprop="author" itemtype="http://schema.org/Person" itemscope>
           <meta itemprop="name" content="Fred Benson" />
         </div>
         <div itemprop="reviewRating" itemtype="http://schema.org/Rating" itemscope>
           <meta itemprop="ratingValue" content="4" />
           <meta itemprop="bestRating" content="5" />
         </div>
       </div>
       <meta itemprop="sku" content="0446310786" />
       <div itemprop="brand" itemtype="http://schema.org/Brand" itemscope>
         <meta itemprop="name" content="ACME" />
       </div>
     </div>
   </div>
 </body>

 </html>

思考：可以利用Node+CDN服务搭建富媒体HTML直出平台，优化SEO？

自动化测试

PageSpeed Insights(PSI)

PSI 作为一款专注于改进网页性能的开发者工具

它主要具有以下两个优势：

真实的网页运行速度。这是 PSI 2.0 中的新功能，PSI 结合 Chrome 用户体验报告中的数据，向开发者展示他们的网页的实际性能，这一点对于开发者来说是很有价值的。那么，PSI 则成为了用户获得真实的网页运行速度的窗口。
优化建议。根据一些常用的网页性能优化规则(如避免过多的重定向)，PSI 会基于该网页的优化空间为用户提供一些网页优化建议。

Puppeteer

Nodejs工具库，它提供了高级的JavaScript API 来通过DevTools控制 Chromium与其他浏览器

Puppeteer能做什么？

生成页面的屏幕截图和PDF。
爬取SPA（单页应用程序）并生成预渲染的内容（即“ SSR”（服务器端渲染））。
高级爬虫，可以爬取大量异步渲染内容的网页。
自动进行表单提交，UI测试，键盘输入，模拟时区，改变深色主题等。
创建最新的自动化测试环境。使用最新的JavaScript和浏览器功能，直接在最新版本的Chrome中运行测试。
捕获站点的时间线跟踪，以帮助诊断性能问题。
测试Chrome扩展程序。

example.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({
    path: 'example.png'
  });

  await browser.close();
})();

node example.js

最新进展介绍

思考：可以构建Serveless服务，搭建FaaS平台，助力前端服务和运营服务？

Web Vitals

什么是 Web Vitals ，Google 给的定义是一个良好网站的基本指标 (Essential metrics for a healthy site)，为什么还要再定义一个新的指标集，原因是过去要衡量一个好的网站，需要使用的指标太多，推出 Web Vitals 是简化这个学习的曲线，站主只要观注 Web Vitals 指标表现即可。

三大指标

使用web-vitals库，测量每个指标就像调用单个函数一样简单（有关完整用法和 API详细信息，请参阅文档）：

import {
  getCLS,
  getFID,
  getLCP
} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
  fetch('/analytics', {
    body,
    method: 'POST',
    keepalive: true
  });
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);