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

Jonathan Bingham

Arthur Evans

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

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

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

• ทดสอบเว็บไซต์โดยปิดใช้ v0 API หากเว็บไซต์ทํางานตามที่คาดไว้ ยินดีด้วย เสร็จแล้ว ดูวิธีการได้ที่ย้อนกลับไปที่อนาคต: การปิดใช้ API เวอร์ชัน 0
• หากคุณใช้ไลบรารี Polymer v1 หรือ v2 ให้ทําตามวิธีการที่เผยแพร่ก่อนหน้านี้จากทีม Polymer
• หากใช้ Shadow DOM v0, Custom Elements v0 หรือ HTML Imports คุณจะต้องโหลด polyfill บางรายการ โปรดดูหัวข้อใช้ polyfill เวอร์ชัน 0
• ไม่ต้องกังวลหากคุณไม่แน่ใจว่าใช้อุปกรณ์ใดอยู่ ดู ความช่วยเหลือ ฉันไม่รู้ตัวว่าใช้ API ใดอยู่

กลับไปที่อนาคต: การปิดใช้ API เวอร์ชัน 0

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

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

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

วิธีทดสอบเว็บไซต์โดยปิดใช้ API เวอร์ชัน 0

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

3. รีสตาร์ท Chrome ด้วย Flag บรรทัดคำสั่ง ดังนี้

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

   โปรดดูวิธีเริ่ม Chrome ด้วย Flag ที่หัวข้อเรียกใช้ Chromium ด้วย Flag เช่น ใน Windows คุณอาจเรียกใช้

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

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

   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
   

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

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

ใช้ polyfill เวอร์ชัน 0

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

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

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

ติดตั้ง polyfill เวอร์ชัน 0

ไม่เคยมีการเผยแพร่โพลีไฟล์ของ Web Components v0 ไปยังรีจิสทรี npm คุณสามารถติดตั้ง polyfill โดยใช้ 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 กับโค้ดของคุณ

โหลด polyfill เวอร์ชัน 0

โพลีไฟล์ของ Web Components v0 มีให้ใช้งานเป็น 2 แพ็กเกจแยกกัน ดังนี้

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

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

วิธีโหลดโพลีฟิลล์แบบไม่มีเงื่อนไข

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

หรือ

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

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

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

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

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

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

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

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

หากคุณใช้ API เหล่านี้อย่างน้อย 1 รายการ โปรดดูใช้ polyfill ของ v0

ขั้นตอนถัดไป: เลิกใช้ v0

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

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

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

• มีอะไรใหม่ในองค์ประกอบที่กำหนดเอง
• มีอะไรใหม่ใน Shadow DOM v1

สรุป

Web Components v0 Draft API จะหยุดให้บริการ สิ่งที่ควรทราบจากโพสต์นี้คือการทดสอบแอปโดยปิดใช้ API เวอร์ชัน 0 และโหลด polyfill ตามต้องการ

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