Chrome 84 กำลังเริ่มเปิดตัวเวอร์ชันเสถียรแล้ว
สิ่งที่จำเป็นต้องทราบมีดังนี้
- ผู้ใช้สามารถเริ่มงานทั่วไปภายในแอปได้ด้วยทางลัดไอคอนแอป
- Web Animations API เพิ่มการรองรับฟีเจอร์จำนวนมากที่ไม่รองรับก่อนหน้านี้
- Wake Lock ช่วยป้องกันไม่ให้หน้าจอหรี่แสงหรือล็อก
- Content Indexing API ช่วยแสดงเนื้อหาที่พร้อมใช้งานแบบออฟไลน์
- มีการทดลองใช้แหล่งที่มาใหม่สำหรับการตรวจหาการใช้งานที่ไม่ได้ใช้งานและ Web Assembly SIMD
- เราเริ่มเปิดตัวการเปลี่ยนแปลงนโยบายคุกกี้ SameSite อีกครั้ง
- และอื่นๆ อีกมากมาย
ผมชื่อ Pete LePage ทำงานและถ่ายทำจากที่บ้าน มาเริ่มดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 84 กัน
ทางลัดไอคอนแอป

ทางลัดไอคอนแอปช่วยให้ผู้ใช้เริ่มงานทั่วไปภายในแอปได้อย่างรวดเร็ว เช่น เขียนทวีตใหม่ ส่งข้อความ หรือดูการแจ้งเตือน แต่ Chrome สำหรับ Android รองรับ
เรียกใช้ทางลัดเหล่านี้ได้โดยกดไอคอนแอปค้างไว้บน Android การเพิ่มทางลัดใน PWA ทำได้ง่าย ๆ เพียงสร้างพร็อพเพอร์ตี้ shortcuts
ใหม่ในไฟล์ Manifest ของเว็บแอป อธิบายทางลัด และเพิ่มไอคอน
"shortcuts": [
{
"name": "Open Play Later",
"short_name": "Play Later",
"description": "View the list you saved for later",
"url": "/play-later",
"icons": [
{ "src": "//play-later.png", "sizes": "192x192" }
]
},
]
ดูรายละเอียดทั้งหมดได้ที่ทําสิ่งต่างๆ ได้อย่างรวดเร็วด้วยทางลัดของแอป
Web animations API
Chrome 84 เพิ่มฟีเจอร์จำนวนมากที่ไม่รองรับก่อนหน้านี้ลงใน Web Animation API
animation.ready
และanimation.finished
ได้รับการสัญญาแล้ว- ตอนนี้เบราว์เซอร์สามารถล้างและนำภาพเคลื่อนไหวเก่าออกได้ ซึ่งจะช่วยประหยัดหน่วยความจำและปรับปรุงประสิทธิภาพ
- และตอนนี้คุณรวมภาพเคลื่อนไหวโดยใช้โหมดคอมโพสิตได้แล้วด้วยตัวเลือก
add
และaccumulate
เราไม่สามารถแสดงรายละเอียดการปรับปรุงทั้งหมดหรือยกตัวอย่างที่ดีได้ โปรดดูรายละเอียดทั้งหมดในการปรับปรุง Web Animations API ใน Chromium 84
Content Indexing API
หากเนื้อหาพร้อมใช้งานโดยไม่ต้องเชื่อมต่อเครือข่าย แต่ผู้ใช้ไม่ทราบเรื่องนี้ใช่ไหม ฟีเจอร์นี้พร้อมใช้งานจริงหรือ เกิดปัญหาในการค้นพบ
Content Indexing API ซึ่งเพิ่งผ่านการทดลองใช้เวอร์ชันแรกแล้วจะช่วยให้คุณเพิ่ม URL และข้อมูลเมตาของเนื้อหาที่พร้อมใช้งานแบบออฟไลน์ได้ จากนั้นระบบจะแสดงเนื้อหาต่อผู้ใช้โดยใช้ข้อมูลเมตาดังกล่าว ซึ่งจะช่วยเพิ่มโอกาสในการค้นพบ
หากต้องการเพิ่มเนื้อหาลงในดัชนี ให้เรียกใช้ index.add()
ใน Service Worker registration และระบุข้อมูลเมตาที่จำเป็นเกี่ยวกับเนื้อหา
const registration = await navigator.serviceWorker.ready;
await registration.index.add({
id: 'article-123',
url: '/articles/123',
launchUrl: '/articles/123',
title: 'Article title',
description: 'Amazing article about things!',
icons: [{
src: '/img/article-123.png',
sizes: '64x64',
type: 'image/png',
}],
});
หากต้องการดูสิ่งที่อยู่ในดัชนีแล้ว โทรหา index.getAll()
เกี่ยวกับการลงทะเบียนผู้ให้บริการ
const registration = await navigator.serviceWorker.ready;
const entries = await registration.index.getAll();
for (const entry of entries) {
// entry.id, entry.launchUrl, etc. are all exposed.
}
ดูรายละเอียดทั้งหมดได้ที่การจัดทําดัชนีหน้าเว็บที่ใช้งานได้แบบออฟไลน์ด้วย Content Indexing API
Wake Lock API

ฉันชอบทำอาหาร แต่รู้สึกหงุดหงิดมากเมื่อทำตามสูตรแล้วโปรแกรมรักษาหน้าจอก็ทำงาน Wake Lock API ซึ่งได้ผ่านการทดลองใช้จากต้นทางใน Chrome 84 แล้ว จะช่วยให้เว็บไซต์สามารถขอ Wake Lock เพื่อไม่ให้หน้าจอหรี่แสงและล็อก
เว็บไซต์ Betty Crocker กำลังใช้ฟีเจอร์นี้อยู่ในปัจจุบัน และเผยแพร่กรณีศึกษาใน web.dev ซึ่งแสดงให้เห็นว่าตัวบ่งชี้ความตั้งใจซื้อเพิ่มขึ้น 300%
หากต้องการรับการล็อกการปลุก ให้เรียกใช้ navigator.wakeLock.request()
ซึ่งจะแสดงผลออบเจ็กต์ WakeLockSentinel
ที่ใช้ "ปล่อย" การล็อกการปลุก
// Request the wake lock
const wl = await navigator.wakeLock.request('screen');
// Release the wake lock
wl.release();
แน่นอนว่ายังมีรายละเอียดอื่นๆ อีกเล็กน้อย โปรดดูการทำให้อุปกรณ์ตื่นอยู่เสมอด้วย Screen Wake Lock API แต่อย่างน้อยหน้าจอของฉันก็จะไม่เต็มไปด้วยแป้งอีกต่อไป
ช่วงทดลองใช้จากต้นทาง
เรามี 2 ฟีเจอร์การทดสอบใหม่เกี่ยวกับต้นทางที่อยากจะพูดถึง หากคุณเพิ่งเคยใช้ช่วงทดลองใช้จากต้นทาง โปรดดูการเริ่มต้นใช้งานช่วงทดลองใช้จากต้นทางของ Chrome
การตรวจจับเมื่อไม่ใช้งาน
Idle Detection API จะแจ้งให้คุณทราบเมื่อผู้ใช้ไม่ได้ใช้งาน ซึ่งบ่งบอกว่าผู้ใช้อาจไม่ได้อยู่หน้าคอมพิวเตอร์ ซึ่งเหมาะสําหรับแอปพลิเคชันแชทหรือเว็บไซต์โซเชียลเน็ตเวิร์กเพื่อแจ้งให้ผู้ใช้ทราบว่ารายชื่อติดต่อพร้อมให้บริการหรือไม่
// Create the idle detector
const idleDetector = new IdleDetector();
// Set up an event listener that fires when idle state changes.
idleDetector.addEventListener('change', () => {
const uState = idleDetector.userState;
const sState = idleDetector.screenState;
console.log(`Idle change: ${uState}, ${sState}.`);
});
// Start the idle detector.
await idleDetector.start({
threshold: 60000,
signal,
});
ดูตรวจหาผู้ใช้ที่ไม่ได้ใช้งานด้วย Idle Detection API เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับ API และวิธีเริ่มทดสอบใช้งานวันนี้
SIMD ของ Web Assembly
และ Web Assembly SIMD จะเริ่มช่วงทดลองใช้จากต้นทาง โดยจะแนะนำการดำเนินการที่จับคู่กับคำสั่ง SIMD ที่พร้อมใช้งานทั่วไปในฮาร์ดแวร์ การดำเนินการ SIMD ใช้เพื่อปรับปรุงประสิทธิภาพ โดยเฉพาะอย่างยิ่งในแอปพลิเคชันมัลติมีเดีย
ดูข้อมูลเพิ่มเติมเกี่ยวกับ WebAssembly SIMD ได้ที่แอปพลิเคชันที่ทำงานแบบขนานได้อย่างรวดเร็วด้วย WebAssembly SIMD
และอื่นๆ
Chrome 84 มีการอัปเดตที่สำคัญมากมาย แต่เราขอชี้ให้เห็นการอัปเดตสำคัญอื่นๆ อีก 2-3 อย่าง
- เราจะกลับมาทยอยเปิดตัวการเปลี่ยนแปลงคุกกี้ SameSite
- ระบบจะลงทะเบียนเว็บไซต์ที่มีคำขอสิทธิ์ที่เป็นการละเมิดหรือมีการแจ้งเตือนที่เป็นการละเมิดในUI การแจ้งเตือนแบบไม่มีการแจ้งเตือนโดยอัตโนมัติ
- มีการทดลองใช้ต้นทางใหม่สำหรับ QuicTransport
อ่านเพิ่มเติม
ข้อมูลนี้เป็นเพียงไฮไลต์สำคัญบางส่วนเท่านั้น ดูการเปลี่ยนแปลงเพิ่มเติมใน Chrome 84 ได้ที่ลิงก์ด้านล่าง
- มีอะไรใหม่ใน Chrome DevTools (84)
- การเลิกใช้งานและการนําออกใน Chrome 84
- การอัปเดต ChromeStatus.com สำหรับ Chrome 84
- มีอะไรใหม่ใน JavaScript ใน Chrome 84
- รายการการเปลี่ยนแปลงที่เก็บข้อมูลซอร์สโค้ด Chromium
สมัครใช้บริการ
หากต้องการติดตามวิดีโอล่าสุดของเรา โปรดติดตามช่อง YouTube ของนักพัฒนาซอฟต์แวร์ Chrome แล้วคุณจะได้รับอีเมลแจ้งเตือนทุกครั้งที่เราเปิดตัววิดีโอใหม่
ผมชื่อ Pete LePage และยังต้องตัดผม แต่ทันทีที่ Chrome 85 เปิดตัว เราจะมาบอกคุณถึงสิ่งใหม่ๆ ใน Chrome