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

Pete LePage

เราเริ่มเปิดตัว Chrome 89 ในเวอร์ชันเสถียรแล้ว

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

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

WebHID, WebNFC และ Web Serial

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

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

@AndreBan ใช้ Web Serial และโค้ดประมาณ 60 บรรทัดสร้างหน้าเว็บที่โต้ตอบกับ 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 สำหรับ ความสามารถในการติดตั้งมาตั้งแต่ต้น เช่นเดียวกับแอปอื่นๆ ที่ติดตั้ง ผู้ใช้ คาดหวังว่าแอปจะทำงานได้อย่างน่าเชื่อถือ ควรโหลดได้รวดเร็วและผู้ใช้ไม่ควรเห็น ไดโนเสาร์ออฟไลน์

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

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

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

เครดิต

รูปภาพ Raspberry Pi และ Arduino ถ่ายโดย Harrison Broadbent ใน Unsplash