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

Pete LePage

Chrome 80 กำลังเปิดตัว และมีเนื้อหาใหม่ๆ มากมายให้นักพัฒนาซอฟต์แวร์!

มีการสนับสนุนสำหรับ

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

ผู้ปฏิบัติงานของโมดูล

Module Workers เป็นโหมดใหม่สำหรับผู้ปฏิบัติงานด้านเว็บ ซึ่งปรับตามหลักสรีรศาสตร์และประโยชน์ด้านประสิทธิภาพของโมดูล JavaScript พร้อมใช้งานแล้ว เครื่องมือสร้าง Worker ยอมรับตัวเลือก {type: "module"} ใหม่ ซึ่งจะเปลี่ยนวิธีการโหลดและเรียกใช้สคริปต์ให้ตรงกับ <script type="module">

const worker = new Worker('worker.js', {
  type: 'module'
});

การย้ายไปยังโมดูล JavaScript ยังทำให้ใช้การนำเข้าแบบไดนามิกสำหรับโค้ดที่โหลดแบบ Lazy Loading ได้โดยไม่ต้องบล็อกการดำเนินการของผู้ปฏิบัติงาน ดูรายละเอียดเพิ่มเติมได้ที่โพสต์การจัดชุดข้อความในเว็บด้วยผู้ปฏิบัติงานโมดูลของจิรายุใน web.dev

การทำเชนที่ไม่บังคับ

การพยายามอ่านพร็อพเพอร์ตี้ที่ฝังลึกในออบเจ็กต์อาจเกิดข้อผิดพลาดได้ โดยเฉพาะอย่างยิ่งเมื่อมีโอกาสที่บางสิ่งอาจไม่ประเมิน

// Error prone-version, could throw.
const nameLength = db.user.name.length;

การตรวจสอบแต่ละค่าก่อนดำเนินการต่อจะเปลี่ยนเป็นคำสั่ง if ที่ฝังลึกหรือต้องใช้บล็อก try / catch ได้ง่ายๆ

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

Chrome 80 เพิ่มการรองรับฟีเจอร์ JavaScript ใหม่ที่ชื่อการทำเชนแบบไม่บังคับ ด้วยการห่วงโซ่ที่ไม่บังคับ หากพร็อพเพอร์ตี้ใดพร็อพเพอร์ตี้หนึ่งส่งคืนค่า Null หรือไม่ระบุ แทนที่จะแสดงข้อผิดพลาด ผลลัพธ์ทั้งหมดจะส่งคืนโดยไม่ได้กำหนด

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

ดูรายละเอียดทั้งหมดได้จากบล็อกโพสต์ Optional Chaining ในบล็อก v8

การจบช่วงทดลองใช้จากต้นทาง

มีความสามารถใหม่ 3 รายการที่เปลี่ยนจากช่วงทดลองใช้จากต้นทางไปเป็นแบบเสถียร ทำให้เว็บไซต์ใดก็ได้ใช้งานได้โดยไม่ต้องใช้โทเค็น

การซิงค์ในเบื้องหลังตามระยะเวลา

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

เครื่องมือเลือกรายชื่อติดต่อ

ต่อมาคือ Contact Picker API ซึ่งเป็น API แบบออนดีมานด์ที่อนุญาตให้ผู้ใช้เลือกรายการจากรายชื่อติดต่อของตนเอง และแชร์รายละเอียดรายการที่เลือกอย่างจำกัดกับเว็บไซต์

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

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

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

ช่วงทดลองใช้จากต้นทางใหม่

API การจัดทำดัชนีเนื้อหา

คุณจะแจ้งให้ผู้ใช้ทราบเกี่ยวกับเนื้อหาที่แคชใน PWA ได้อย่างไร ที่นี่มีปัญหาเกี่ยวกับการค้นพบ พวกเขารู้หรือไม่ว่าจะต้องเปิดแอปของคุณ หรือเนื้อหาที่ใช้ได้

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

const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

หากต้องการเพิ่มข้อมูลลงในดัชนี ฉันต้องสร้างการลงทะเบียน Service Worker จากนั้นเรียกใช้ index.add และให้ข้อมูลเมตาเกี่ยวกับเนื้อหา

เมื่อสร้างดัชนีแล้ว ดัชนีจะแสดงในพื้นที่เฉพาะสำหรับหน้าดาวน์โหลดของ Android ดูรายละเอียดทั้งหมดได้จากโพสต์ของเจตน์เรื่องการจัดทำดัชนีหน้าเว็บที่สามารถใช้งานแบบออฟไลน์ได้ด้วย Contentการจัดทำดัชนี API บน web.dev

สิ่งที่ทำให้เกิดการแจ้งเตือน

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

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

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

หากต้องการกำหนดเวลาการแจ้งเตือน ให้โทรหา showNotification ในการลงทะเบียน Service Worker ในตัวเลือกการแจ้งเตือน ให้เพิ่มพร็อพเพอร์ตี้ showTrigger ที่มี TimestampTrigger จากนั้น เมื่อถึงเวลา เบราว์เซอร์จะแสดงการแจ้งเตือน

ช่วงทดลองใช้จากต้นทางมีแผนที่จะทดลองใช้ใน Chrome 83 ดังนั้นโปรดดูโพสต์ทริกเกอร์การแจ้งเตือนของ Tom ที่ web.dev เพื่อดูรายละเอียดทั้งหมด

ช่วงทดลองใช้จากต้นทางอื่นๆ

มีช่วงทดลองใช้จากต้นทางอื่นๆ อีก 2-3 อย่างที่เริ่มตั้งแต่ Chrome 80 ดังนี้

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

ดูรายการฟีเจอร์ทั้งหมดในช่วงทดลองใช้จากต้นทาง

และอื่นๆ

แน่นอน ยังมีอีกมากมาย

  • ตอนนี้คุณลิงก์ไปยังส่วนย่อยข้อความในหน้าได้โดยตรงแล้วโดยใช้ #:~:text=something Chrome จะเลื่อนไปไฮไลต์ อินสแตนซ์แรกของ Fragment ข้อความนั้น เช่น https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • การตั้งค่า display: minimal-ui ใน PWA บนเดสก์ท็อปจะเพิ่มปุ่มย้อนกลับและโหลดซ้ำลงในแถบชื่อของ PWA ที่ติดตั้ง
  • และ Chrome รองรับการใช้รูปภาพ SVG เป็นไอคอน Fav แล้ว

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

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

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

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

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