Giới thiệu vềAPI trình duyệt

Bối cảnh phát triển web đang phát triển nhanh chóng. Hàng năm, các trình duyệt đều có được những khả năng mới có thể đơn giản hóa quá trình mã hóa của bạn. Với sự phát triển của các ứng dụng web hiện đại, các nhà phát triển có quyền truy cập vào bộ công cụ mạnh mẽ trực tiếp trong trình duyệt, loại bỏ nhu cầu về các thư viện và khung công tác quá mức.

Trong bài viết này, chúng ta sẽ tìm hiểu10 API trình duyệt ít được sử dụngcó thể giúp bạn giải quyết các vấn đề thường gặp hiệu quả hơn. Tại sao dự án của bạn phải lộn xộn với các thư viện khi trình duyệt có thể thực hiện những công việc nặng nhọc?

Cho dù bạn là nhà phát triển dày dạn kinh nghiệm hay mới bắt đầu, những API này có thể làm bạn ngạc nhiên vì tính đơn giản và sức mạnh của chúng. Hãy cùng tìm hiểu sâu hơn và xem những công cụ này có thể nâng cao ứng dụng web của bạn như thế nào.

1. API bản sao có cấu trúc

API bản sao có cấu trúc là một công cụ thay đổi cuộc chơi để sao chép các đối tượng. Đối với nhiều nhà phát triển, việc sao chép đối tượng luôn là một công việc phức tạp, thường yêu cầu các thư viện hoặc hàm phức tạp. Với API này, bạn có thể dễ dàng tạo bản sao sâu của một đối tượng:

const copy = có cấu trúcClone(bản gốc);

Lớp lót này giải quyết được nhiều vấn đề:

Xử lý các kiểu dữ liệu phức tạp nhưBản đồ, Bộ, Vàđốm màu.
Quản lý các tham chiếu vòng tròn mà không làm hỏng mã của bạn.
Lưu ý: Nó không sao chép các chức năng, đây là một khía cạnh quan trọng cần ghi nhớ.

Ví dụ: hãy cân nhắc khi bạn cần sao chép một đối tượng phức tạp bao gồm các mảng hoặc đối tượng lồng nhau. Việc sử dụng các phương pháp truyền thống như tuần tự hóa JSON có thể dẫn đến mất dữ liệu hoặc lỗi, đặc biệt là với các tham chiếu vòng tròn. API bản sao có cấu trúc loại bỏ những lo ngại này, cung cấp một cách liền mạch để sao chép dữ liệu của bạn.

Ủng hộ:Có sẵn trong các trình duyệt hiện đại như Chrome, Firefox và Safari, giúp sử dụng an toàn trong sản xuất.

Mẹo thực tế: Khi sử dụng API này, hãy luôn kiểm tra tính tương thích của trình duyệt để đảm bảo ứng dụng của bạn hoạt động nhất quán trên các môi trường khác nhau.

2. API hiệu suất

Khi nói đến đo lường hiệu suất, API hiệu suất thường bị bỏ qua. Thay vì dựa vào các công cụ của bên thứ ba, bạn có thể sử dụng API này để theo dõi và so sánh hiệu suất mã của mình:

performance.mark("bắt đầu");
// mã để đo
performance.mark("end");
performance.measure("calc", "start", "end");
console.log(performance.getEntriesByName("calc"));

Điều này có thể giúp bạn xác định:

Chức năng nào nhanh hơn.
Nếu tối ưu hóa thực sự có lợi.
Liệu Công nhân hay WASM có đáng để triển khai hay không.

Ví dụ: nếu bạn đang phát triển một ứng dụng web phức tạp xử lý dữ liệu người dùng, bạn có thể sử dụng API hiệu suất để đánh giá các chức năng hoặc tính năng cụ thể. Bằng cách đo thời gian thực hiện, bạn có thể xác định các điểm nghẽn và tối ưu hóa cho phù hợp.

Ngoài ra, API hiệu suất cho phép bạn ghi lại các số liệu hiệu suất chi tiết, có thể hữu ích cho việc gỡ lỗi hoặc tối ưu hóa ứng dụng của bạn. Bạn có thể xem các số liệu này trong công cụ dành cho nhà phát triển của trình duyệt trong tab hiệu suất.

Ủng hộ:Hoạt động xuất sắc trên tất cả các trình duyệt hiện đại.

Mẹo thực tế: Sử dụng API hiệu suất trong quá trình phát triển để thu thập dữ liệu về hiệu suất mã của bạn. Thông tin này có thể hướng dẫn nỗ lực tối ưu hóa của bạn và cải thiện trải nghiệm người dùng.

3. API hiển thị trang

Bạn có bao giờ tự hỏi điều gì sẽ xảy ra khi người dùng chuyển đổi tab không? Với API hiển thị trang, bạn có thể phát hiện khi nào tab của mình có hoạt động hay không:

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    video.pause();
  }
});

API này cực kỳ hữu ích cho:

API trình duyệt chính cần biết

📦

API bản sao có cấu trúc
Dễ dàng sao chép các đối tượng phức tạp.

📈

API hiệu suất
Đo lường và nâng cao hiệu suất web.

👀

API hiển thị trang
Phát hiện khi trang được hiển thị.

📏

Thay đổi kích thướcObserver
Đáp ứng với những thay đổi về kích thước phần tử.

🔍

Người quan sát giao lộ
Giám sát khả năng hiển thị của các yếu tố.

Tạm dừng video khi người dùng không tương tác.
Dừng các yêu cầu bỏ phiếu không cần thiết để cải thiện hiệu suất.
Giảm mức sử dụng CPU để tiết kiệm pin trên thiết bị di động.

Ví dụ: nếu bạn đang phát triển ứng dụng truyền phát video, bạn có thể sử dụng API hiển thị trang để tạm dừng video khi người dùng điều hướng khỏi tab. Điều này không chỉ cải thiện trải nghiệm người dùng mà còn tiết kiệm băng thông và tài nguyên máy chủ.

Hơn nữa, bạn có thể triển khai các tính năng phân tích theo dõi mức độ tương tác của người dùng dựa trên những thay đổi về khả năng hiển thị. Dữ liệu này có thể giúp bạn hiểu cách người dùng tương tác với ứng dụng của bạn và tính năng nào hấp dẫn nhất.

Ủng hộ:Tương thích với tất cả các trình duyệt hiện đại.

Mẹo thực tế: Luôn kiểm tra tính năng hiển thị trong nhiều tình huống khác nhau, chẳng hạn như chuyển đổi tab, thu nhỏ trình duyệt hoặc chuyển sang ứng dụng khác để đảm bảo ứng dụng hoạt động như mong đợi.

4. Thay đổi kích thướcObserver

Đối với thiết kế đáp ứng, việc theo dõi kích thước phần tử có thể là một rắc rối. API ResizeObserver cho phép bạn theo dõi các thay đổi về kích thước của một phần tử:

const ro = new ResizeObserver(entries => {
  for (mục nhập hằng của các mục) {
    console.log(entry.contentRect.width);
  }
});
ro.observe(element);

API này là một sự giải thoát cho các nhà phát triển đã từng phải xử lý logic thay đổi kích thước rườm rà trong quá khứ. Bây giờ, trình duyệt có thể xử lý việc đó cho bạn!

Hãy tưởng tượng bạn xây dựng một trang tổng quan với nhiều tiện ích khác nhau cần điều chỉnh bố cục dựa trên kích thước khung nhìn. ResizeObserver có thể giúp bạn phát hiện khi người dùng thay đổi kích thước cửa sổ hoặc thay đổi kích thước của một thành phần cụ thể, cho phép bạn sắp xếp lại giao diện người dùng của mình một cách linh hoạt.

Ủng hộ:Có sẵn rộng rãi trong các trình duyệt hiện đại.

Mẹo thực tế: Sử dụng ResizeObserver để nâng cao trải nghiệm người dùng bằng cách đảm bảo bố cục ứng dụng của bạn phản ứng linh hoạt với những thay đổi về kích thước. Điều này đặc biệt có lợi cho các thiết kế đáp ứng trong đó các yếu tố phải thích ứng liền mạch.

5. API quan sát giao lộ

Một công cụ mạnh mẽ khác là API Intersection Observer. Điều này cho phép bạn theo dõi khi một phần tử vào hoặc ra khỏi khung nhìn:

const người quan sát = new IntersectionObserver(entries => {
  mục.forEach(entry => {
    if (entry.isIntersecting) {
      // Tải nội dung hoặc kích hoạt hoạt ảnh
    }
  });
});
người quan sát.observe(targetElement);

Các trường hợp sử dụng bao gồm:

Tải hình ảnh chậm để có hiệu suất tốt hơn và thời gian tải trang nhanh hơn.
Kích hoạt hoạt ảnh khi các phần tử xuất hiện để mang lại trải nghiệm người dùng hấp dẫn hơn.
Cải thiện trải nghiệm người dùng bằng cách tải nội dung khi cần thiết, giảm thời gian tải ban đầu.

Ví dụ: nếu bạn có một bài viết dài có hình ảnh, bạn chỉ có thể tải hình ảnh khi chúng sắp vào chế độ xem. Điều này giúp giảm thời gian tải ban đầu và tiết kiệm băng thông, đặc biệt đối với người dùng trên thiết bị di động.

Ngoài ra, API Intersection Observer có thể trợ giúp phân tích bằng cách theo dõi số lượng người dùng cuộn đến các phần cụ thể trên trang web của bạn, cung cấp cho bạn thông tin chi tiết có giá trị về mức độ tương tác của người dùng.

Ủng hộ:Có sẵn trong các trình duyệt hiện đại.

Mẹo thực tế: Triển khai API Intersection Observer để tối ưu hóa hiệu suất, đặc biệt là trong các ứng dụng nặng về nội dung. Điều này sẽ giúp bạn tạo ra trải nghiệm mượt mà hơn cho người dùng đồng thời tiết kiệm tài nguyên.

6. Tìm nạp API

Đã qua rồi cái thời của XMLHttpRequest. API tìm nạp đơn giản hóa quá trình thực hiện các yêu cầu mạng:

tìm nạp(url)
  .then(phản hồi => phản hồi.json())
  .then(data => console.log(data));

Với API này, bạn có thể dễ dàng:

Xử lý các loại phản hồi khác nhau, chẳng hạn như JSON, văn bản và đốm màu.
Sử dụng async/await để mã sạch hơn và dễ đọc hơn.
Đặt tiêu đề tùy chỉnh cho các yêu cầu của bạn, giúp nó linh hoạt với nhiều API khác nhau.

Chẳng hạn, bạn có thể cần tìm nạp dữ liệu người dùng từ API REST. Với API tìm nạp, bạn có thể viết mã ngắn gọn và dễ đọc để xử lý tính chất không đồng bộ của các yêu cầu mạng mà không gặp phải sự phức tạp của lệnh gọi lại.

Hơn nữa, API tìm nạp hỗ trợ các lời hứa, giúp làm việc với các yêu cầu theo chuỗi hoặc xử lý lỗi một cách dễ dàng hơn. Bạn cũng có thể dễ dàng xử lý các trạng thái phản hồi khác nhau, cung cấp một cách mạnh mẽ để quản lý các tương tác mạng.

Ủng hộ:Được hỗ trợ bởi tất cả các trình duyệt hiện đại.

Mẹo thực tế: Sử dụng API tìm nạp cho tất cả các yêu cầu mạng của bạn để cải thiện khả năng đọc và khả năng bảo trì. Hãy nhớ xử lý lỗi một cách thích hợp để đảm bảo trải nghiệm người dùng được mượt mà.

7. API lưu trữ web

Lưu tùy chọn người dùng hoặc dữ liệu phiên chưa bao giờ dễ dàng hơn thế với API lưu trữ web. Nó cung cấp hai tùy chọn lưu trữ chính:

lưu trữ cục bộdành cho dữ liệu liên tục tồn tại sau khi làm mới trang.
phiênStorageđối với dữ liệu tạm thời chỉ tồn tại trong suốt thời gian của phiên trang.

Ví dụ:

Sử dụng API bản sao có cấu trúc

Tạo đối tượng gốc

Xác định đối tượng cần sao chép.

Gọi có cấu trúcClone()

Sử dụng API để sao chép đối tượng.

Xử lý các loại phức tạp

Hỗ trợ Bản đồ, Bộ và Blob.

Tránh nhân bản chức năng

Hãy nhớ rằng nó không sao chép chức năng.

localStorage.setItem('key', 'value');
giá trị const = localStorage.getItem('key');

API này đặc biệt hữu ích cho:

Lưu trữ tùy chọn của người dùng, chẳng hạn như cài đặt chủ đề hoặc lựa chọn ngôn ngữ.
Quản lý dữ liệu phiên, như mã thông báo xác thực người dùng.
Theo dõi các mặt hàng trong giỏ hàng mà không cần giải pháp phía máy chủ.

Ví dụ: nếu bạn đang xây dựng một trang web thương mại điện tử, bạn có thể sử dụng API lưu trữ web để ghi nhớ các mặt hàng mà người dùng thêm vào giỏ hàng của họ, ngay cả khi họ điều hướng khỏi trang hoặc làm mới trang.

Ủng hộ:Được hỗ trợ bởi tất cả các trình duyệt hiện đại.

Mẹo thực tế: Sử dụng localStorage cho dữ liệu mà bạn muốn lưu giữ trong các phiên và sessionStorage cho dữ liệu chỉ liên quan trong một lần truy cập. Luôn ghi nhớ ý nghĩa bảo mật khi lưu trữ thông tin nhạy cảm.

8. API thông báo trên web

API thông báo web cho phép các ứng dụng web hiển thị thông báo cho người dùng. Tính năng này có thể nâng cao mức độ tương tác của người dùng bằng cách thông báo cho họ ngay cả khi họ không tích cực sử dụng ứng dụng của bạn:

if (Notification.permission !== "được cấp") {
  Thông báo.requestPermission();
}

const notification = Thông báo mới("Xin chào!", {
  body: "Đây là tin nhắn thông báo!",
});

Các trường hợp sử dụng bao gồm:

Cảnh báo người dùng về tin nhắn hoặc cập nhật mới trong ứng dụng trò chuyện.
Thông báo cho người dùng về các sự kiện quan trọng, như lời nhắc hoặc thời hạn.
Cung cấp phản hồi sau một hành động của người dùng, chẳng hạn như gửi biểu mẫu.

Ví dụ: nếu bạn đang phát triển một ứng dụng nhắn tin, bạn có thể sử dụng API thông báo web để thông báo cho người dùng về tin nhắn mới trong khi họ đang duyệt các tab hoặc ứng dụng khác.

Việc triển khai thông báo có thể cải thiện đáng kể trải nghiệm người dùng bằng cách đảm bảo người dùng luôn được thông báo về các cập nhật quan trọng mà không cần phải kiểm tra ứng dụng liên tục.

Ủng hộ:Có sẵn trong hầu hết các trình duyệt hiện đại.

Mẹo thực tế: Luôn xin phép người dùng trước khi gửi thông báo để đảm bảo trải nghiệm tích cực cho người dùng. Cung cấp nội dung có ý nghĩa trong thông báo để khuyến khích sự tham gia của người dùng.

9. Nhân viên phục vụ

Service Workers là một tính năng mạnh mẽ cho phép bạn chạy các tập lệnh ở chế độ nền, tách biệt khỏi trang web. Điều này cho phép các tính năng như hỗ trợ ngoại tuyến và đồng bộ hóa nền:

self.addEventListener('cài đặt', sự kiện => {
  // Thực hiện các bước cài đặt
});

self.addEventListener('tìm nạp', sự kiện => {
  sự kiện.respondWith(
    caches.match(event.request)
      .then(phản hồi => {
        trả lời phản hồi || tìm nạp(event.request);
      })
  );
});

Với Service Workers, bạn có thể:

Tài nguyên bộ đệm để làm cho ứng dụng của bạn khả dụng ngoại tuyến.
Chặn các yêu cầu mạng để cung cấp nội dung được lưu trong bộ nhớ đệm hoặc phản hồi dự phòng.
Bật thông báo đẩy để thu hút người dùng.

Ví dụ: nếu bạn đang xây dựng Ứng dụng web lũy tiến (PWA), Service Worker rất cần thiết để cung cấp trải nghiệm ngoại tuyến liền mạch. Người dùng có thể tiếp tục tương tác với ứng dụng của bạn ngay cả khi không có kết nối internet và mọi thay đổi sẽ được đồng bộ hóa sau khi họ trực tuyến trở lại.

Ủng hộ:Được hỗ trợ trong các trình duyệt hiện đại nhưng luôn kiểm tra tính tương thích trước khi triển khai.

Mẹo thực tế: Sử dụng API `cache` trong Service Workers của bạn để lưu trữ các tài nguyên cần thiết và cải thiện thời gian tải cho người dùng cũ. Đảm bảo Nhân viên dịch vụ của bạn được đăng ký và kích hoạt chính xác để có hiệu suất tối ưu.

10. API chia sẻ web

API chia sẻ web cho phép người dùng chia sẻ nội dung từ ứng dụng web của bạn với các ứng dụng khác trên thiết bị của họ, chẳng hạn như phương tiện truyền thông xã hội:

navigator.share({
  tiêu đề: 'API chia sẻ web',
  text: 'Hãy xem nội dung này!',
  url: 'https://example.com',
}).then(() => {
  console.log('Nội dung được chia sẻ thành công!');
}).catch((lỗi) => {
  console.error('Lỗi chia sẻ:', error);
});

Các tính năng chính của API chia sẻ web bao gồm:

Dễ dàng chia sẻ văn bản, URL và các định dạng dữ liệu khác.
Hộp thoại chia sẻ gốc tích hợp với thiết bị của người dùng.
Cải thiện sự tham gia của người dùng bằng cách khuyến khích chia sẻ.

Ví dụ: nếu bạn có một bài đăng trên blog, bạn có thể cho phép người dùng chia sẻ bài đăng đó trên phương tiện truyền thông xã hội của họ trực tiếp từ trang web của bạn. Tính năng này có thể tăng đáng kể phạm vi tiếp cận và mức độ tương tác của nội dung của bạn.

Ủng hộ:Có sẵn trong hầu hết các trình duyệt hiện đại có hỗ trợ di động.

Mẹo thực tế: Trước khi sử dụng API chia sẻ web, hãy kiểm tra xem thiết bị của người dùng có hỗ trợ API này hay không. Cung cấp tùy chọn dự phòng để chia sẻ nếu API không khả dụng để đảm bảo trải nghiệm liền mạch.

Phần kết luận

Việc sử dụng API trình duyệt có thể cải thiện đáng kể các ứng dụng web của bạn mà không cần thêm thư viện. Trong bài viết này, chúng tôi đã đề cập đến 10 API mạnh mẽ, bao gồm API bản sao có cấu trúc, API hiệu suất, v.v. Mỗi công cụ này có thể giúp đơn giản hóa mã của bạn và cải thiện hiệu suất.

Bạn đã sẵn sàng nâng cao kỹ năng phát triển web của mình lên một tầm cao mới chưa? Khám phá các API này trong dự án tiếp theo của bạn và xem chúng có thể hoạt động như thế nào cho bạn. Để đọc thêm về các công cụ có thể nâng cao năng suất của bạn, hãy xemcông cụ chuyển đổi hình ảnh sang GIFVàphần mềm chuyển đổi video sang MP3 miễn phí.

Để biết thêm thông tin về những tiến bộ mới nhất trong công nghệ web, hãy truy cậpOpenAIVàôm mặt.