อัปเดตคอมโพเนนต์เว็บ - มีเวลามากขึ้นในการอัปเกรดเป็น API เวอร์ชัน 1

Jonathan Bingham
X GitHub
Arthur Evans
X GitHub

Web Elements v1 API เป็นมาตรฐานแพลตฟอร์มเว็บที่จัดส่งใน Chrome, Safari, Firefox และ Edge (เร็วๆ นี้) มีเว็บไซต์หลายล้านแห่งใช้ API v1 ซึ่งเข้าถึงผู้ใช้หลายพันล้านคน ในแต่ละวัน นักพัฒนาแอปที่ใช้ฉบับร่าง v0 API ได้ให้ความคิดเห็นที่เป็นประโยชน์ที่ส่งผลต่อข้อกำหนดนั้นๆ แต่ Chrome รองรับ API v0 เท่านั้น เมื่อปลายปีที่แล้ว เราได้ประกาศว่า API ฉบับร่างเหล่านี้เลิกใช้งานไปแล้วและมีกำหนดที่จะนำออกตั้งแต่ Chrome 73 เป็นต้นไป เพื่อรับประกันความสามารถในการทำงานร่วมกัน

เนื่องจากมีนักพัฒนาซอฟต์แวร์ขอเวลาเพิ่มในการย้ายข้อมูลอยู่พอสมควร ระบบจึงยังไม่ได้นำ API ออกจาก Chrome ขณะนี้ API ฉบับร่าง v0 ได้รับการกำหนดเป้าหมายเพื่อนำออกใน Chrome 80 ประมาณเดือนกุมภาพันธ์ 2020

สิ่งที่คุณควรทราบหากเชื่อว่าอาจกำลังใช้ API v0 มีดังนี้

กลับไปยังอนาคต: การปิดใช้ v0 API

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

--disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

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

หากต้องการทดสอบเว็บไซต์โดยปิดใช้ v0 API ให้ทำดังนี้

  1. หากใช้ Mac OS ให้ไปที่ chrome://version เพื่อค้นหาเส้นทางสั่งการสำหรับ Chrome โดยคุณจะต้องใช้เส้นทางในขั้นตอนที่ 3
  2. ออกจาก Chrome

  3. รีสตาร์ท Chrome โดยใช้แฟล็กบรรทัดคำสั่งต่อไปนี้

    --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

    ดูวิธีการเริ่มต้น Chrome ด้วยการแฟล็กได้ที่เรียกใช้ Chromium ด้วยแฟล็ก ตัวอย่างเช่น ใน Windows คุณอาจเรียกใช้

    chrome.exe --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

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

    console.log(
"Native HTML Imports?", 'import' in document.createElement('link'),
"Native Custom Elements v0?", 'registerElement' in document,
"Native Shadow DOM v0?", 'createShadowRoot' in document.createElement('div'));

    หากทุกอย่างทำงานเป็นปกติ คุณควรจะเห็นข้อความต่อไปนี้

    Native HTML Imports? false Native Custom Elements v0? false Native Shadow DOM v0? false

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

  5. ขั้นตอนสุดท้าย ให้โหลดแอปและศึกษาฟีเจอร์ต่างๆ หากทุกอย่างทำงานตามที่คาดไว้ ทุกอย่างก็ทำงานได้ตามปกติ

ใช้ v0 polyfills

Web Elements v0 polyfills รองรับ v0 API ในเบราว์เซอร์ที่ไม่ได้ให้การสนับสนุนในตัว หากเว็บไซต์ไม่ทำงานใน Chrome เมื่อปิดใช้ API v0 แสดงว่าคุณอาจไม่ได้โหลด Polyfills ซึ่งทำได้หลายวิธี ดังนี้

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

ที่ผ่านมาทีมโครงการ Polymer และคนอื่นๆ แนะนำให้โหลด Polyfill แบบมีเงื่อนไขตามการตรวจหาฟีเจอร์ วิธีนี้ควรใช้งานได้ดีหากปิดใช้ v0 API

ติดตั้ง Polyfill v0

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

  • วิธีติดตั้งด้วย Bower

    bower install --save webcomponents/webcomponentsjs#^0.7.0

  • หากต้องการติดตั้งจากไฟล์ ZIP ให้ดาวน์โหลดรุ่นล่าสุด 0.7.x จาก GitHub:

    https://github.com/webcomponents/webcomponentsjs/releases/tag/v0.7.24

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

โหลด Polyfill v0

โพลีฟิลล์ Web Elements v0 แบ่งออกเป็น 2 แพ็กเกจแยกกัน ดังนี้

webcomponents-min.js รวมถึงโพลีฟิลทั้งหมด แพ็กเกจนี้มี Polyfill ของ Shadow DOM ซึ่งมีขนาดใหญ่กว่า Polyfill อื่นๆ มากและส่งผลต่อประสิทธิภาพมากกว่า โปรดใช้แพ็กเกจนี้หากต้องการการรองรับ Shadow DOM เท่านั้น
webcomponents-lite-min.js รวม Polyfill ทั้งหมดยกเว้น Shadow DOM หมายเหตุ: ผู้ใช้ Polymer 1.x ควรเลือกแพ็กเกจนี้ เนื่องจากการจำลอง Shadow DOM ได้รวมอยู่ในไลบรารี Polymer โดยตรง ผู้ใช้ Polymer 2.x ต้องใช้โพลีฟิลเวอร์ชันอื่น ดูรายละเอียดได้ที่บล็อกโพสต์ของโครงการ Polymer

นอกจากนี้ยังมีโพลีฟิลแต่ละรายการที่เป็นส่วนหนึ่งของแพ็กเกจ Polyfill ของ Web Elements ด้วย การใช้โพลีฟิลแต่ละรายการแยกกันเป็นหัวข้อขั้นสูงที่ไม่ได้กล่าวถึงที่นี่

วิธีโหลด Polyfill โดยไม่มีเงื่อนไข

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-lite-min.js">
</script>

หรือ

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-min.js">
</script>

หากติดตั้งโพลีฟิลจาก GitHub โดยตรง คุณจะต้องระบุเส้นทางที่ติดตั้งโพลีฟิล

หากคุณโหลด Polyfill แบบมีเงื่อนไขตามการตรวจหาฟีเจอร์ เว็บไซต์ควรทำงานต่อไปได้เมื่อระบบนำการรองรับ v0 ออกแล้ว

หากคุณโหลด Polyfill แบบมีเงื่อนไขโดยใช้การดักจับเบราว์เซอร์ (กล่าวคือ การโหลด Polyfill ในเบราว์เซอร์ที่ไม่ใช่ Chrome) เว็บไซต์ของคุณจะล้มเหลวเมื่อนำการรองรับ v0 ออกจาก Chrome

ฉันต้องทำอย่างไร ฉันไม่รู้ว่ากำลังใช้ API ใดอยู่!

หากไม่ทราบว่าใช้ API v0 หรือ หรือ API ที่ใช้อยู่ คุณสามารถตรวจสอบเอาต์พุตของคอนโซลใน Chrome ได้

  1. หากคุณเคยเริ่มใช้ Chrome โดยมีแฟล็กเพื่อปิดใช้ API v0 ให้ปิด Chrome แล้วรีสตาร์ทตามปกติ
  2. เปิดแท็บ Chrome ใหม่และโหลดเว็บไซต์
  3. กด Control+Shift+J (Windows, Linux, ChromeOS) หรือ Command+Option+J (Mac) เพื่อเปิดคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บ
  4. ตรวจสอบเอาต์พุตของคอนโซลเพื่อดูข้อความการเลิกใช้งาน หากมีเอาต์พุตของคอนโซลจำนวนมาก ให้ป้อน "การเลิกใช้งาน" ในช่องตัวกรอง
หน้าต่างคอนโซลที่แสดงคำเตือนการเลิกใช้งาน

คุณควรเห็นข้อความการเลิกใช้งานสำหรับ API v0 แต่ละรายการที่ใช้อยู่ เอาต์พุตด้านบนแสดงข้อความสำหรับการนำเข้า HTML, องค์ประกอบที่กำหนดเอง v0 และ Shadow DOM v0

หากคุณใช้ API เหล่านี้ตั้งแต่ 1 รายการขึ้นไป โปรดดูที่ใช้ v0 polyfills

ขั้นตอนถัดไป: ย้ายออกจาก v0

การตรวจสอบว่าระบบโหลด v0 polyfills หรือไม่ ควรแน่ใจว่าเว็บไซต์ของคุณจะยังคงทำงานต่อไปเมื่อนำ API v0 ออก เราขอแนะนำให้เปลี่ยนไปใช้ Web Elements v1 API ซึ่งรองรับการใช้งานในวงกว้าง

หากคุณใช้ไลบรารีคอมโพเนนต์เว็บ เช่น ไลบรารี Polymer, X-Tag หรือ SkateJS ขั้นตอนแรกคือการตรวจสอบว่ามีไลบรารีเวอร์ชันใหม่กว่าที่รองรับ API v1 หรือไม่

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

สรุป

Web Composes v0 Draft API จะหยุดให้บริการ หากคุณนำสิ่งใดสิ่งหนึ่งออกจากโพสต์นี้ โปรดทดสอบแอปโดยปิดใช้ v0 API และโหลด Polyfill ตามที่จำเป็น

ในระยะยาว เราขอแนะนำให้คุณอัปเกรดเป็น API ล่าสุดและใช้คอมโพเนนต์ของเว็บต่อไป