ฟีเจอร์ใหม่ใน 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 Animations API

  • animation.ready และ animation.finished ได้รับสัญญาแล้ว
  • ตอนนี้เบราว์เซอร์จะล้างและนำภาพเคลื่อนไหวเก่าออก ช่วยประหยัดหน่วยความจำ และปรับปรุงประสิทธิภาพ
  • และตอนนี้คุณสามารถรวมภาพเคลื่อนไหวโดยใช้โหมดผสมโดยใช้ตัวเลือก add และ accumulate ได้แล้ว

ฉันไม่สามารถปรับปรุงทุกส่วนหรือนำเสนอตัวอย่างที่ดีได้ที่นี่ ดังนั้นดูรายละเอียดทั้งหมดได้ที่ การปรับปรุง Web Animations API ใน Chromium 84

API การจัดทำดัชนีเนื้อหา

หากเนื้อหาของคุณใช้ได้โดยไม่ต้องเชื่อมต่อเครือข่าย แต่ผู้ใช้ไม่รู้จัก สิ่งนี้ใช้ได้จริงไหม เกิดปัญหาในการค้นพบ

เมื่อใช้ Contentการจัดทำดัชนี API ที่เพิ่งเปลี่ยนรุ่นจากเวอร์ชันเดิม คุณจะสามารถเพิ่ม URL และข้อมูลเมตาสำหรับเนื้อหาที่พร้อมใช้งานแบบออฟไลน์ ด้วยการใช้ข้อมูลเมตาดังกล่าว เนื้อหาจะปรากฏต่อผู้ใช้ เพื่อปรับปรุงการค้นพบได้

หากต้องการเพิ่มเนื้อหาไปยังดัชนี ให้เรียก index.add() ในการลงทะเบียน Service Worker และระบุข้อมูลเมตาที่จำเป็นเกี่ยวกับเนื้อหา


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การจัดทำดัชนี API

API ล็อกการปลุกระบบ

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

ฉันชอบทำอาหาร แต่ก็รู้สึกน่าหงุดหงิดมากเมื่อทำตามสูตรอาหาร แล้วภาพพักหน้าจอก็เริ่มทำงาน! เมื่อใช้ Wake Lock API ซึ่งเพิ่งผ่านช่วงทดลองใช้จากต้นทางใน Chrome 84 เว็บไซต์จะขอ Wake Lock ได้เพื่อป้องกันไม่ให้หน้าจอหรี่แสงและการล็อก

จริงๆ แล้วเว็บไซต์ Betty Crocker กำลังใช้อยู่ในตอนนี้ และเผยแพร่กรณีศึกษาบน web.dev ซึ่งแสดงให้เห็นว่าตัวชี้วัดความตั้งใจในการซื้อเพิ่มขึ้น 300%

หากต้องการใช้ Wake Lock ให้โทรหา navigator.wakeLock.request() ซึ่งจะส่งคืนออบเจ็กต์ WakeLockSentinel ซึ่งใช้ "ปล่อย" Wake Lock


// 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 และวิธีเริ่มทดลองใช้ API นี้เลย

SIMD สำหรับประกอบเว็บ

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

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

และอื่นๆ

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

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

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

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

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

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