1. Giới thiệu và thiết lập
Các chức năng trên web
Chúng tôi muốn thu hẹp khoảng cách về khả năng giữa web và ứng dụng gốc, đồng thời giúp nhà phát triển dễ dàng tạo ra những trải nghiệm tuyệt vời trên web mở. Chúng tôi tin rằng mọi nhà phát triển đều cần có quyền truy cập vào những chức năng cần thiết để mang đến trải nghiệm web tuyệt vời, đồng thời chúng tôi cam kết mang đến một môi trường web có nhiều chức năng hơn.
Tuy nhiên, có một số chức năng (chẳng hạn như quyền truy cập vào hệ thống tệp và tính năng phát hiện trạng thái không hoạt động) có sẵn cho ứng dụng gốc nhưng không có trên web. Những thiếu hụt này có nghĩa là một số loại ứng dụng không thể phân phối trên web hoặc ít hữu ích hơn.
Chúng tôi sẽ thiết kế và phát triển những chức năng mới này theo cách cởi mở và minh bạch, sử dụng các quy trình tiêu chuẩn hiện có của nền tảng web mở, đồng thời thu thập ý kiến phản hồi sớm từ các nhà phát triển và nhà cung cấp trình duyệt khác trong quá trình lặp lại thiết kế để đảm bảo thiết kế có khả năng tương tác.
Sản phẩm bạn sẽ tạo ra
Trong lớp học lập trình này, bạn sẽ tìm hiểu một số API web hoàn toàn mới hoặc chỉ có sẵn sau một cờ. Vì vậy, lớp học lập trình này tập trung vào chính các API và các trường hợp sử dụng mà các API này mang lại, thay vì tập trung vào việc xây dựng một sản phẩm cuối cùng cụ thể.
Kiến thức bạn sẽ học được
Lớp học lập trình này sẽ hướng dẫn bạn cơ chế cơ bản của một số API tiên tiến. Xin lưu ý rằng những cơ chế này chưa được hoàn thiện và chúng tôi rất trân trọng ý kiến phản hồi của bạn về quy trình dành cho nhà phát triển.
Bạn cần có
Vì các API có trong lớp học lập trình này thực sự là những API mới nhất, nên yêu cầu đối với mỗi API sẽ khác nhau. Vui lòng nhớ đọc kỹ thông tin về khả năng tương thích ở đầu mỗi phần.
Cách tiếp cận lớp học lập trình
Bạn không nhất thiết phải thực hiện lớp học lập trình theo trình tự. Mỗi phần đại diện cho một API độc lập, vì vậy, bạn có thể thoải mái chọn lọc những phần mà bạn quan tâm nhất.
2. API Gán huy hiệu
Mục tiêu của Badging API là thu hút sự chú ý của người dùng đến những việc xảy ra ở chế độ nền. Để đơn giản hoá bản minh hoạ trong lớp học lập trình này, hãy dùng API để thu hút sự chú ý của người dùng đến một sự kiện đang diễn ra ở nền trước. Sau đó, bạn có thể chuyển sự chú ý sang những việc xảy ra ở chế độ nền.
Cài đặt Airhorner
Để API này hoạt động, bạn cần có một PWA được cài đặt vào màn hình chính. Vì vậy, bước đầu tiên là cài đặt một PWA, chẳng hạn như airhorner.com nổi tiếng thế giới. Nhấn vào nút Cài đặt ở góc trên cùng bên phải hoặc sử dụng trình đơn có biểu tượng ba dấu chấm để cài đặt theo cách thủ công.
Thao tác này sẽ cho thấy một lời nhắc xác nhận, hãy nhấp vào Cài đặt.
Giờ đây, bạn sẽ thấy một biểu tượng mới trong thanh dock của hệ điều hành. Nhấp vào biểu tượng đó để chạy PWA. Ứng dụng này sẽ có cửa sổ ứng dụng riêng và chạy ở chế độ độc lập.
|
|
Đặt huy hiệu
Giờ đây, khi đã cài đặt một PWA, bạn cần một số dữ liệu dạng số (huy hiệu chỉ có thể chứa số) để hiển thị trên huy hiệu. Một điều dễ dàng để đếm trong The Air Horner là tiếng thở dài, số lần tiếng còi được phát. Thực tế là khi đã cài đặt ứng dụng Airhorner, hãy thử bấm còi và kiểm tra huy hiệu. Số lần bấm còi sẽ tăng lên 1 mỗi khi bạn bấm còi.
Vậy quy trình này diễn ra như thế nào? Về cơ bản, mã này có dạng như sau:
let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
navigator.setExperimentalAppBadge(++hornCounter);
});
Bấm còi hơi vài lần rồi kiểm tra biểu tượng của PWA: biểu tượng này sẽ cập nhật mỗi. lần. còi hơi kêu. Dễ dàng như vậy.
Xoá huy hiệu
Bộ đếm sẽ tăng lên đến 99 rồi bắt đầu lại từ đầu. Bạn cũng có thể đặt lại mật khẩu theo cách thủ công. Mở thẻ Bảng điều khiển của Công cụ cho nhà phát triển, dán dòng dưới đây rồi nhấn Enter.
navigator.setExperimentalAppBadge(0);
Ngoài ra, bạn cũng có thể loại bỏ huy hiệu bằng cách xoá huy hiệu một cách rõ ràng như minh hoạ trong đoạn mã sau. Giờ đây, biểu tượng của PWA sẽ lại có dạng như lúc ban đầu, rõ ràng và không có huy hiệu.
navigator.clearExperimentalAppBadge();
Phản hồi
Bạn nghĩ sao về API này? Vui lòng giúp chúng tôi bằng cách trả lời ngắn gọn bài khảo sát này:
API này có dễ sử dụng không?
Bạn có chạy được ví dụ không?
Bạn có muốn chia sẻ thêm không? Có tính năng nào bị thiếu không? Vui lòng đưa ra ý kiến phản hồi nhanh chóng trong bản khảo sát này. Cảm ơn bạn!
3. Native File System API
Native File System API cho phép nhà phát triển tạo các ứng dụng web mạnh mẽ tương tác với các tệp trên thiết bị cục bộ của người dùng. Sau khi người dùng cấp quyền truy cập cho một ứng dụng web, API này cho phép ứng dụng web đọc hoặc lưu các thay đổi trực tiếp vào tệp và thư mục trên thiết bị của người dùng.
Đọc tệp
"Hello, world" của Native File System API là đọc một tệp cục bộ và lấy nội dung của tệp đó. Tạo một tệp .txt thuần tuý và nhập một số văn bản. Tiếp theo, hãy chuyển đến một trang web bảo mật bất kỳ (tức là một trang web được phân phát qua HTTPS) như example.com rồi mở bảng điều khiển Công cụ cho nhà phát triển. Dán đoạn mã bên dưới vào bảng điều khiển. Vì Native File System API yêu cầu một thao tác của người dùng, nên chúng tôi sẽ đính kèm một trình xử lý nhấp đúp vào tài liệu. Sau này, chúng ta sẽ cần đến mã nhận dạng tệp, vì vậy, hãy tạo mã nhận dạng này thành một biến chung.
document.ondblclick = async () => {
window.handle = await window.chooseFileSystemEntries();
const file = await handle.getFile();
document.body.textContent = await file.text();
};
Sau đó, khi bạn nhấp đúp vào bất kỳ vị trí nào trong trang example.com, một bộ chọn tệp sẽ xuất hiện.
Chọn tệp .txt mà bạn đã tạo trước đó. Sau đó, nội dung tệp sẽ thay thế nội dung body thực tế của example.com.
Lưu tệp
Tiếp theo, chúng ta muốn thực hiện một số thay đổi. Do đó, hãy chỉnh sửa body bằng cách dán đoạn mã bên dưới. Giờ đây, bạn có thể chỉnh sửa văn bản như thể trình duyệt là một trình chỉnh sửa văn bản.
document.body.contentEditable = true;
Bây giờ, chúng ta muốn ghi những thay đổi này vào tệp gốc. Do đó, chúng ta cần một trình ghi trên trình xử lý tệp. Bạn có thể lấy trình ghi này bằng cách dán đoạn mã bên dưới vào bảng điều khiển. Một lần nữa, chúng ta cần một cử chỉ của người dùng, vì vậy, lần này chúng ta sẽ đợi một lượt nhấp vào tài liệu chính.
document.onclick = async () => {
const writer = await handle.createWriter();
await writer.truncate(0);
await writer.write(0, document.body.textContent);
await writer.close();
};
Giờ đây, khi bạn nhấp (không nhấp đúp) vào tài liệu, lời nhắc cấp quyền sẽ xuất hiện. Khi bạn cấp quyền, nội dung của tệp sẽ là nội dung mà bạn đã chỉnh sửa trong body trước đó. Xác minh các thay đổi bằng cách mở tệp trong một trình chỉnh sửa khác (hoặc bắt đầu lại quy trình bằng cách nhấp đúp vào tài liệu một lần nữa và mở lại tệp).
Xin chúc mừng! Bạn vừa tạo trình chỉnh sửa văn bản nhỏ nhất trên thế giới [citation needed].
Phản hồi
Bạn nghĩ sao về API này? Vui lòng giúp chúng tôi bằng cách trả lời ngắn gọn bài khảo sát này:
API này có dễ sử dụng không?
Bạn có chạy được ví dụ không?
Bạn có muốn chia sẻ thêm không? Có tính năng nào bị thiếu không? Vui lòng đưa ra ý kiến phản hồi nhanh chóng trong bản khảo sát này. Cảm ơn bạn!
4. API Phát hiện hình dạng
Shape Detection API cung cấp quyền truy cập vào các trình phát hiện hình dạng được tăng tốc (ví dụ: cho khuôn mặt người) và hoạt động trên ảnh tĩnh và/hoặc nguồn cấp dữ liệu hình ảnh trực tiếp. Các hệ điều hành có những bộ phát hiện đối tượng hiệu suất cao và được tối ưu hoá cao, chẳng hạn như FaceDetector của Android. API Phát hiện hình dạng mở ra những phương thức triển khai gốc này và hiển thị chúng thông qua một bộ giao diện JavaScript.
Hiện tại, các tính năng được hỗ trợ là phát hiện khuôn mặt thông qua giao diện FaceDetector, phát hiện mã vạch thông qua giao diện BarcodeDetector và phát hiện văn bản (nhận dạng ký tự quang học) thông qua giao diện TextDetector.
Phát hiện khuôn mặt
Một tính năng thú vị của Shape Detection API là tính năng phát hiện khuôn mặt. Để kiểm thử, chúng ta cần một trang có khuôn mặt. Trang này có khuôn mặt của tác giả là một khởi đầu tốt. Giao diện sẽ có dạng như ảnh chụp màn hình bên dưới. Trên một trình duyệt được hỗ trợ, hộp giới hạn của khuôn mặt và các điểm trên khuôn mặt sẽ được nhận dạng.
Bạn có thể thấy cần rất ít mã để thực hiện việc này bằng cách phối lại hoặc chỉnh sửa dự án Glitch, đặc biệt là tệp script.js.
Nếu bạn muốn sử dụng hoàn toàn chế độ động và không chỉ làm việc với khuôn mặt của tác giả, hãy chuyển đến trang kết quả tìm kiếm trên Google Tìm kiếm này có đầy đủ khuôn mặt trong một thẻ riêng tư hoặc ở chế độ khách. Giờ đây, trên trang đó, hãy mở Công cụ cho nhà phát triển Chrome bằng cách nhấp chuột phải vào vị trí bất kỳ rồi nhấp vào Kiểm tra. Tiếp theo, trên thẻ Bảng điều khiển, hãy dán đoạn mã bên dưới. Đoạn mã này sẽ làm nổi bật các khuôn mặt được phát hiện bằng một hộp màu đỏ bán trong suốt.
document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
try {
const faces = await new FaceDetector().detect(img);
faces.forEach(face => {
const div = document.createElement('div');
const box = face.boundingBox;
const computedStyle = getComputedStyle(img);
const [top, right, bottom, left] = [
computedStyle.marginTop,
computedStyle.marginRight,
computedStyle.marginBottom,
computedStyle.marginLeft
].map(m => parseInt(m, 10));
const scaleX = img.width / img.naturalWidth;
const scaleY = img.height / img.naturalHeight;
div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
div.style.position = 'absolute';
div.style.top = `${scaleY * box.top + top}px`;
div.style.left = `${scaleX * box.left + left}px`;
div.style.width = `${scaleX * box.width}px`;
div.style.height = `${scaleY * box.height}px`;
img.before(div);
});
} catch(e) {
console.error(e);
}
});
Bạn sẽ nhận thấy có một số thông báo DOMException và không phải tất cả hình ảnh đều đang được xử lý. Lý do là vì các hình ảnh phía trên nếp gấp được chèn dưới dạng URI dữ liệu và do đó có thể truy cập được, trong khi các hình ảnh phía dưới nếp gấp đến từ một miền khác không được định cấu hình để hỗ trợ CORS. Để minh hoạ, chúng ta không cần lo lắng về điều này.
Phát hiện điểm đánh dấu trên khuôn mặt
Ngoài khuôn mặt, macOS cũng hỗ trợ việc phát hiện các điểm trên khuôn mặt. Để kiểm thử việc phát hiện các điểm đánh dấu trên khuôn mặt, hãy dán đoạn mã sau vào Bảng điều khiển. Lưu ý: danh sách các địa điểm đánh dấu không hoàn hảo do crbug.com/914348, nhưng bạn có thể thấy được mục đích và mức độ hiệu quả của tính năng này.
document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
try {
const faces = await new FaceDetector().detect(img);
faces.forEach(face => {
const div = document.createElement('div');
const box = face.boundingBox;
const computedStyle = getComputedStyle(img);
const [top, right, bottom, left] = [
computedStyle.marginTop,
computedStyle.marginRight,
computedStyle.marginBottom,
computedStyle.marginLeft
].map(m => parseInt(m, 10));
const scaleX = img.width / img.naturalWidth;
const scaleY = img.height / img.naturalHeight;
div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
div.style.position = 'absolute';
div.style.top = `${scaleY * box.top + top}px`;
div.style.left = `${scaleX * box.left + left}px`;
div.style.width = `${scaleX * box.width}px`;
div.style.height = `${scaleY * box.height}px`;
img.before(div);
const landmarkSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
landmarkSVG.style.position = 'absolute';
landmarkSVG.classList.add('landmarks');
landmarkSVG.setAttribute('viewBox', `0 0 ${img.width} ${img.height}`);
landmarkSVG.style.width = `${img.width}px`;
landmarkSVG.style.height = `${img.height}px`;
face.landmarks.map((landmark) => {
landmarkSVG.innerHTML += `<polygon class="landmark-${landmark.type}" points="${
landmark.locations.map((point) => {
return `${scaleX * point.x},${scaleY * point.y} `;
}).join(' ')
}" /></svg>`;
});
div.before(landmarkSVG);
});
} catch(e) {
console.error(e);
}
});
Phát hiện mã vạch
Tính năng thứ hai của Shape Detection API là phát hiện mã vạch. Tương tự như trước đây, chúng ta cần một trang có mã vạch, chẳng hạn như trang này. Khi mở tệp này trong trình duyệt, bạn sẽ thấy các mã QR đã được giải mã. Tái tạo hoặc chỉnh sửa dự án Glitch, đặc biệt là tệp script.js để xem cách thực hiện.
Nếu muốn tìm nội dung linh hoạt hơn, bạn có thể sử dụng lại tính năng Tìm kiếm bằng hình ảnh của Google. Lần này, trong trình duyệt, hãy chuyển đến trang kết quả tìm kiếm trên Google ở thẻ riêng tư hoặc ở chế độ khách. Bây giờ, hãy dán đoạn mã bên dưới vào thẻ Bảng điều khiển của Chrome DevTools. Sau một khoảng thời gian ngắn, các mã vạch được nhận dạng sẽ được chú thích bằng giá trị thô và loại mã vạch.
document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
try {
const barcodes = await new BarcodeDetector().detect(img);
barcodes.forEach(barcode => {
const div = document.createElement('div');
const box = barcode.boundingBox;
const computedStyle = getComputedStyle(img);
const [top, right, bottom, left] = [
computedStyle.marginTop,
computedStyle.marginRight,
computedStyle.marginBottom,
computedStyle.marginLeft
].map(m => parseInt(m, 10));
const scaleX = img.width / img.naturalWidth;
const scaleY = img.height / img.naturalHeight;
div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
div.style.position = 'absolute';
div.style.top = `${scaleY * box.top + top}px`;
div.style.left = `${scaleX * box.left - left}px`;
div.style.width = `${scaleX * box.width}px`;
div.style.height = `${scaleY * box.height}px`;
div.style.color = 'black';
div.style.fontSize = '14px';
div.textContent = `${barcode.rawValue}`;
img.before(div);
});
} catch(e) {
console.error(e);
}
});
Phát hiện văn bản
Tính năng cuối cùng của API Phát hiện hình dạng là phát hiện văn bản. Đến đây, bạn đã biết cách thực hiện: Chúng ta cần một trang có hình ảnh chứa văn bản, chẳng hạn như trang này có kết quả quét của Google Sách. Trên các trình duyệt được hỗ trợ, bạn sẽ thấy văn bản được nhận dạng và một khung hình chữ nhật được vẽ xung quanh các đoạn văn bản. Tái tạo hoặc chỉnh sửa dự án Glitch, đặc biệt là tệp script.js để xem cách thực hiện.
Để kiểm tra điều này một cách linh hoạt, hãy truy cập vào trang Kết quả tìm kiếm này trong một thẻ riêng tư hoặc ở chế độ khách. Bây giờ, hãy dán đoạn mã bên dưới vào thẻ Bảng điều khiển của Chrome DevTools. Sau một thời gian chờ đợi, một số văn bản sẽ được nhận dạng.
document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
try {
const texts = await new TextDetector().detect(img);
texts.forEach(text => {
const div = document.createElement('div');
const box = text.boundingBox;
const computedStyle = getComputedStyle(img);
const [top, right, bottom, left] = [
computedStyle.marginTop,
computedStyle.marginRight,
computedStyle.marginBottom,
computedStyle.marginLeft
].map(m => parseInt(m, 10));
const scaleX = img.width / img.naturalWidth;
const scaleY = img.height / img.naturalHeight;
div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
div.style.position = 'absolute';
div.style.top = `${scaleY * box.top + top}px`;
div.style.left = `${scaleX * box.left - left}px`;
div.style.width = `${scaleX * box.width}px`;
div.style.height = `${scaleY * box.height}px`;
div.style.color = 'black';
div.style.fontSize = '14px';
div.innerHTML = text.rawValue;
img.before(div);
});
} catch(e) {
console.error(e);
}
});
Phản hồi
Bạn nghĩ sao về API này? Vui lòng giúp chúng tôi bằng cách trả lời ngắn gọn bài khảo sát này:
API này có dễ sử dụng không?
Bạn có chạy được ví dụ không?
Bạn có muốn chia sẻ thêm không? Có tính năng nào bị thiếu không? Vui lòng đưa ra ý kiến phản hồi nhanh chóng trong bản khảo sát này. Cảm ơn bạn!
5. API Mục tiêu chia sẻ web
Web Share Target API cho phép các ứng dụng web đã cài đặt đăng ký với hệ điều hành cơ bản dưới dạng mục tiêu chia sẻ để nhận nội dung được chia sẻ từ Web Share API hoặc các sự kiện hệ thống, chẳng hạn như nút chia sẻ ở cấp hệ điều hành.
Cài đặt một ứng dụng web tiến bộ (PWA) để chia sẻ
Bước đầu tiên, bạn cần có một PWA mà bạn có thể chia sẻ. Lần này, Airhorner (may mắn) sẽ không làm được việc này, nhưng ứng dụng minh hoạ Web Share Target sẽ giúp bạn. Cài đặt ứng dụng vào màn hình chính của thiết bị.
Chia sẻ nội dung với ứng dụng PWA
Tiếp theo, bạn cần có nội dung để chia sẻ, chẳng hạn như một bức ảnh trên Google Photos. Sử dụng nút Chia sẻ và chọn PWA của Sổ lưu niệm làm đích đến chia sẻ.
Khi nhấn vào biểu tượng ứng dụng, bạn sẽ được chuyển thẳng đến PWA của Sổ lưu niệm và bức ảnh sẽ xuất hiện ngay tại đó.
Vậy quy trình này diễn ra như thế nào? Để tìm hiểu, hãy khám phá tệp kê khai ứng dụng web của PWA Sổ tay. Cấu hình để API Web Share Target hoạt động nằm trong thuộc tính "share_target" của tệp kê khai. Trong đó, trường "action" trỏ đến một URL được trang trí bằng các tham số như trong "params".
Sau đó, bên chia sẻ sẽ điền vào mẫu URL này cho phù hợp (có thể thông qua thao tác chia sẻ hoặc được nhà phát triển kiểm soát theo phương thức lập trình bằng Web Share API), để bên nhận có thể trích xuất các thông số và làm gì đó với các thông số đó, chẳng hạn như hiển thị.
{
"action": "/_share-target",
"enctype": "multipart/form-data",
"method": "POST",
"params": {
"files": [{
"name": "media",
"accept": ["audio/*", "image/*", "video/*"]
}]
}
}
Phản hồi
Bạn nghĩ sao về API này? Vui lòng giúp chúng tôi bằng cách trả lời ngắn gọn bài khảo sát này:
API này có dễ sử dụng không?
Bạn có chạy được ví dụ không?
Bạn có muốn chia sẻ thêm không? Có tính năng nào bị thiếu không? Vui lòng đưa ra ý kiến phản hồi nhanh chóng trong bản khảo sát này. Cảm ơn bạn!
6. Wake Lock API
Để tránh tiêu hao pin, hầu hết các thiết bị đều nhanh chóng chuyển sang chế độ ngủ khi không hoạt động. Mặc dù điều này thường không có vấn đề gì, nhưng một số ứng dụng cần giữ cho màn hình hoặc thiết bị ở trạng thái hoạt động để hoàn thành công việc. Wake Lock API cung cấp một cách để ngăn thiết bị giảm độ sáng và khoá màn hình hoặc ngăn thiết bị chuyển sang chế độ ngủ. Khả năng này cho phép tạo ra những trải nghiệm mới mà trước đây chỉ có thể thực hiện được bằng ứng dụng gốc.
Thiết lập trình bảo vệ màn hình
Để kiểm thử Wake Lock API, trước tiên, bạn phải đảm bảo rằng thiết bị của mình sẽ chuyển sang chế độ ngủ. Do đó, trong ngăn tuỳ chọn của hệ điều hành, hãy kích hoạt trình bảo vệ màn hình mà bạn chọn và đảm bảo rằng trình bảo vệ màn hình đó bắt đầu sau 1 phút. Hãy đảm bảo rằng cách này có hiệu quả bằng cách để thiết bị ở chế độ chờ trong đúng khoảng thời gian đó (tôi biết là việc này khá khó chịu). Ảnh chụp màn hình bên dưới cho thấy macOS, nhưng tất nhiên bạn có thể thử cách này trên thiết bị Android di động hoặc bất kỳ nền tảng máy tính nào được hỗ trợ.
Đặt khoá chế độ thức màn hình
Bây giờ, bạn đã biết rằng trình bảo vệ màn hình đang hoạt động, bạn sẽ sử dụng một khoá chế độ thức thuộc loại "screen" để ngăn trình bảo vệ màn hình thực hiện công việc của nó. Chuyển đến ứng dụng minh họa Khoá chế độ thức rồi nhấp vào Activate (Kích hoạt)
screen Hộp đánh dấu Wake Lock (Khoá chế độ thức).
Kể từ thời điểm đó, khoá chế độ thức sẽ hoạt động. Nếu đủ kiên nhẫn để không chạm vào thiết bị trong một phút, bạn sẽ thấy rằng trình bảo vệ màn hình thực sự không khởi động.
Vậy tính năng này hoạt động như thế nào? Để tìm hiểu, hãy truy cập vào dự án Glitch cho ứng dụng minh họa Wake Lock và xem script.js. Nội dung chính của mã nằm trong đoạn mã bên dưới. Mở một thẻ mới (hoặc sử dụng bất kỳ thẻ nào bạn đang mở) rồi dán mã bên dưới vào bảng điều khiển Công cụ cho nhà phát triển Chrome. Khi nhấp vào cửa sổ, bạn sẽ thấy một khoá chế độ thức hoạt động trong đúng 10 giây (xem nhật ký bảng điều khiển) và trình bảo vệ màn hình sẽ không khởi động.
if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {
let wakeLock = null;
const requestWakeLock = async () => {
try {
wakeLock = await navigator.wakeLock.request('screen');
wakeLock.addEventListener('release', () => {
console.log('Wake Lock was released');
});
console.log('Wake Lock is active');
} catch (e) {
console.error(`${e.name}, ${e.message}`);
}
};
requestWakeLock();
window.setTimeout(() => {
wakeLock.release();
}, 10 * 1000);
}
Phản hồi
Bạn nghĩ sao về API này? Vui lòng giúp chúng tôi bằng cách trả lời ngắn gọn bài khảo sát này:
API này có dễ sử dụng không?
Bạn có chạy được ví dụ không?
Bạn có muốn chia sẻ thêm không? Có tính năng nào bị thiếu không? Vui lòng đưa ra ý kiến phản hồi nhanh chóng trong bản khảo sát này. Cảm ơn bạn!
7. API Bộ chọn danh bạ
Một API mà chúng tôi rất hào hứng là Trình chọn người liên hệ API. API này cho phép một ứng dụng web truy cập vào danh bạ trong trình quản lý danh bạ gốc của thiết bị, nhờ đó ứng dụng web của bạn có thể truy cập vào tên, địa chỉ email và số điện thoại của người liên hệ. Bạn có thể chỉ định xem bạn muốn chỉ một hay nhiều người liên hệ và bạn muốn tất cả các trường hay chỉ một số tên, địa chỉ email và số điện thoại.
Những điều cần lưu ý về quyền riêng tư
Sau khi bộ chọn mở ra, bạn có thể chọn những người liên hệ mà bạn muốn chia sẻ. Bạn sẽ thấy rằng không có lựa chọn "chọn tất cả". Đây là điều có chủ ý vì chúng tôi muốn bạn đưa ra quyết định chia sẻ một cách có ý thức. Tương tự, quyền truy cập không phải là quyền truy cập liên tục mà là quyết định cấp quyền một lần.
Truy cập vào danh bạ
Việc truy cập vào danh bạ là một việc đơn giản. Trước khi bộ chọn mở ra, bạn có thể chỉ định những trường bạn muốn (các lựa chọn là name, email và telephone) và liệu bạn muốn truy cập vào nhiều hay chỉ một người liên hệ. Bạn có thể kiểm thử API này trên thiết bị Android bằng cách mở ứng dụng minh hoạ. Phần có liên quan của mã nguồn về cơ bản là đoạn mã bên dưới:
getContactsButton.addEventListener('click', async () => {
const contacts = await navigator.contacts.select(
['name', 'email'],
{multiple: true});
if (!contacts.length) {
// No contacts were selected, or picker couldn't be opened.
return;
}
console.log(contacts);
});
8. API Bảng nhớ tạm không đồng bộ
Sao chép và dán văn bản
Cho đến nay, chưa có cách nào để sao chép và dán hình ảnh vào bảng nhớ tạm của hệ thống theo phương thức lập trình. Gần đây, chúng tôi đã thêm tính năng hỗ trợ hình ảnh vào Async Clipboard API,
nhờ đó giờ đây bạn có thể sao chép và dán hình ảnh. Điểm mới là bạn cũng có thể ghi hình ảnh vào bảng nhớ tạm. API bảng nhớ tạm không đồng bộ đã hỗ trợ việc sao chép và dán văn bản trong một thời gian. Bạn có thể sao chép văn bản vào bảng nhớ tạm bằng cách gọi navigator.clipboard.writeText() rồi sau đó dán văn bản đó bằng cách gọi navigator.clipboard.readText().
Sao chép và dán hình ảnh
Giờ đây, bạn cũng có thể ghi hình ảnh vào bảng nhớ tạm. Để làm việc này, bạn cần có dữ liệu hình ảnh dưới dạng một blob mà sau đó bạn sẽ truyền đến hàm khởi tạo mục trong bảng nhớ tạm. Cuối cùng, bạn có thể sao chép mục này vào bảng nhớ tạm bằng cách gọi navigator.clipboard.write().
// Copy: Writing image to the clipboard
try {
const imgURL = 'https://developers.google.com/web/updates/images/generic/file.png';
const data = await fetch(imgURL);
const blob = await data.blob();
await navigator.clipboard.write([
new ClipboardItem(Object.defineProperty({}, blob.type, {
value: blob,
enumerable: true
}))
]);
console.log('Image copied.');
} catch(e) {
console.error(e, e.message);
}
Việc dán hình ảnh trở lại từ bảng nhớ tạm có vẻ khá phức tạp, nhưng thực ra chỉ bao gồm việc lấy lại blob từ mục trong bảng nhớ tạm. Vì có thể có nhiều đối tượng, bạn cần lặp lại các đối tượng đó cho đến khi tìm được đối tượng mà bạn quan tâm. Vì lý do bảo mật, hiện tại, tính năng này chỉ hỗ trợ hình ảnh PNG, nhưng có thể sẽ hỗ trợ nhiều định dạng hình ảnh khác trong tương lai.
async function getClipboardContents() {
try {
const clipboardItems = await navigator.clipboard.read();
for (const clipboardItem of clipboardItems) {
try {
for (const type of clipboardItem.types) {
const blob = await clipboardItem.getType(type);
console.log(URL.createObjectURL(blob));
}
} catch (e) {
console.error(e, e.message);
}
}
} catch (e) {
console.error(e, e.message);
}
}
Bạn có thể xem API này hoạt động trong một ứng dụng minh hoạ, các đoạn mã liên quan từ mã nguồn của ứng dụng này được nhúng ở trên. Bạn có thể sao chép hình ảnh vào bảng nhớ tạm mà không cần có quyền, nhưng bạn cần cấp quyền truy cập để dán từ bảng nhớ tạm.
Sau khi cấp quyền truy cập, bạn có thể đọc hình ảnh từ bảng nhớ tạm và dán vào ứng dụng:
9. Thật tuyệt vời!
Xin chúc mừng, bạn đã đến phần cuối của lớp học lập trình này. Xin nhắc lại rằng hầu hết các API vẫn đang trong quá trình thay đổi và được tích cực xử lý. Do đó, nhóm rất trân trọng ý kiến phản hồi của bạn, vì chỉ có sự tương tác với những người như bạn mới giúp chúng tôi hoàn thiện các API này.
Bạn cũng nên thường xuyên xem trang đích về Các chức năng của chúng tôi. Chúng tôi sẽ cập nhật tài liệu này thường xuyên và tài liệu này có các con trỏ đến tất cả các bài viết chuyên sâu về những API mà chúng tôi đang phát triển. Hãy tiếp tục phát huy nhé!
Tom và toàn bộ Nhóm Năng lực 🐡