ใหม่ใน 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 นี้ใช้งานยากและไม่ทำงานตามที่คาดไว้เสมอไป Navigation API ปรับปรุงพื้นที่นี้อย่างสมบูรณ์แทนที่จะพยายามแก้ไขข้อบกพร่องของ History API

หากต้องการใช้ Navigation API ให้เพิ่ม navigate Listener ในออบเจ็กต์ 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 เปิดตัว