บทนำสู่API ของเบราว์เซอร์

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

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

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

1. API โคลนที่มีโครงสร้าง

Structured Clone API เป็นตัวเปลี่ยนเกมสำหรับการคัดลอกออบเจ็กต์ สำหรับนักพัฒนาจำนวนมาก การคัดลอกออบเจ็กต์เป็นงานที่ยุ่งยากมาโดยตลอด โดยมักต้องใช้ไลบรารีหรือฟังก์ชันที่ซับซ้อน ด้วย API นี้ คุณสามารถสร้างสำเนาเชิงลึกของออบเจ็กต์ได้อย่างง่ายดาย:

const copy = โครงสร้าง Clone (ต้นฉบับ);

ซับเดียวนี้แก้ปัญหาได้หลายอย่าง:

จัดการประเภทข้อมูลที่ซับซ้อนเช่นแผนที่, ชุด, และหยด.
จัดการการอ้างอิงแบบวงกลมโดยไม่ทำให้โค้ดของคุณเสียหาย
หมายเหตุ: มันไม่ได้ลอกแบบฟังก์ชัน ซึ่งเป็นส่วนสำคัญที่ต้องจดจำ

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

สนับสนุน:พร้อมใช้งานในเบราว์เซอร์สมัยใหม่ เช่น Chrome, Firefox และ Safari ทำให้ปลอดภัยสำหรับการใช้งานจริง

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

2. API ประสิทธิภาพ

เมื่อพูดถึงการวัดประสิทธิภาพ Performance API มักถูกมองข้าม แทนที่จะใช้เครื่องมือของบุคคลที่สาม คุณสามารถใช้ API นี้เพื่อติดตามและเปรียบเทียบประสิทธิภาพของโค้ดของคุณได้:

Performance.mark("เริ่มต้น");
// รหัสที่จะวัด
Performance.mark("จบ");
Performance.measure("คำนวณ", "เริ่มต้น", "สิ้นสุด");
console.log(Performance.getEntriesByName("calc"));

วิธีนี้สามารถช่วยคุณระบุ:

ฟังก์ชั่นไหนเร็วกว่ากัน
หากการเพิ่มประสิทธิภาพมีประโยชน์จริง
ไม่ว่า Worker หรือ WASM จะคุ้มค่าที่จะนำไปใช้หรือไม่

ตัวอย่างเช่น หากคุณกำลังพัฒนาเว็บแอปพลิเคชันที่ซับซ้อนซึ่งประมวลผลข้อมูลผู้ใช้ คุณสามารถใช้ Performance API เพื่อเปรียบเทียบฟังก์ชันหรือคุณลักษณะเฉพาะได้ ด้วยการวัดเวลาดำเนินการ คุณสามารถระบุปัญหาคอขวดและเพิ่มประสิทธิภาพให้เหมาะสมได้

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

สนับสนุน:ทำงานได้อย่างดีเยี่ยมกับเบราว์เซอร์สมัยใหม่ทั้งหมด

เคล็ดลับการปฏิบัติ: ใช้ Performance API ในระหว่างการพัฒนาเพื่อรวบรวมข้อมูลเกี่ยวกับประสิทธิภาพของโค้ดของคุณ ข้อมูลนี้สามารถเป็นแนวทางในการเพิ่มประสิทธิภาพและปรับปรุงประสบการณ์ผู้ใช้

3. API การมองเห็นเพจ

เคยสงสัยบ้างไหมว่าจะเกิดอะไรขึ้นเมื่อผู้ใช้สลับแท็บ? ด้วย Page Visibility API คุณสามารถตรวจจับได้ว่าแท็บของคุณทำงานอยู่หรือไม่:

document.addEventListener("การมองเห็นเปลี่ยนแปลง", () => {
  ถ้า (document.hidden) {
    วิดีโอ.หยุดชั่วคราว();
  }
});

API นี้มีประโยชน์อย่างเหลือเชื่อสำหรับ:

API เบราว์เซอร์ที่สำคัญที่ควรรู้

📦

API โคลนที่มีโครงสร้าง
คัดลอกวัตถุที่ซับซ้อนได้อย่างง่ายดาย

📈

API ประสิทธิภาพ
วัดและปรับปรุงประสิทธิภาพของเว็บ

👀

API การมองเห็นเพจ
ตรวจจับเมื่อมองเห็นเพจได้

📏

ปรับขนาดผู้สังเกตการณ์
ตอบสนองต่อการเปลี่ยนแปลงขนาดองค์ประกอบ

🔍

ผู้สังเกตการณ์สี่แยก
ตรวจสอบการมองเห็นองค์ประกอบ

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

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

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

สนับสนุน:เข้ากันได้กับเบราว์เซอร์ที่ทันสมัยทั้งหมด

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

4. ปรับขนาดผู้สังเกตการณ์

สำหรับการออกแบบแบบตอบสนอง การติดตามขนาดองค์ประกอบอาจเป็นเรื่องยุ่งยาก ResizeObserver API ช่วยให้คุณสามารถติดตามการเปลี่ยนแปลงขนาดขององค์ประกอบ:

const ro = ResizeObserver ใหม่ (รายการ => {
  สำหรับ (รายการ const ของรายการ) {
    console.log(รายการ.contentRect.width);
  }
});
ro.สังเกต (องค์ประกอบ);

API นี้ช่วยบรรเทาให้กับนักพัฒนาที่เคยต้องรับมือกับตรรกะการปรับขนาดที่ยุ่งยากในอดีต ตอนนี้เบราว์เซอร์สามารถจัดการให้คุณได้!

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

สนับสนุน:มีให้ใช้อย่างแพร่หลายในเบราว์เซอร์สมัยใหม่

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

5. API ผู้สังเกตการณ์ทางแยก

เครื่องมืออันทรงพลังอีกอย่างหนึ่งคือ Intersection Observer API สิ่งนี้ทำให้คุณสามารถตรวจสอบได้ว่าองค์ประกอบเข้าหรือออกจากวิวพอร์ตเมื่อใด:

ผู้สังเกตการณ์ const = IntersectionObserver ใหม่ (รายการ => {
  รายการ forEach (รายการ => {
    ถ้า (รายการ isIntersecting) {
      // โหลดเนื้อหาหรือทริกเกอร์แอนิเมชั่น
    }
  });
});
ผู้สังเกตการณ์สังเกต (targetElement);

กรณีการใช้งานได้แก่:

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

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

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

สนับสนุน:มีอยู่ในเบราว์เซอร์สมัยใหม่

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

6. ดึงข้อมูล API

ไปเป็นวันของ XMLHttpRequest Fetch API ช่วยให้กระบวนการสร้างคำขอเครือข่ายง่ายขึ้น:

ดึงข้อมูล (URL)
  .then(response => response.json())
  .then(data => console.log(data));

ด้วย API นี้ คุณสามารถ:

จัดการการตอบกลับประเภทต่างๆ เช่น JSON ข้อความ และ Blob
ใช้ async/await เพื่อให้โค้ดสะอาดขึ้นและอ่านง่ายขึ้น
ตั้งค่าส่วนหัวที่กำหนดเองสำหรับคำขอของคุณ ทำให้มีความยืดหยุ่นสำหรับ API ต่างๆ

ตัวอย่างเช่น คุณอาจต้องดึงข้อมูลผู้ใช้จาก REST API ด้วย Fetch API คุณสามารถเขียนโค้ดที่กระชับและอ่านง่าย ซึ่งจัดการลักษณะอะซิงโครนัสของคำขอเครือข่ายโดยไม่มีความซับซ้อนในการเรียกกลับ

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

สนับสนุน:รองรับเบราว์เซอร์สมัยใหม่ทั้งหมด

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

7. API ที่เก็บข้อมูลเว็บ

บันทึกการตั้งค่าผู้ใช้หรือข้อมูลเซสชันได้ง่ายกว่าที่เคยด้วย Web Storage API มีสองตัวเลือกการจัดเก็บข้อมูลหลัก:

พื้นที่เก็บข้อมูลท้องถิ่นสำหรับข้อมูลถาวรที่รอดจากการรีเฟรชเพจ
เซสชั่นการจัดเก็บสำหรับข้อมูลชั่วคราวที่คงอยู่เฉพาะช่วงระยะเวลาของเซสชันเพจเท่านั้น

ตัวอย่าง:

การใช้ Structured Clone API

สร้างวัตถุดั้งเดิม

กำหนดวัตถุที่จะคัดลอก

โครงสร้างการโทรClone()

ใช้ API เพื่อโคลนวัตถุ

จัดการกับประเภทที่ซับซ้อน

รองรับแผนที่ ตั้งค่า และ Blob

หลีกเลี่ยงการโคลนฟังก์ชัน

จำไว้ว่ามันไม่ได้ลอกเลียนแบบฟังก์ชั่น

localStorage.setItem('คีย์', 'ค่า');
ค่า const = localStorage.getItem('คีย์');

API นี้มีประโยชน์อย่างยิ่งสำหรับ:

การจัดเก็บการตั้งค่าของผู้ใช้ เช่น การตั้งค่าธีมหรือตัวเลือกภาษา
การจัดการข้อมูลเซสชัน เช่น โทเค็นการตรวจสอบสิทธิ์ผู้ใช้
ติดตามสินค้าในตะกร้าสินค้าโดยไม่ต้องใช้โซลูชันฝั่งเซิร์ฟเวอร์

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

สนับสนุน:รองรับเบราว์เซอร์สมัยใหม่ทั้งหมด

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

8. API การแจ้งเตือนทางเว็บ

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

ถ้า (Notification.permission !== "ได้รับ") {
  ประกาศ.requestPermission();
}

การแจ้งเตือน const = การแจ้งเตือนใหม่ ("สวัสดี!", {
  body: "นี่คือข้อความแจ้งเตือน!",
});

กรณีการใช้งานได้แก่:

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

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

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

สนับสนุน:มีอยู่ในเบราว์เซอร์ที่ทันสมัยที่สุด

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

9. พนักงานบริการ

Service Workers เป็นคุณสมบัติที่มีประสิทธิภาพที่ช่วยให้คุณสามารถเรียกใช้สคริปต์ในเบื้องหลัง โดยแยกจากหน้าเว็บ ซึ่งเปิดใช้งานคุณสมบัติต่างๆ เช่น การสนับสนุนออฟไลน์และการซิงค์ในพื้นหลัง:

self.addEventListener('ติดตั้ง', เหตุการณ์ => {
  // ทำตามขั้นตอนการติดตั้ง
});

self.addEventListener('ดึงข้อมูล', เหตุการณ์ => {
  เหตุการณ์.respondWith(
    caches.match (event.request)
      .then(ตอบกลับ => {
        ตอบกลับการตอบกลับ || ดึงข้อมูล (event.request);
      })
  );
});

ด้วยพนักงานบริการ คุณสามารถ:

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

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

สนับสนุน:รองรับเบราว์เซอร์สมัยใหม่ แต่ตรวจสอบความเข้ากันได้ก่อนใช้งานเสมอ

เคล็ดลับการปฏิบัติ: ใช้ API `แคช` ภายในพนักงานบริการของคุณเพื่อจัดเก็บทรัพยากรที่จำเป็นและปรับปรุงเวลาในการโหลดสำหรับผู้ใช้ที่กลับมา ตรวจสอบให้แน่ใจว่าพนักงานบริการของคุณลงทะเบียนและเปิดใช้งานอย่างถูกต้องเพื่อประสิทธิภาพสูงสุด

10. API การแบ่งปันเว็บ

Web Share API ช่วยให้ผู้ใช้สามารถแบ่งปันเนื้อหาจากแอปพลิเคชันเว็บของคุณไปยังแอปพลิเคชันอื่นๆ บนอุปกรณ์ของตน เช่น โซเชียลมีเดีย:

นาวิเกเตอร์.แชร์({
  หัวเรื่อง: 'Web Share API',
  text: 'ลองดูเนื้อหานี้!',
  URL: 'https://example.com',
}).แล้ว(() => {
  console.log('แชร์เนื้อหาสำเร็จ!');
}).catch((ข้อผิดพลาด) => {
  console.error('ข้อผิดพลาดในการแชร์:', ข้อผิดพลาด);
});

คุณสมบัติที่สำคัญของ Web Share API ได้แก่:

แบ่งปันข้อความ URL และรูปแบบข้อมูลอื่น ๆ ได้อย่างง่ายดาย
กล่องโต้ตอบการแชร์แบบเนทีฟที่ทำงานร่วมกับอุปกรณ์ของผู้ใช้
ปรับปรุงการมีส่วนร่วมของผู้ใช้โดยการสนับสนุนการแบ่งปัน

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

สนับสนุน:มีอยู่ในเบราว์เซอร์ที่ทันสมัยที่สุดพร้อมการรองรับมือถือ

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

บทสรุป

การใช้ API ของเบราว์เซอร์สามารถปรับปรุงแอปพลิเคชันเว็บของคุณได้อย่างมากโดยไม่จำเป็นต้องใช้ไลบรารีเพิ่มเติม ในบทความนี้ เราได้กล่าวถึง API ที่มีประสิทธิภาพ 10 รายการ รวมถึง Structured Clone API, Performance API และอื่นๆ อีกมากมาย เครื่องมือแต่ละอย่างเหล่านี้สามารถช่วยลดความซับซ้อนของโค้ดและปรับปรุงประสิทธิภาพได้

คุณพร้อมที่จะยกระดับทักษะการพัฒนาเว็บของคุณไปอีกระดับแล้วหรือยัง? สำรวจ API เหล่านี้ในโปรเจ็กต์ถัดไปของคุณและดูว่า API เหล่านี้ทำงานให้คุณได้อย่างไร หากต้องการอ่านเพิ่มเติมเกี่ยวกับเครื่องมือที่สามารถเพิ่มประสิทธิภาพการผลิตของคุณได้ โปรดดูของเราแปลงรูปภาพเป็น GIFและแปลงวิดีโอเป็น MP3 ฟรี.

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับความก้าวหน้าล่าสุดในเทคโนโลยีเว็บ โปรดไปที่OpenAIและกอดหน้า.