ฟีเจอร์ใหม่ใน Chrome 67

Pete LePage

Twitter GitHub Glitch Mastodon หน้าแรก

• Progressive Web App กำลังจะมีให้ใช้งานในเดสก์ท็อป
• API เซ็นเซอร์ทั่วไปช่วยให้เข้าถึงเซ็นเซอร์ของอุปกรณ์ เช่น ตัวตรวจวัดความเร่ง เครื่องวัดการหมุน และอื่นๆ ได้ง่ายขึ้น
• และ BigInt ยังช่วยให้การจัดการกับจำนวนเต็มจำนวนมากเป็นเรื่องง่ายขึ้นด้วย

นอกจากนี้ยังมีอีกมากมาย

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

หากต้องการดูรายการการเปลี่ยนแปลงทั้งหมด โปรดดูรายการการเปลี่ยนแปลงที่เก็บแหล่งที่มา Chromium

PWA บนเดสก์ท็อป

Progressive Web App สำหรับเดสก์ท็อปรองรับใน ChromeOS 67 แล้ว และเราเริ่มรองรับสำหรับ Mac และ Windows แล้ว เมื่อติดตั้งแล้ว ระบบจะเปิดใช้แอปในลักษณะเดียวกับแอปอื่นๆ และทำงานในหน้าต่างแอปโดยไม่มีแถบที่อยู่หรือแท็บ โปรแกรมทำงานของบริการช่วยให้แน่ใจว่าโปรแกรมทำงานได้อย่างรวดเร็วและเสถียร ประสบการณ์หน้าต่างแอปช่วยให้ทำงานเข้ากันได้ และช่วยสร้าง ประสบการณ์ที่น่าสนใจสำหรับผู้ใช้

การเริ่มต้นใช้งานไม่ได้ต่างออกไปจากที่คุณกำลังทำอยู่ในปัจจุบัน งานทั้งหมดที่คุณทำกับ Progressive Web App ที่มีอยู่จะยังคงมีผล คุณเพียงแค่ต้องพิจารณาจุดพักเพิ่มเติม

หากแอปเป็นไปตามเกณฑ์ PWA มาตรฐาน Chrome จะเริ่มเหตุการณ์ beforeinstallprompt แต่จะไม่แสดงข้อความแจ้งให้ผู้ใช้โดยอัตโนมัติ แต่ให้บันทึกเหตุการณ์ จากนั้นเพิ่ม UI บางอย่าง เช่น ปุ่มติดตั้งแอป ลงในแอปเพื่อแจ้งให้ผู้ใช้ ติดตั้งแอปของคุณ จากนั้นเมื่อผู้ใช้คลิกปุ่มดังกล่าว ให้เรียกข้อความแจ้ง ในเหตุการณ์ที่บันทึกไว้ จากนั้น Chrome จะแสดงข้อความแจ้งแก่ผู้ใช้ หากผู้ใช้คลิกเพิ่ม Chrome จะเพิ่ม PWA ไปยังชั้นวางและ Launcher

ลองดูการบรรยายที่ Google I/O ซึ่งฉันและเจนนี่ได้ลงรายละเอียดเกี่ยวกับการพิจารณาทางเทคนิคและการออกแบบพิเศษที่คุณต้องคำนึงถึงเมื่อสร้าง Progressive Web App บนเดสก์ท็อป

และถ้าต้องการเริ่มลองใน Mac หรือ Windows โปรดดูโพสต์ Progressive Web App บนเดสก์ท็อปฉบับเต็มเพื่อดูรายละเอียดเกี่ยวกับวิธีเปิดใช้การสนับสนุนด้วยแฟล็ก

API เซ็นเซอร์ทั่วไป

หลายๆ แอปใช้ข้อมูลเซ็นเซอร์เพื่อสร้างประสบการณ์การใช้งานอย่างเช่นการเล่นเกมที่สมจริง การติดตามการออกกำลังกาย และ Augmented Reality หรือ Virtual Reality ข้อมูลนี้พร้อมใช้งานสำหรับเว็บแอปที่ใช้ General Sensor API แล้ว

API ประกอบด้วยอินเทอร์เฟซเซ็นเซอร์พื้นฐานพร้อมชุดคลาสเซ็นเซอร์คอนกรีตที่สร้างขึ้นด้านบน การมีอินเทอร์เฟซพื้นฐานช่วยลดความซับซ้อนของขั้นตอนการใช้งานและข้อกำหนดสำหรับคลาสเซ็นเซอร์ที่เป็นรูปธรรม ตัวอย่างเช่น คลาสเครื่องวัดการหมุนมีขนาดเล็กมาก!

const sensor = new Gyroscope({frequency: 500});
sensor.start();

sensor.onreading = () => {
    console.log("X-axis " + sensor.x);
    console.log("Y-axis " + sensor.y);
    console.log("Z-axis " + sensor.z);
};

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

Intel ได้รวบรวม การสาธิต API ของเซ็นเซอร์ทั่วไป และโค้ดตัวอย่าง หลายรายการ และยัง ได้อัปเดตเซ็นเซอร์สำหรับเว็บ จากเดือนกันยายนโดยแสดงข้อมูลทุกอย่างที่คุณควรทราบ

BigInt วิ

BigInt คือตัวเลขพื้นฐานแบบใหม่ใน JavaScript ที่แสดงจำนวนเต็มได้อย่างแม่นยํา รหัสจำนวนเต็มขนาดใหญ่และการประทับเวลาที่มีความแม่นยำสูงไม่สามารถแสดงผลเป็น Numbers ใน JavaScript ได้อย่างปลอดภัย ซึ่งมักจะนำไปสู่ข้อบกพร่องในชีวิตจริง (เพราะเรามักแทนตัวเลขเหล่านี้เป็นสตริงแทน)

let max = Number.MAX_SAFE_INTEGER;
// → 9_007_199_254_740_991
max = max + 1;
// → 9_007_199_254_740_992 - Yay!
max = max + 1;
// → 9_007_199_254_740_992 - Uh, no?

ด้วย BigInt เราสามารถจัดเก็บและดำเนินการเลขจำนวนเต็มได้อย่างปลอดภัยโดยไม่มีรายการมากเกินไป ปัจจุบัน การจัดการกับจำนวนเต็มขนาดใหญ่หมายความว่าเราต้องเปลี่ยนไปใช้ไลบรารีที่จะจำลองฟังก์ชันการทำงานที่คล้ายกับ BigInt

let max = BigInt(Number.MAX_SAFE_INTEGER);
// → 9_007_199_254_740_991n
max = max + 9n;
// → 9_007_199_254_741_000n - Yay!

เมื่อ BigInt พร้อมให้ใช้งานในวงกว้าง เราจะลดทรัพยากร Dependency ของเวลาทำงานเหล่านี้ลงได้เพื่อใช้ BigInts ของโฆษณาเนทีฟ นอกจากจะใช้งานแบบเนทีฟได้รวดเร็วยิ่งขึ้นแล้ว ยังช่วยลดเวลาที่ใช้ในการโหลด เวลาในการแยกวิเคราะห์ และเวลาคอมไพล์อีกด้วย เพราะจะได้ไม่ต้องโหลดไลบรารีเพิ่มเติมเหล่านั้น

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

ทั้งหมดนี้เป็นการเปลี่ยนแปลงเพียงบางส่วนใน Chrome 67 สำหรับนักพัฒนาซอฟต์แวร์ และแน่นอนว่ายังมีสิ่งใหม่ๆ อีกมากมาย

API การจัดการข้อมูลเข้าสู่ระบบได้รับการรองรับตั้งแต่ Chrome 51 และเป็นเฟรมเวิร์กสำหรับการสร้าง เรียก และจัดเก็บข้อมูลเข้าสู่ระบบ โดยใช้ข้อมูลเข้าสู่ระบบ 2 ประเภท ได้แก่ PasswordCredential และ FederatedCredential Web Authentication API จะเพิ่มข้อมูลเข้าสู่ระบบประเภทที่ 3 คือ PublicKeyCredential ซึ่งช่วยให้เบราว์เซอร์ตรวจสอบสิทธิ์ผู้ใช้ที่มีคู่คีย์ส่วนตัว/สาธารณะที่สร้างโดยตัวตรวจสอบสิทธิ์ เช่น คีย์ความปลอดภัย เครื่องอ่านลายนิ้วมือ หรืออุปกรณ์อื่นๆ ที่ตรวจสอบสิทธิ์ผู้ใช้ได้ Chrome 67 เปิดใช้ API ที่ใช้ตัวตรวจสอบสิทธิ์ U2F/CTAP 1 ผ่านการส่งผ่าน USB บนเดสก์ท็อป

ดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในโพสต์เปิดใช้การตรวจสอบสิทธิ์แบบเข้มงวดด้วย WebAuthn ของ Eiji

สรุป Google I/O

หากคุณไม่ได้เข้าร่วม I/O หรืออาจจะได้ดู แต่ไม่เห็นการบรรยายบนเว็บครบทั้งหมด ลองดูเพลย์ลิสต์ Chrome และเว็บเพื่อติดตามข่าวสารล่าสุดจาก Google I/O

ใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ

อย่าลืมดูมีอะไรใหม่ใน Chrome DevTools เพื่อดูว่ามีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome 67

ติดตาม

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

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