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

Pete LePage

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

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

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

WebHID, WebNFC และ Web Serial

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

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

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

ที่งาน CDS 2019 ฟรองโกเขียนเกมสนุกๆ สไตล์ความจำโดยใช้ 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
DevTools แสดงข้อความเตือนในแท็บแอปพลิเคชัน
ข้อความเตือนในแท็บแอปพลิเคชัน > ไฟล์ Manifest > ความสามารถในการติดตั้ง

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

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

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

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

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

การแชร์ผ่านเว็บช่วยให้ผู้ใช้สามารถส่งไฟล์หรือข้อมูลไปยังแอปอื่นๆ ที่ติดตั้งในอุปกรณ์ได้ เช่น การแชร์รูปภาพจาก 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 การแชร์ OS ด้วย 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 ทันทีที่ Chrome 90 เปิดตัว

เครดิต

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