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

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" }
    ]
  },
]

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

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

การใช้งานการล็อกให้อุปกรณ์ทำงานต่อไปในเว็บไซต์ 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

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

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 อย่าง

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

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

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

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

ผมชื่อ Pete LePage และยังต้องตัดผม แต่ทันทีที่ Chrome 85 เปิดตัว เราจะมาบอกคุณถึงสิ่งใหม่ๆ ใน Chrome