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

Pete LePage

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 ที่ติดตั้งแล้ว คุณจะต้องออกแบบไอคอนให้พอดีกับโซนที่ปลอดภัย ซึ่งก็คือวงกลมที่มีเส้นผ่านศูนย์กลาง 80% ของผืนผ้าใบ

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


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

Tiger Oakes มีโพสต์ที่ยอดเยี่ยมใน CSS Tricks - ไอคอนที่ปิดบังได้: ไอคอนที่ปรับขนาดได้ของ Android สำหรับ PWA พร้อมรายละเอียดทั้งหมด และมีเครื่องมือที่ยอดเยี่ยมที่คุณสามารถใช้ทดสอบไอคอนเพื่อให้แน่ใจว่าไอคอนจะพอดี

Web XR

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

WebXR เปิดโอกาสให้ผู้ใช้ได้รับประสบการณ์ที่สมจริงในหลากหลายรูปแบบ ไม่ว่าจะเป็นการใช้เทคโนโลยีความจริงเสริม (AR) เพื่อดูว่าโซฟาใหม่จะมีหน้าตาเป็นอย่างไรในบ้านก่อนจะซื้อ ไปจนถึงเกม Virtual Reality, ภาพยนตร์ 360 องศา และอีกมากมาย

หากต้องการเริ่มต้นใช้งาน API ใหม่ โปรดอ่านเทคโนโลยีความจริงเสมือน (VR) บนเว็บ

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

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

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

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

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

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

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

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

หากต้องการขอการล็อกการปลุก คุณต้องเรียกใช้ 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 ระบบจะไม่วาดหรือทดสอบการทํางานของเนื้อหาองค์ประกอบ ซึ่งช่วยให้เพิ่มประสิทธิภาพการแสดงผลได้

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

Chrome Dev Summit 2019

หากพลาดการเข้าร่วม Chrome Dev Summit คุณสามารถดูการบรรยายทั้งหมดได้ในช่อง YouTube

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

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

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

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

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

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