สิ่งที่จำเป็นต้องทราบมีดังนี้
- ตอนนี้เว็บแอปที่โต้ตอบกับไฟล์สามารถแนะนำชื่อไฟล์และไดเรกทอรีเมื่อใช้ File System Access API
- คุณสามารถอ่านไฟล์จากคลิปบอร์ดได้
- หากเว็บไซต์มีโดเมนมากกว่า 1 โดเมนและโดเมนเหล่านั้นใช้แบ็กเอนด์การจัดการบัญชีเดียวกัน คุณสามารถบอกให้ Chrome ทราบว่าโดเมนดังกล่าวเหมือนกัน ซึ่งจะช่วยให้เครื่องมือจัดการรหัสผ่านแนะนำข้อมูลเข้าสู่ระบบที่ถูกต้องได้
- วิดีโอทั้งหมดจาก I/O มีอยู่ในช่อง YouTube ของนักพัฒนาซอฟต์แวร์ Chrome
- และยังมีอีกมากมาย
ผมชื่อ Pete LePage ทำงานและถ่ายทำจากที่บ้าน ไปดูกันว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 91
ชื่อที่แนะนำสำหรับ File System Access API
API รายการโปรดรายการหนึ่งที่ได้จากโปรเจ็กต์ Fugu ในปีนี้ก็คือ 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'
});
โปรดดูรายละเอียดทั้งหมดในโพสต์การเข้าถึงระบบไฟล์ของ Tom
การอ่านไฟล์จากคลิปบอร์ด
นอกจากนี้ยังมี API ใหม่ที่น่าสนใจอีก 1 รายการสําหรับการโต้ตอบกับไฟล์ที่จะเปิดตัวใน Chrome 91 ตอนนี้เว็บแอปบนเดสก์ท็อปอ่านไฟล์จากคลิปบอร์ดได้แล้ว (การอ่านไฟล์จากคลิปบอร์ดใช้ได้ใน Safari มาตั้งแต่ปี 2018)
แน่นอนว่าคุณไม่มีสิทธิ์เข้าถึงคลิปบอร์ดแบบไม่จํากัด คุณจึงต้องตั้งค่า paste
event listener จากนั้นคุณจะเข้าถึงเนื้อหาของไฟล์แต่ละไฟล์ในคลิปบอร์ดได้ในตัวแฮนเดิลเหตุการณ์
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 ได้ที่ลิงก์ด้านล่าง
- มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (91)
- การเลิกใช้งานและการนำออกใน Chrome 91
- การอัปเดต ChromeStatus.com สำหรับ Chrome 91
- มีอะไรใหม่ใน JavaScript ใน Chrome 91
- รายการการเปลี่ยนแปลงที่เก็บข้อมูลซอร์สโค้ด Chromium
สมัครใช้บริการ
หากต้องการติดตามข่าวสารล่าสุด โปรดติดตามช่อง YouTube ของนักพัฒนาซอฟต์แวร์ Chrome แล้วคุณจะได้รับอีเมลแจ้งเตือนทุกครั้งที่เราเปิดตัววิดีโอใหม่
ผมชื่อ Pete LePage และทันทีที่ Chrome 92 เปิดตัว เราจะมาบอกคุณถึงสิ่งใหม่ๆ ใน Chrome