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

พีต เลอเพจ

Chrome 79 กำลังเปิดตัวแล้ว

  • Progressive Web App ที่ติดตั้งใน Android รองรับไอคอนที่มาสก์ได้แล้ว
  • คุณสร้างประสบการณ์ที่สมจริงด้วย WebXR Device API ได้แล้วในตอนนี้
  • Wake Lock API พร้อมให้ใช้งานเป็นช่วงทดลองใช้จากต้นทาง
  • แอตทริบิวต์ rendersubtree พร้อมให้ใช้งานเป็นช่วงทดลองใช้จากต้นทาง
  • วิดีโอจาก Chrome DevSummit ออนไลน์แล้ว
  • และอื่นๆ อีกมากมาย

ฉันชื่อ Pete LePage มาสำรวจดูกันว่ามีอะไรใหม่ สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 79!

ไอคอนที่มาสก์ได้

หากคุณใช้ Android O หรือเวอร์ชันใหม่กว่าและติดตั้ง Progressive Web App คุณอาจสังเกตเห็นวงกลมสีขาวน่ารำคาญรอบๆ ไอคอน

แต่โชคดีที่ Chrome 79 รองรับไอคอนที่มาสก์ได้สำหรับ Progressive Web App ที่ติดตั้งแล้ว คุณจะต้องออกแบบไอคอนให้พอดีภายในโซนที่ปลอดภัย ซึ่งก็คือวงกลมที่มีเส้นผ่านศูนย์กลางเท่ากับ 80% ของผืนผ้าใบ

จากนั้นในไฟล์ Manifest ของเว็บแอป คุณจะต้องเพิ่มพร็อพเพอร์ตี้ purpose ใหม่ลงในไอคอน แล้วกำหนดค่าเป็น maskable


{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

Tiger Oakes มีโพสต์ดีๆ เกี่ยวกับ CSS Tricks - ไอคอนที่มาสก์ได้: Android Adaptive Icons for Your PWA พร้อมรายละเอียดทั้งหมดและมีเครื่องมือที่ยอดเยี่ยม ให้คุณใช้ทดสอบไอคอนเพื่อให้แน่ใจว่าไอคอนจะพอดี

เว็บ XR

ตอนนี้คุณสามารถสร้างประสบการณ์ที่สมจริงสำหรับสมาร์ทโฟนและจอแสดงผลติดศีรษะ ด้วย WebXR Device API

WebXR มอบประสบการณ์ที่สมจริงในทุกมุมมอง ตั้งแต่การใช้ Augmented Reality ในการดูว่าโซฟาใหม่จะมีลักษณะอย่างไรในบ้านก่อนที่จะซื้อ หรือเกม Virtual Reality, ภาพยนตร์ 360 องศา และอื่นๆ

หากต้องการเริ่มต้นใช้งาน API ใหม่ โปรดอ่าน Virtual Reality Comes to the Web

ช่วงทดลองใช้จากต้นทางใหม่

ช่วงทดลองใช้จากต้นทางให้โอกาสเราในการตรวจสอบฟีเจอร์ทดลองและ API รวมถึงทำให้คุณสามารถแสดงความคิดเห็นเกี่ยวกับความสามารถในการใช้งานและประสิทธิภาพในการทำให้ใช้งานได้ในวงกว้างขึ้น

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

การเลือกใช้ช่วงทดลองใช้จากต้นทางช่วยให้คุณสร้างเดโมและต้นแบบที่ผู้ใช้การทดสอบเบต้าจะลองใช้ได้ในช่วงทดลองโดยไม่ต้องพลิกการแจ้งเตือนพิเศษใน Chrome

ดูข้อมูลเพิ่มเติมเกี่ยวกับช่วงทดลองใช้จากต้นทางได้ในคู่มือช่วงทดลองใช้จากต้นทางสำหรับนักพัฒนาเว็บ คุณดูรายการช่วงทดลองใช้จากต้นทางที่ดำเนินอยู่และลงชื่อสมัครใช้ได้ในหน้าช่วงทดลองใช้จากต้นทางของ Chrome

ปลุกระบบ

สัตว์เลี้ยงที่ฉันชอบใช้ Google สไลด์มากที่สุดอีกเรื่องหนึ่งก็คือ ถ้าคุณเปิดพื้นที่สไลด์ค้างไว้ในสไลด์เดียวนานเกินไป โปรแกรมรักษาหน้าจอก็จะเล่นต่อ คุณต้องปลดล็อกคอมพิวเตอร์ก่อนจึงจะดำเนินการต่อได้ เอ่อ

แต่เมื่อใช้ Wake Lock API ใหม่ หน้าเว็บจะขอการล็อกและป้องกันไม่ให้หน้าจอสลัวลงหรือโปรแกรมรักษาหน้าจอไม่ทำงาน การทำเช่นนี้เหมาะสำหรับ สไลด์ และยังมีประโยชน์สำหรับสิ่งต่างๆ เช่น ไซต์สูตรอาหารซึ่งคุณอาจต้องการเปิดหน้าจอไว้ขณะทำตามวิธีการ

หากต้องการขอ Wake Lock คุณต้องเรียกใช้ 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}`);
  }
};

การล็อกจะคงอยู่จนกว่าผู้ใช้จะออกจากหน้า หรือคุณเรียกใช้ release ในออบเจ็กต์ WakeLockSentinel ที่คุณบันทึกไว้ก่อนหน้านี้

// 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 แสดงผลทันที เช่น แถบเลื่อนที่มีเนื้อหาจำนวนมากหรือ UI แบบแท็บที่แสดงเฉพาะเนื้อหาบางส่วนในช่วงเวลาหนึ่ง

แอตทริบิวต์ rendersubtree ใหม่จะบอกเบราว์เซอร์ว่าสามารถข้ามการแสดงผลแผนผังย่อยนั้นได้ วิธีนี้ช่วยให้เบราว์เซอร์ใช้เวลาประมวลผลส่วนที่เหลือของหน้าเว็บมากขึ้นซึ่งจะช่วยเพิ่มประสิทธิภาพ

เมื่อตั้งค่า rendersubtree เป็น invisible เนื้อหาขององค์ประกอบจะไม่ถูกวาดหรือทดสอบ Hit ซึ่งช่วยให้เพิ่มประสิทธิภาพการแสดงผลได้

การเปลี่ยน rendersubtree เป็น activatable จะทำให้เนื้อหามองเห็นได้โดยนำแอตทริบิวต์ invisible ออก แล้วแสดงผลเนื้อหา

Chrome Dev Summit 2019

หากคุณพลาดงาน Chrome Dev Summit ทุกการสนทนาจะอยู่ในช่อง YouTube ของเรา

Jake ยังมีชุดข้อความ Twitter ที่ยอดเยี่ยมซึ่งมีเรื่องสนุก ๆ ที่เกิดขึ้นระหว่างการพูดคุย รวมถึงสมาชิกคนใหม่ในทีมอย่าง Surjiko ด้วย

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

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

ติดตาม

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

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