Chrome 79 现已推出!
- Android 上安装的渐进式 Web 应用现在支持可遮盖式图标。
- 您现在可以使用 WebXR Device API 创建沉浸式体验。
- Wake Lock API 目前处于源试用阶段。
rendersubtree
属性作为源试用提供。- Chrome 开发者峰会上的视频现已可上线。
- 等等。
我是 Pete LePage,一起来深入了解下 Chrome 79 会为开发者带来哪些新功能吧!
可遮罩图标
如果您运行的是 Android O 或更高版本,并且已安装 Progressive Web App,那么您可能已经注意到图标周围有一个烦人的白色圆圈。
幸运的是,Chrome 79 现在支持为已安装的渐进式 Web 应用添加可遮盖图标。在设计图标时,您需要使图标位于安全区域内,也就是一个直径为画布 80% 的圆形。
然后,在 Web 应用清单中,您需要为图标添加新的 purpose
属性,并将其值设置为 maskable
。
{
...
"icons": [
...
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable"
]
...
}
Tiger Oakes 在 CSS Tricks 上有一个很棒的博文:Maskable Icons: Android Adaptive Icons for Your PWA 介绍了所有细节,并提供了一款出色的工具,供您测试图标以确保图标合适。
Web XR
您现在可以使用 WebXR Device API 为智能手机和头戴式显示屏打造沉浸式体验。
WebXR 支持各种沉浸式体验。从增强现实体验(在购买新沙发之前看看家里可能会是什么样子)到虚拟现实游戏和 360 度全景电影等等。
要开始使用以下新 API,请参阅网络虚拟现实问世。
新的源试用
源试用让我们有机会验证实验性功能和 API,并让您能够针对其在更广泛的部署中的易用性和有效性提供反馈。
实验性功能通常仅在标志后可用,但当我们针对某项功能提供源试用时,您可以注册该源试用,以便为源站的所有用户启用该功能。
通过选择加入源试用,您可以构建演示和原型,以供 Beta 版测试用户在试用期间进行试用,而无需在 Chrome 中切换任何特殊标志。
如需详细了解源试用,请参阅面向 Web 开发者的源试用指南。您可以查看有效源试用的列表,并在 Chrome 源试用页面上进行注册。
唤醒锁
关于 Google 幻灯片,我最大的烦恼之一就是 如果您在某张幻灯片上长时间打开演示文稿,屏保就会启动。您需要解锁计算机,才能继续。呃,
但是,借助新的 Wake Lock API,页面可以请求锁定,并防止屏幕变暗或屏保启动。它非常适合 Google 幻灯片,但对于食谱网站等方面也很有用,在按照说明操作时,您可能需要让屏幕保持开启状态。
如需请求唤醒锁定,您需要调用 navigator.wakeLock.request()
,并保存其返回的 WakeLockSentinel
对象。
// The wake lock sentinel.
let wakeLock = null;
// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
try {
wakeLock = await navigator.wakeLock.request('screen');
wakeLock.addEventListener('release', () => {
console.log('Wake Lock was released');
});
console.log('Wake Lock is active');
} catch (err) {
console.error(`${err.name}, ${err.message}`);
}
};
这种锁定将一直保持,直到用户离开页面,或您对之前保存的 WakeLockSentinel
对象调用 release
。
// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
if (!wakeLock) {
return;
}
try {
await wakeLock.release();
wakeLock = null;
} catch (err) {
console.error(`${err.name}, ${err.message}`);
}
};
如需了解详情,请访问 web.dev/wakelock。
rendersubtree
个属性
有时,您不希望 DOM 的某些部分立即渲染。例如,包含大量内容的滚动条,或在任何给定时间仅显示部分内容的标签页式界面。
新的 rendersubtree
属性告知浏览器可以跳过渲染该子树。这样,浏览器就可以将更多时间花在处理页面的其余部分,从而提高性能。
当 rendersubtree
设置为 invisible
时,元素的内容不会被绘制或进行点击测试,从而可以优化渲染。
将 rendersubtree
更改为 activatable
,即可通过移除 invisible
属性并呈现内容来使内容可见。
2019 年 Chrome 开发者峰会
如果您错过了 Chrome 开发者峰会,可以在我们的 YouTube 频道上观看所有讲座。
Jake 还有一个很棒的 Twitter 帖子,其中介绍了两次演讲之间发生的各种有趣内容,包括我们团队的最新成员 Surjiko。
深入阅读
这里仅介绍一些重要的亮点。如需了解 Chrome 78 中的其他变化,请点击以下链接。
- Chrome 开发者工具的新变化 (79)
- Chrome 79 弃用和移除
- Chrome 79 的 ChromeStatus.com 更新
- Chrome 79 中的 JavaScript 的新变化
- Chromium 源代码库变更列表
订阅
如果您想及时了解我们视频的最新动态,请订阅我们的 Chrome Developers YouTube 频道。每当我们发布新视频时,您都会收到电子邮件通知。
我叫 Pete LePage