Chrome 76 新特性

• 文档说明
  • 做者：西楼听雨
  • 禁止转载
  • 本文同时发布于幕布平台：mubu.com/doc/oBCH2vS…
• 新特性一：网站为 PWA 应用时，会在地址栏显示安装按钮
  • 在 PC 端的 Chrome 上，为了让用户能够更便捷地将 PWA 应用添加到桌面，Chrome 76 会在地址栏添加一个安装按钮——只要你的网站知足 PWA 可安装性条件——以此提示用户，当用户点击该按钮时，效果等同于调用 beforeinstallprompt 事件对象上的 prompt() 方法——弹出安装对话框，这样就给用户带来了极大的便捷。
    
  • 扩展阅读
    • PWA 应用可安装性条件
      developers.google.com/web/fundame…
    • 详解地址栏安装 PWA
      developers.google.com/web/updates…
• 新特性二：可禁止默认的 PWA 应用安装 mini-infobar (迷你信息栏）
  • 在移动端的 Chrome 中，若是你的网站知足 PWA 可安装性条件，那么当用户首次访问你的网站时，Chrome 就会向用户展现一个小型的信息栏（以提示用户将网站添加到手机桌面）。但有时候咱们可能不但愿它自动展现，或者但愿展现的是本身定义的安装提示。
    • 小型信息栏（mini-infobar）示例
      
  • 因此从 Chrome 76 开始，咱们能够经过调用 beforeinstallprompt 事件对象上的 preventDefault() 方法来阻止这个小型信息栏的自动展现。
    
  • 注意：在不采用默认的小型信息栏后，建议确保在界面上作相应的自定义提示，以提示、暗示用户你的 PWA 应用是能够被安装的。关于如何向用户提示 PWA 可安装的一些最佳实践，能够查看 “Patterns for Promotiong PWA installation”这篇文章。
    developers.google.com/web/fundame…
  • 扩展阅读
    • PWA 应用可安装性条件
      developers.google.com/web/fundame…
    • mini-infobar (迷你信息栏）
      developers.google.com/web/fundame…
      ​
• 新特性三：WebAPK 的更新更及时了
  • 在安卓版的 Chrome 下，用户选择安装一个 PWA 应用时，Chrome 会自动安装一个 WebAPK，而后 Chrome 会自动按期去检查这个 PWA 应用的 manifest 文件是否有更新——好比你可能更新了图标、主题色，或者更改了应用的名称——以肯定是否须要安装新的 WebAPK 来同步更新。
    • 编注：WebAPK 本质上仍是 Web 应用，只是它和本地 APP 比较像——有图标，和其余本地 APP 共存
  • 在 Chrome 的这个版本以后，对 manifest 的检查频率会变得更高，不是以前的 3 天 1 次，而是改成 1 天 1 次了。
  • 扩展阅读
    • WebAPK介绍（需越墙）
      developers.google.com/web/fundame…
    • 更新频率的详细说明（需越墙）
      developers.google.com/web/updates…
• 新特性四：开始支持 prefers-color-scheme 媒体查询项
  • 许多操做系统都支持暗色模式（或者也叫暗色主题），若是咱们想根据用户的这项偏好来调整咱们的界面外观的话，就能够借助这个媒体查询项来实现。
    
    • web.dev 网站上有一篇关于这个媒体查询项全部细节的文章，叫作“Hello darkness, my old friend”，文中还给出了如何同时支持亮色和暗色的 CSS 样式架构设计方面的建议，有兴趣能够去了解下。
• 新特性五：开始支持 Promise.allSettled() 方法
  • 咱们都知道 Promise.all() 方法的含义，它指的是把传入这个方法的全部 promise 当成一个总体的 promise，只有全部 promise 都处于 resolved 状态了，这个总体的 promise 才会被 resolved，并开始执行 then 回调；而只要其中一个 rejected 了，那么就不等剩下还没执行完成的 promise 了，直接把这个总体 promise 设置为 rejected 状态，并马上执行后续的 catch 回调。Promise.allSettled() 与它只有一点不同，就是它会等到全部的 promise 都执行完才设置状态，无论有没有哪一个 promise 被 rejected 了。
    
• 新特性六：读取 Blob 对象中的数据更加方便了
  • 对 Blob 对象中存储的内容进行读取，如今有三个新的方法可用：text()、arrayBuffer()、stream()，再也不须要像之前同样经过 FileReader 来读取。下面这段代码就是新旧方式的对比：
    
• 新特性七：异步剪贴板 API 开始支持图片的复制/粘贴了
  • 关于这个特性的详细介绍，请查看：developers.google.com/web/updates…（需越墙）
• 关联文档
  • Chrome 76 开发者工具新特性
    mubu.com/doc/9bPKhv7…
  • Chrome 75 新特性
    mubu.com/doc/mz-ZAFi…
  • Chrome 更新日志目录
    mubu.com/doc/AObcWUR…
• 扩展阅读
  • What's new in JavaScript in Chrome 76 （Chrome 76 中的 JS 新特性）
    v8.dev/blog/v8-rel…
• 其余说明
  • 做者：洛水惊鸿
    我就是21世纪最伟大的发明​​
  • 打赏：你的一枚硬币，培养的却多是下一代比尔·盖茨
    
  • 联系 & 交流 & 聘用