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

Pete LePage

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

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

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

WebHID, WebNFC และ Web Serial

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

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

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

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

StreamDeck พร้อม Drum Pad ของ Daft Punk

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

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

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

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

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

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

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

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

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

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

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

Web Share และ Web Share Target สำหรับเดสก์ท็อป

หากเว็บไซต์อนุญาตให้ผู้ใช้สร้าง แก้ไข หรือโต้ตอบกับไฟล์ คุณควร ใช้ 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 Developers แล้วคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่