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

หากต้องการใช้ Navigation 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 103 ฉันจะมาบอกว่า มีอะไรใหม่ใน Chrome!