ใหม่ใน Chrome 91

Pete LePage

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

ฉันชื่อ Pete LePage ทำงานและถ่ายทำ จากที่บ้าน มาเจาะลึกและดูว่ามีอะไรใหม่ๆ สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 91 บ้าง!

ชื่อที่แนะนำสำหรับ File System Access API

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

ตั้งแต่ Chrome 91 เป็นต้นไป คุณจะแนะนำชื่อและตำแหน่งของไฟล์หรือไดเรกทอรีที่ต้องการโต้ตอบได้แล้ว หากต้องการทำเช่นนั้น ให้ผ่านพร็อพเพอร์ตี้ suggestedName ซึ่งเป็นส่วนหนึ่งของตัวเลือก showSaveFilePicker

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

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

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});

ดูรายละเอียดทั้งหมดได้ที่โพสต์ File System Access ของ Tom

กำลังอ่านไฟล์จากคลิปบอร์ด

มี API ใหม่สุดเจ๋งอีก 1 รายการสำหรับการโต้ตอบกับไฟล์ที่เข้าสู่ Chrome 91 ในเดสก์ท็อป เว็บแอปอ่านไฟล์จากคลิปบอร์ดได้แล้ว (การอ่านไฟล์จากคลิปบอร์ดพร้อมใช้งานใน Safari ตั้งแต่ปี 2018)

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

window.addEventListener('paste', onPaste);

async function onPaste(e) {
  const file = e.clipboardData.files[0];
  const contents = await file.text();
  ...
}

แชร์ข้อมูลเข้าสู่ระบบในเว็บไซต์ที่เชื่อมโยง

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

ตัวเลือกนี้เหมาะสมเมื่อเว็บไซต์แสดงจากโดเมนระดับบนสุดที่ต่างกัน เช่น google.com และ google.ca หรือคุณอาจมีหลายโดเมน

หากต้องการเชื่อมโยงเว็บไซต์ คุณจะต้องสร้างไฟล์ assetlinks.json ที่ระบุความสัมพันธ์ระหว่างโดเมน ในตัวอย่างด้านล่าง ฉันกำลังบอกเบราว์เซอร์ว่าทั้งโดเมน .com และ .co.uk มีความเกี่ยวข้องกันและแชร์ข้อมูลเข้าสู่ระบบได้

[{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.com"
  }
 },
{
  "relation": ["delegate_permission/common.get_login_creds"],
  "target": {
    "namespace": "web",
    "site": "https://www.example.co.uk"
  }
 }]

จากนั้นโฮสต์ไฟล์ assetlinks.json ในโฟลเดอร์ .well-known ของแต่ละโดเมน

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

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

แน่นอน ยังมีคำถามอีกมากมาย

วิดีโอทั้งหมดจาก I/O 2021 ออนไลน์แล้วในตอนนี้ มีเนื้อหาดีๆ ด้วย ลองไปดูได้เลย!

Web Transport ซึ่งก่อนหน้านี้เรียกว่า Quic Transport ได้มีการเปลี่ยนแปลงหลายอย่างและกำลังเริ่มช่วงทดลองใช้จากต้นทางใหม่

Web Assembly SIMD สิ้นสุดช่วงทดลองใช้จากต้นทางแล้วและพร้อมให้บริการแก่ผู้ใช้ทุกคน

ในที่สุดองค์ประกอบฟอร์มที่ปรับโฉมใหม่ก็ลงจอดใน Android แล้ว ซึ่งช่วยยกระดับประสบการณ์ของผู้ใช้

และแอตทริบิวต์ media ขององค์ประกอบ <link> จะมีผลสำหรับ link rel="icon" ซึ่งหมายความว่าคุณจะกำหนดไอคอนที่แตกต่างกันได้ตามคำค้นหาสื่อ เช่น ไอคอนที่แตกต่างกันสำหรับโหมดมืดและโหมดสว่าง

<link
  rel="icon"
  media="(prefers-color-scheme: dark)"
  href="/icons/dark.png">
<link
  rel="icon"
  media="(prefers-color-scheme: light)"
  href="/icons/light.png">

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

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

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

โปรดติดตามช่อง YouTube ของ Chrome Developers และรับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่

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