Giới thiệu

Khi bắt đầu làm việc tại Lingo.dev, tôi nhận thấy rằng một số gói Node.js không còn cần thiết nữa vì chúng có thể được thay thế bằng các tính năng có sẵn trong trình duyệt. Tương tự, các trình duyệt hiện đại đi kèm với hàng tá API ít được biết đến. Những tính năng gốc này xử lý mọi thứ từ phản hồi xúc giác đến quét mã vạch, đôi khi loại bỏ nhu cầu sử dụng thư viện bên ngoài.

Dưới đây là 21 API trình duyệt với ví dụ mã thực tiễn cho từng cái.

1. Web Share API

API Web Share cho phép bạn truy cập vào khả năng chia sẻ gốc của hệ điều hành. Thay vì xây dựng các nút chia sẻ tùy chỉnh cho từng nền tảng, bạn có thể gọi hộp thoại chia sẻ của hệ thống chỉ với một lệnh API.

navigator.share({
  title: 'Xem bài viết này',
  text: 'Tôi thấy bài viết này thú vị về các API trình duyệt',
  url: 'https://example.com/article'
});

2. Vibration API

Điều khiển động cơ rung của thiết bị để cung cấp phản hồi xúc giác. Tính năng này chủ yếu hoạt động trên các thiết bị di động và có thể tăng cường tương tác của người dùng với những phản hồi vật lý tinh tế.

// Mẫu rung: 100ms bật, 50ms tắt, 100ms bật
navigator.vibrate([100, 50, 100]);

3. Broadcast Channel API

Giao tiếp giữa các ngữ cảnh trình duyệt khác nhau (tab, cửa sổ, iframe) cùng nguồn gốc. Hãy nghĩ về nó như một bus tin nhắn cho ứng dụng của bạn trên nhiều cửa sổ.

const channel = new BroadcastChannel('app-notifications');

// Gửi tin nhắn đến các tab khác
channel.postMessage({ type: 'user-logout' });

// Lắng nghe tin nhắn
channel.onmessage = (event) => {
  console.log('Nhận:', event.data);
};

4. Screen Wake Lock API

Ngăn không cho màn hình thiết bị tối hoặc khóa trong khi ứng dụng của bạn đang được sử dụng. Thích hợp cho ứng dụng nấu ăn, công cụ trình chiếu hoặc trình phát video.

const wakeLock = await navigator.wakeLock.request('screen');

// Giải phóng khi xong
wakeLock.release();

5. Page Visibility API

Phát hiện khi một trang trở nên hiển thị hoặc ẩn với người dùng. Điều này giúp tối ưu hóa hiệu suất bằng cách tạm dừng các hoạt động không cần thiết khi người dùng chuyển tab.

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('Tab đang ẩn');
  } else {
    console.log('Tab đang hiển thị');
  }
});

6. Clipboard API

API hiện đại, dựa trên promise để tương tác với bộ nhớ tạm. Nó xử lý cả văn bản và các loại dữ liệu khác với quản lý quyền truy cập đúng cách.

// Sao chép văn bản
await navigator.clipboard.writeText('Xin chào thế giới');

// Đọc văn bản
const text = await navigator.clipboard.readText();

7. Web Speech API

Thêm nhận diện giọng nói và tổng hợp giọng nói vào ứng dụng web của bạn. API này bao gồm hai phần: SpeechRecognition để chuyển đổi giọng nói thành văn bản, và SpeechSynthesis để chuyển văn bản thành giọng nói.

// Giọng nói thành văn bản
const recognition = new webkitSpeechRecognition();
recognition.onresult = (event) => {
  console.log(event.results[0][0].transcript);
};
recognition.start();

// Văn bản thành giọng nói
speechSynthesis.speak(new SpeechSynthesisUtterance('Xin chào thế giới'));

8. Battery Status API

Theo dõi mức pin và trạng thái sạc của thiết bị. Hữu ích cho việc điều chỉnh hành vi ứng dụng dựa trên khả năng cung cấp điện.

const battery = await navigator.getBattery();
console.log(`Mức pin: ${battery.level * 100}%`);
console.log(`Đang sạc: ${battery.charging}`);

9. Network Information API

Lấy thông tin về kết nối mạng của người dùng, bao gồm loại kết nối và băng thông hiệu quả. Điều này giúp bạn thích ứng với việc cung cấp nội dung dựa trên điều kiện mạng.

console.log(`Kết nối: ${navigator.connection.effectiveType}`);
console.log(`Tốc độ tải: ${navigator.connection.downlink}Mbps`);

10. Payment Request API

Tối ưu hóa quy trình thanh toán bằng cách tích hợp với UI thanh toán gốc của trình duyệt. Người dùng có thể thanh toán bằng thẻ đã lưu, ví điện tử và các phương thức thanh toán khác.

const payment = await new PaymentRequest(
  [{ supportedMethods: 'basic-card' }],
  { total: { label: 'Tổng', amount: { currency: 'USD', value: '10.00' } } }
).show();

11. Resize Observer API

Theo dõi sự thay đổi kích thước của phần tử một cách hiệu quả mà không cần dựa vào sự kiện thay đổi kích thước cửa sổ. Hoàn hảo cho các thành phần phản hồi cần phản ứng với sự thay đổi kích thước.

new ResizeObserver(entries => {
  entries.forEach(entry => {
    console.log(`Chiều rộng mới: ${entry.contentRect.width}`);
  });
}).observe(document.querySelector('.element'));

12. Credential Management API

Tối ưu hóa quy trình đăng nhập bằng cách tích hợp với trình quản lý mật khẩu của trình duyệt. Người dùng có thể đăng nhập chỉ với một lần nhấn bằng cách sử dụng thông tin đăng nhập đã lưu.

// Lưu trữ thông tin đăng nhập
await navigator.credentials.store(
  new PasswordCredential({ id: 'user@example.com', password: 'p@ssw0rd' })
);

// Lấy thông tin đăng nhập
const cred = await navigator.credentials.get({ password: true });

13. Screen Orientation API

Kiểm soát và phản ứng với sự thay đổi hướng màn hình. Hữu ích cho trò chơi, trình phát video và các ứng dụng khác được hưởng lợi từ các hướng cụ thể.

// Khóa ở chế độ ngang
await screen.orientation.lock('landscape');

// Hướng hiện tại
console.log(screen.orientation.type); // "landscape-primary"

14. Idle Detection API

Phát hiện khi người dùng trở nên không hoạt động (không tương tác với bàn phím, chuột hoặc màn hình). Hữu ích cho ứng dụng trò chuyện, công cụ hợp tác hoặc các tính năng bảo mật.

const detector = new IdleDetector();
detector.addEventListener('change', () => {
  console.log(`Người dùng: ${detector.userState}, Màn hình: ${detector.screenState}`);
});
await detector.start({ threshold: 60000 });

15. File System Access API

Đọc và ghi tệp trực tiếp từ trình duyệt với sự cho phép của người dùng. Điều này cho phép thao tác tệp mạnh mẽ mà không cần quay vòng đến máy chủ.

// Mở tệp
const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const content = await file.text();

// Lưu tệp
const writable = await fileHandle.createWritable();
await writable.write('Nội dung mới');
await writable.close();

16. EyeDropper API

Cho phép người dùng chọn màu từ bất kỳ đâu trên màn hình của họ. Hoàn hảo cho các công cụ thiết kế, tùy chỉnh giao diện hoặc bất kỳ ứng dụng nào làm việc với màu sắc.

const { sRGBHex } = await new EyeDropper().open();
console.log(sRGBHex); // "#ff5733"

17. WebOTP API

Tự động đọc mã xác minh SMS trên các thiết bị di động. Điều này giúp quy trình xác thực hai yếu tố trở nên mượt mà hơn bằng cách loại bỏ việc nhập mã thủ công.

const { code } = await navigator.credentials.get({
  otp: { transport: ['sms'] }
});

18. Contact Picker API

Truy cập danh bạ của thiết bị với sự cho phép của người dùng. Người dùng có thể chọn các liên hệ để chia sẻ với ứng dụng của bạn mà không cần nhập thủ công.

const contacts = await navigator.contacts.select(
  ['name', 'email'],
  { multiple: true }
);

19. Barcode Detection API

Phát hiện và giải mã mã vạch và mã QR trực tiếp trong trình duyệt. Không cần thư viện bên ngoài để quét các định dạng mã khác nhau.

const barcodes = await new BarcodeDetector().detect(imageElement);
console.log(barcodes[0].rawValue);

20. Geolocation API

Mặc dù không hoàn toàn không được biết đến, nhưng API Geolocation có một số tính năng ít được sử dụng hơn như theo dõi thay đổi vị trí và tinh chỉnh yêu cầu độ chính xác.

// Lấy vị trí với độ chính xác cao
navigator.geolocation.getCurrentPosition(
  position => console.log(position.coords),
  error => console.error(error),
  { enableHighAccuracy: true }
);

// Theo dõi sự thay đổi vị trí
const watchId = navigator.geolocation.watchPosition(position => {
  console.log(`Di chuyển đến: ${position.coords.latitude}, ${position.coords.longitude}`);
});

21. Notification API

Tạo thông báo hệ thống xuất hiện bên ngoài cửa sổ trình duyệt. Kết hợp với service workers, những thông báo này có thể hoạt động ngay cả khi ứng dụng của bạn không mở.

// Yêu cầu quyền truy cập
await Notification.requestPermission();

// Hiển thị thông báo
new Notification('Xin chào!', {
  body: 'Đây là một thông báo',
  icon: '/icon.png'
});

Thực hành tốt nhất

• Kiểm tra tương thích: Trước khi sử dụng các API này, hãy kiểm tra tính tương thích với các trình duyệt mà bạn đang nhắm đến để đảm bảo rằng người dùng có thể sử dụng chúng mà không gặp sự cố.
• Quản lý quyền: Nhiều API yêu cầu sự cho phép từ người dùng. Đảm bảo bạn quản lý quyền truy cập một cách hợp lý và rõ ràng với người dùng.

Cạm bẫy phổ biến

• Phụ thuộc vào tính năng: Một số API có thể không hoạt động trên tất cả các thiết bị hoặc trình duyệt. Điều này có thể gây ra trải nghiệm không đồng nhất cho người dùng.
• Tối ưu hóa hiệu suất: Một số API, nếu không được sử dụng đúng cách, có thể gây ra hiệu suất kém. Hãy xem xét các tác động đến hiệu suất khi sử dụng chúng.

Mẹo hiệu suất

• Sử dụng các API một cách có chọn lọc: Chỉ sử dụng những API thực sự cần thiết cho ứng dụng của bạn. Việc sử dụng quá nhiều API có thể làm chậm ứng dụng.
• Kiểm tra và tối ưu hóa mã: Đảm bảo mã của bạn được tối ưu hóa và kiểm tra kỹ lưỡng trước khi triển khai.

Giải quyết sự cố

• Không hoạt động: Nếu một API không hoạt động như mong đợi, hãy kiểm tra các lỗi trên console để tìm hiểu nguyên nhân.
• Kiểm tra quyền truy cập: Đảm bảo rằng bạn đã yêu cầu quyền truy cập cần thiết trước khi cố gắng sử dụng các API yêu cầu quyền.

Kết luận

Các API trình duyệt hiện đại mở ra nhiều khả năng mới cho các nhà phát triển web. Thay vì phụ thuộc vào các thư viện bên ngoài, bạn có thể tận dụng những tính năng có sẵn trực tiếp trong trình duyệt. Hãy thử nghiệm với những API này trong dự án của bạn và khám phá những điều thú vị mà chúng có thể mang lại! Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ cho bạn bè và đồng nghiệp nhé!