ใหม่ใน Chrome 102

Pete LePage

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

  • PWA ที่ติดตั้งสามารถลงทะเบียนเป็นตัวแฮนเดิลไฟล์ได้ ซึ่งช่วยให้ผู้ใช้เปิดไฟล์จากดิสก์ได้โดยตรง
  • แอตทริบิวต์ inert ช่วยให้คุณทําเครื่องหมายบางส่วนของ DOM ว่าไม่มีการเปลี่ยนแปลง
  • Navigation API ช่วยให้แอปแบบหน้าเดียวจัดการการนําทางและการอัปเดต URL ได้ง่ายขึ้น
  • และยังมีอีกมากมาย

และ Pete LePage จะเป็นผู้ดูแลคุณในวันนี้ มาเจาะลึกและดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 102

File Handling API

File Handling API ช่วยให้ PWA ที่ติดตั้งไว้ลงทะเบียนกับระบบปฏิบัติการเป็นตัวจัดการไฟล์ได้ เมื่อลงทะเบียนแล้ว ผู้ใช้จะคลิกไฟล์เพื่อเปิดด้วย PWA ที่ติดตั้งไว้ได้ ซึ่งเหมาะอย่างยิ่งสําหรับ PWA ที่โต้ตอบกับไฟล์ เช่น โปรแกรมแก้ไขรูปภาพ IDE เครื่องมือแก้ไขข้อความ และอื่นๆ

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

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

จากนั้น หากต้องการเข้าถึงไฟล์เหล่านั้นเมื่อเปิด PWA คุณต้องระบุผู้ใช้สำหรับออบเจ็กต์ launchQueue ระบบจะจัดคิวการเปิดตัวไว้จนกว่าผู้บริโภคจะจัดการ

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

ดูรายละเอียดทั้งหมดได้ที่อนุญาตให้เว็บแอปพลิเคชันที่ติดตั้งเป็นตัวแฮนเดิลไฟล์

พร็อพเพอร์ตี้ inert

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

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

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

ที่นี่มีการประกาศ inert ในองค์ประกอบ <div> ที่ 2 ดังนั้นเนื้อหาทั้งหมดที่อยู่ในองค์ประกอบดังกล่าว รวมถึง <button> และ <label> จะไม่ได้รับโฟกัสหรือคลิกไม่ได้

inert ใช้งานได้ใน Chrome 102 และจะพร้อมใช้งานในทั้ง Firefox และ Safari

ดูรายละเอียดเพิ่มเติมได้ที่การแนะนำ Inert

เว็บแอปจำนวนมากอาศัยความสามารถในการอัปเดต URL โดยไม่ต้องไปยังส่วนต่างๆ ของหน้า ปัจจุบันเราใช้ History API แต่ API นี้ใช้งานยากและไม่ทำงานตามที่คาดไว้เสมอไป API การนำทางจะยกเครื่องพื้นที่นี้ใหม่ทั้งหมด แทนที่จะพยายามแก้ไขขอบคร่าวๆ ของ API ประวัติ

หากต้องการใช้ API การนำทาง ให้เพิ่ม Listener navigate ในออบเจ็กต์ navigation ส่วนกลาง

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

เหตุการณ์นี้รวมศูนย์โดยพื้นฐานและจะทริกเกอร์สําหรับการนําทางทุกประเภท ไม่ว่าผู้ใช้จะดําเนินการใด เช่น คลิกลิงก์ ส่งแบบฟอร์ม หรือย้อนกลับและไปข้างหน้า แม้ว่าการนําทางจะได้รับการทริกเกอร์แบบเป็นโปรแกรมก็ตาม ในกรณีส่วนใหญ่ โค้ดจะช่วยให้โค้ดของคุณลบล้างลักษณะการทำงานเริ่มต้นของเบราว์เซอร์สำหรับการดำเนินการนั้น

ดูรายละเอียดทั้งหมดและเดโมที่คุณลองใช้ได้ที่การกำหนดเส้นทางฝั่งไคลเอ็นต์สมัยใหม่: Navigation API

และอีกมากมาย

แน่นอนว่ายังมีอีกมากมาย

  • Sanitizer API ใหม่มีเป้าหมายเพื่อสร้างตัวประมวลผลที่มีประสิทธิภาพสำหรับสตริงที่กำหนดเองเพื่อแทรกลงในหน้าเว็บอย่างปลอดภัย
  • แอตทริบิวต์ hidden=until-found ช่วยให้เบราว์เซอร์ค้นหาข้อความในภูมิภาคที่ซ่อนอยู่ได้ และแสดงส่วนนั้นหากพบรายการที่ตรงกัน

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

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

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

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

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