ฟีเจอร์ใหม่ใน Chrome 84

Pete LePage

Chrome 84 เริ่มเปิดตัวเป็นเวอร์ชันเสถียรแล้ว

สิ่งที่จำเป็นต้องทราบมีดังนี้

ผมชื่อ Pete LePage ทำงานและถ่ายทำจากที่บ้าน มาเริ่มดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 84 กัน

ทางลัดไอคอนแอป

ทางลัดไอคอนแอปสำหรับ PWA ของ Twitter

ทางลัดของไอคอนแอปช่วยให้ผู้ใช้เริ่มงานทั่วไป ในแอปได้อย่างรวดเร็ว เช่น เขียนทวีตใหม่ ส่งข้อความ หรือดูการแจ้งเตือน มีการสนับสนุนใน 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" }
    ]
  },
]

ดูรายละเอียดทั้งหมดได้ที่ทําสิ่งต่างๆ ได้อย่างรวดเร็วด้วยทางลัดของแอป

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

API Wake Lock

การใช้ Wake Lock บนเว็บไซต์ของ Betty Crocker

ฉันชอบทำอาหาร แต่ฉันพบว่ามันน่าหงุดหงิดสุดๆ เมื่อทำตามสูตรอาหาร แล้วภาพพักหน้าจอก็เริ่มเข้ามาแทน 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

การตรวจจับเมื่อไม่ใช้งาน

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 และวิธีเริ่มทดสอบใช้งานวันนี้

ซิมการประกอบเว็บ

และ Web Assembly SIMD จะเริ่มช่วงทดลองใช้จากต้นทาง โดยจะแนะนำการดำเนินการที่จับคู่กับคำสั่ง SIMD ที่พร้อมใช้งานทั่วไปในฮาร์ดแวร์ การดำเนินการ SIMD ใช้สำหรับปรับปรุงประสิทธิภาพ โดยเฉพาะอย่างยิ่งในแอปพลิเคชันมัลติมีเดีย

ดูข้อมูลเพิ่มเติมเกี่ยวกับ WebAssembly SIMD ได้ที่แอปพลิเคชันที่ทำงานแบบขนานได้อย่างรวดเร็วด้วย WebAssembly SIMD

และอื่นๆ

Chrome 84 มีขนาดใหญ่ แต่ยังมีอัปเดตสำคัญๆ อื่นๆ ที่ผมอยากพูดถึง

อ่านเพิ่มเติม

ข้อมูลนี้เป็นเพียงไฮไลต์สำคัญบางส่วนเท่านั้น ไปที่ลิงก์ด้านล่างเพื่อดูการเปลี่ยนแปลง เพิ่มเติมใน Chrome 84

สมัครใช้บริการ

หากต้องการติดตามวิดีโอล่าสุดของเรา โปรดติดตามช่อง YouTube ของนักพัฒนาซอฟต์แวร์ Chrome แล้วคุณจะได้รับอีเมลแจ้งเตือนทุกครั้งที่เราเปิดตัววิดีโอใหม่

ฉันชื่อ Pete LePage ฉันยังจำเป็นต้องตัดผมอยู่ แต่ทันทีที่ Chrome 85 เปิดตัว ฉันจะบอกคุณว่ามีอะไรใหม่ใน Chrome!