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

Pete LePage

Chrome 80 พร้อมให้ใช้งานแล้ว และมีฟีเจอร์ใหม่ๆ มากมายสำหรับนักพัฒนาซอฟต์แวร์

โดยรองรับรายการต่อไปนี้

ผมชื่อ Pete LePage มาเริ่มดูสิ่งใหม่ๆ สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 80 กัน

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

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

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

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

การต่อเชื่อมที่ไม่บังคับ

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

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

การตรวจสอบค่าแต่ละค่าก่อนดำเนินการต่ออาจทำให้กลายเป็นif stmtที่ฝังลึก หรือต้องใช้บล็อก 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;

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

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

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

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

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

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

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

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

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

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

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

Content Indexing API

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

Content Indexing 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 และระบุข้อมูลเมตาเกี่ยวกับเนื้อหา

เมื่อสร้างดัชนีแล้ว ดัชนีจะแสดงในพื้นที่เฉพาะของหน้าดาวน์โหลดใน Chrome สำหรับ Android ดูรายละเอียดทั้งหมดได้ในโพสต์ของ Jeff เรื่องการจัดทําดัชนีหน้าเว็บที่ใช้งานได้แบบออฟไลน์ด้วย Content Indexing 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 registration ในตัวเลือกการแจ้งเตือน ให้เพิ่มพร็อพเพอร์ตี้ showTrigger ที่มี TimestampTrigger จากนั้นเมื่อถึงเวลา เบราว์เซอร์จะแสดงการแจ้งเตือน

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

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

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

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

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

และอื่นๆ

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

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

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

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

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

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

ผมชื่อ Pete LePage และทันทีที่ Chrome 81 เปิดตัว เราจะมาบอกคุณถึงสิ่งใหม่ๆ ใน Chrome