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

Pete LePage

Chrome 89 กำลังเริ่มเปิดตัวในเวอร์ชันเสถียร

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

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

WebHID, WebNFC และ Web Serial

ผมตื่นเต้นเกี่ยวกับ WebHID, WebNFC และ Web Serial มาก โดยเปิดประสบการณ์ใหม่ๆ แก่ผู้ใช้ที่ไม่เคยทำได้มาก่อนด้วยการโต้ตอบกับฮาร์ดแวร์ที่ใช้จริง

อุปกรณ์ต่างๆ ช่วยให้ผู้ผลิตเชื่อมต่อกับแอปการประชุมทางวิดีโอที่สนุกและแปลกใหม่ ได้โดยใช้ปุ่มโทรศัพท์บนลำโพงพิเศษโดยเฉพาะ หรือกรณีการใช้งานอื่นๆ

การใช้ Web Serial และโค้ดประมาณ 60 บรรทัดทำให้ @AndreBan สามารถสร้างหน้าเว็บที่สามารถโต้ตอบกับ MicroPython REPL ใน Raspberry Pi Pico Espruino ยังใช้ Web Serial ใน IDE บนเว็บด้วย

ที่งาน CDS 2019 นั้น Francois เขียนเกมสนุกๆ สไตล์หน่วยความจำโดยใช้ Web NFC คุณต้องแตะโทรศัพท์กับบัตรที่ถูกต้องในลำดับที่ถูกต้อง

StreamDeck พร้อมแผ่นกลอง Daft Punk

และที่ฉันชอบอย่าง @bramus ก็ใช้ WebHID เชื่อมต่อกับ StreamDeck เพื่อสร้างกลองแพด Daft Punk หากคุณไม่มี StreamDeck โปรดชมวิดีโอสาธิตของเขาบน YouTube และดูโค้ดบน GitHub

ไม่ว่าจะเป็นเว็บไซต์ที่โต้ตอบกับฮาร์ดแวร์หรือฮาร์ดแวร์ที่สามารถโต้ตอบกับเว็บไซต์จำนวนมาก ผู้ใช้จะชนะเพราะไม่จำเป็นต้องติดตั้งไดรเวอร์พิเศษหรือซอฟต์แวร์

ดูข้อมูลเพิ่มเติมเกี่ยวกับอุปกรณ์บางเครื่องที่เชื่อมต่อได้ที่ web.dev/devices หรือดูคู่มือเริ่มต้นใช้งานสำหรับ WebHID, WebNFC และ Web Serial

การเปลี่ยนแปลงเกณฑ์ความสามารถในการติดตั้งของ PWA

การรองรับการใช้งานออฟไลน์เป็นส่วนสำคัญของเกณฑ์ Progressive Web App ด้านความสามารถในการติดตั้งมาตั้งแต่ต้น ผู้ใช้คาดหวังให้แอปทำงานเสถียร เช่นเดียวกับแอปอื่นๆ ที่ติดตั้งไว้ มันควรจะเร็ว แล้วพวกมันก็ไม่ควร เห็นไดโนเสาร์ที่ออฟไลน์แน่ๆ เลย!

ภายในปีนี้ เราวางแผนที่จะปิดช่องโหว่ที่ทำให้เว็บไซต์ 2-3 แห่งผ่านเกณฑ์ความสามารถในการติดตั้งได้โดยไม่ต้องมีประสบการณ์แบบออฟไลน์ หาก PWA มีประสบการณ์แบบออฟไลน์อยู่แล้ว คุณก็พร้อมใช้งาน คุณไม่ต้องดำเนินการใดๆ แต่หากไม่ ก็ได้เวลาเพิ่มแล้ว

ตั้งแต่ Chrome 89 เป็นต้นไป หาก PWA ให้การตอบสนองไม่ถูกต้องเมื่อออฟไลน์ คุณจะเห็นคำเตือนใน DevTools ในแท็บ "ปัญหา" และ Lighthouse จะระบุว่ามีปัญหา และจะเริ่มบังคับใช้ใน Chrome 93 ภายในปีนี้

เครื่องมือสำหรับนักพัฒนาเว็บแสดงข้อความเตือนในคอนโซล
ข้อความเตือนในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
เครื่องมือสำหรับนักพัฒนาเว็บแสดงข้อความเตือนในแท็บแอปพลิเคชัน
ข้อความเตือนในแท็บแอปพลิเคชัน > ไฟล์ Manifest > ความสามารถในการติดตั้ง

คุณเลือกได้ว่าต้องการมอบประสบการณ์แบบออฟไลน์แบบใด ถ้าจะให้ดี คุณควรมอบประสบการณ์การใช้งานมากที่สุดเท่าที่จะเป็นไปได้ แต่อย่างน้อยก็ใช้ง่ายได้เพียงแค่หน้าสำรองแบบออฟไลน์

ดูรายละเอียดเพิ่มเติมเกี่ยวกับการเปลี่ยนแปลงและสาเหตุที่เราทำการเปลี่ยนแปลงได้ในการปรับปรุงการตรวจหาการรองรับแบบออฟไลน์ของ Progressive Web App

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

การแชร์เว็บและเป้าหมายการแชร์เว็บสำหรับเดสก์ท็อป

หากเว็บไซต์ของคุณอนุญาตให้ผู้ใช้สร้าง แก้ไข หรือโต้ตอบกับไฟล์ คุณควรใช้ Web Share และ Web Share Target API แทน API เหล่านี้ใช้งานได้ในอุปกรณ์เคลื่อนที่มาระยะหนึ่งแล้ว แต่ตอนนี้รองรับใน ChromeOS และ Windows แล้ว

Web Share ช่วยให้ผู้ใช้ส่งไฟล์หรือข้อมูลไปยังแอปอื่นๆ ที่ติดตั้งไว้ในอุปกรณ์ได้ เช่น การแชร์รูปภาพจาก Google Photos ไปยัง Twitter

async function share(title, text, url) {
  try {
    await navigator.share({title, text, url});
    return true;
  } catch (ex) {
    console.error('Share failed', ex);
    return false;
  }
}

ในการลงทะเบียนเป็นเป้าหมายเพื่อให้แอปอื่นๆ แชร์ไฟล์หรือข้อมูลกับคุณได้ คุณจะต้องใช้ Web Share Target API

"share_target": {
  "action": "/?share-target",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "file",
        "accept": ["image/*"],
      },
    ],
  },
},

ดูคู่มือเริ่มต้นใช้งานได้จากผสานรวมกับ UI การแชร์ระบบปฏิบัติการด้วย Web Share API และการรับข้อมูลที่แชร์ด้วย Web Share Target API

และอื่นๆ

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

ตอนนี้ Chrome อนุญาต await ระดับบนสุดภายในโมดูล JavaScript แล้ว

ไอคอนติดตั้งในแถบอเนกประสงค์ใหม่สำหรับ PWA

เราได้อัปเดตไอคอนที่แสดงในแถบอเนกประสงค์สำหรับ PWA ที่ติดตั้งได้เพื่อลดความสับสนของผู้ใช้


และหากคุณใช้กิจกรรมบนเว็บที่เชื่อถือได้เพื่อทำให้ PWA พร้อมใช้งานใน Play Store สำหรับ ChromeOS แล้ว คุณลงชื่อสมัครทดลองใช้ Digital Goods API จากต้นทางได้

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

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

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

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

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

เครดิต

รูปภาพของ Raspberry Pis และ Arduino เขียนโดย Harrison Broadbent บน Unsplash