22 ฟีเจอร์เด็ดในเบราว์เซอร์ที่คุณอาจไม่รู้ว่าใช้งานแบบ Native ได้เลย
รวมความสามารถเว็บเบราว์เซอร์สมัยใหม่ที่ช่วยให้คุณลดการใช้งานไลบรารีและเขียนโค้ดน้อยลงได้อย่างเหลือเชื่อ
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- เบราว์เซอร์ยุคปัจจุบันมีฟีเจอร์ในตัวมากมายที่ไม่ต้องอาศัยไลบรารีภายนอกอีกต่อไป
- แท็ก HTML อย่าง dialog และ datalist ช่วยสร้างโมดอลและระบบเติมคำอัตโนมัติได้ทันที
- API ระดับเบราว์เซอร์ช่วยจัดการเรื่องคลิปบอร์ด การแชร์ และการระบุตำแหน่งได้อย่างง่ายดาย
- นักพัฒนาสามารถลดขนาดโค้ดและเพิ่มประสิทธิภาพหน้าเว็บได้ด้วย Native API โดยตรง
นักพัฒนาซอฟต์แวร์ส่วนใหญ่มักจะติดตั้งไลบรารีทันทีเมื่อต้องการสร้างปุ่มหรือช่องกรอกข้อมูลที่ซับซ้อนขึ้นมาเล็กน้อย แต่ในความเป็นจริงแล้ว เว็บเบราว์เซอร์ในปัจจุบันมีความสามารถมากกว่าที่หลายคนตระหนัก ฟีเจอร์มากมายที่เคยต้องพึ่งพาไลบรารี JavaScript เช่น หน้าต่างโมดอล ป๊อปโอเวอร์ ตัวเลือกสี การเลื่อนหน้าเว็บอย่างลื่นไหล การเข้าถึงคลิปบอร์ด เมนูแชร์ และระบบจดจำเสียง ล้วนถูกสร้างรวมไว้ในตัวเบราว์เซอร์เรียบร้อยแล้ว บทความนี้จะพาทุกคนไปสำรวจความสามารถระดับ Native ทั้ง 22 อย่างที่จะช่วยให้คุณเขียนโค้ดได้น้อยลงและพึ่งพาไลบรารีน้อยลงตามไปด้วย
เริ่มต้นกันที่แท็ก <dialog> ที่ช่วยให้คุณสร้างหน้าต่างโมดอลได้โดยไม่ต้องใช้ไลบรารีใดๆ ทั้งสิ้น มันจะจัดการเรื่องการโฟกัส ปิดหน้าต่างเมื่อกดปุ่ม Escape และแสดงฉากหลังด้านหลังโมดอลให้อัตโนมัติด้วยโค้ดเพียงไม่กี่บรรทัด นอกจากนี้ยังมี Popover API สำหรับสร้างป๊อปโอเวอร์หรือแผงลอยขนาดเล็ก และแท็ก <input type="color"> ที่เปิดใช้งานตัวเลือกสีของระบบปฏิบัติการได้ทันทีโดยให้ค่ากลับมาเป็นรหัสสี Hex เพื่อนำไปใช้ต่อใน JavaScript ได้อย่างสะดวกรวดเร็ว
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
ในส่วนของการจัดการข้อมูลและสื่อสาร เบราว์เซอร์ยังมี Clipboard API สำหรับคัดลอกและอ่านข้อความผ่าน navigator.clipboard รวมถึง Web Share API ที่ช่วยเปิดเมนูแชร์เนทีฟของอุปกรณ์เพื่อส่งต่อเนื้อหาไปยังแอปพลิเคชันอย่าง WhatsApp หรืออีเมลได้โดยตรง สำหรับการเพิ่มประสิทธิภาพหน้าเว็บ คุณสามารถใช้แอตทริบิวต์ loading="lazy" เพื่อให้เบราว์เซอร์โหลดรูปภาพเฉพาะเมื่อกำลังจะปรากฏบนหน้าจอเท่านั้น ช่วยประหยัดแบนด์วิดท์และทำให้หน้าเว็บโหลดเร็วขึ้นโดยไม่ต้องตั้งค่า IntersectionObserver ให้ยุ่งยากเหมือนในอดีต
การหันมาใช้ Native API ของเบราว์เซอร์แทนการติดตั้งไลบรารีภายนอก (Third-party libraries) ถือเป็นแนวทางปฏิบัติที่ยอดเยี่ยมในการพัฒนาเว็บยุคใหม่ เพราะช่วยลดขนาดไฟล์ Bundle ของแอปพลิเคชัน ทำให้หน้าเว็บโหลดเร็วขึ้นบนอุปกรณ์ที่มีข้อจำกัดด้านฮาร์ดแวร์ และยังช่วยลดภาระในการอัปเดตแพ็กเกจเพื่อแก้ปัญหาช่องโหว่ความปลอดภัยในอนาคตอีกด้วย
นอกจากนี้ยังมีฟีเจอร์ระดับแอดวานซ์อีกมากมาย เช่น Geolocation API สำหรับดึงตำแหน่งผู้ใช้ Notification API สำหรับส่งการแจ้งเตือนเดสก์ท็อป Speech Recognition API สำหรับแปลงเสียงพูดเป็นข้อความ Page Visibility API สำหรับตรวจจับเมื่อผู้ใช้เปลี่ยนแท็บเพื่อช่วยประหยัดแบตเตอรี่ Fullscreen API สำหรับแสดงผลแบบเต็มจอ Vibration API สำหรับสร้างระบบสั่นบนมือถือที่รองรับ Network Information API สำหรับตรวจสอบความเร็วอินเทอร์เน็ตเพื่อปรับลดขนาดข้อมูล ตลอดจน Picture-in-Picture API, Wake Lock API และ ResizeObserver API ที่ช่วยให้นักพัฒนาควบคุมพฤติกรรมหน้าเว็บได้อย่างแม่นยำ
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น