1. Giới thiệu và thiết lập
Các chức năng của web
Chúng tôi muốn thu hẹp khoảng cách về chức năng giữa web và quảng cáo gốc, đồng thời giúp nhà phát triển dễ dàng xây dựng những trải nghiệm chất lượng cao trên môi trường web mở. Chúng tôi thực sự tin rằng mọi nhà phát triển đều phải có quyền truy cập vào những tính năng cần thiết để tạo ra trải nghiệm web tuyệt vời. Và chúng tôi cam kết xây dựng một môi trường web hiệu quả hơn.
Tuy nhiên, có một số chức năng (như truy cập vào hệ thống tệp và phát hiện trạng thái rảnh) có sẵn cho ứng dụng gốc nhưng không có trên web. Những chức năng bị thiếu này khiến một số loại ứng dụng không thể phân phối trên web hoặc kém hữu ích hơn.
Chúng tôi sẽ thiết kế và phát triển các tính năng mới này theo cách mở và minh bạch, sử dụng các quy trình tiêu chuẩn nền tảng web mở hiện có, đồng thời nhận phản hồi sớm từ các nhà phát triển và các nhà cung cấp trình duyệt khác trong quá trình chúng tôi 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 lá 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à trường hợp sử dụng mà các API này mở khoá, thay vì 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. Lưu ý rằng các cơ chế này chưa rõ ràng 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 của nhà phát triển.
Bạn cần có
Vì các API được giới thiệu trong lớp học lập trình này thực sự mới nhất, nên yêu cầu đối với từng API sẽ khác nhau. Vui lòng đảm bảo đọ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
Lớp học lập trình này không nhất thiết phải hoạt động theo tuần tự. Mỗi phần đại diện cho một API độc lập, vì vậy, hãy thoải mái lựa chọn nội dung bạn quan tâm nhất.
2. API Gán huy hiệu
Mục tiêu của API Huy hiệu là đem lại cho người dùng chú ý đến những điều diễn ra trong nền. Để đơn giản hoá bản minh hoạ trong lớp học lập trình này, hãy sử dụng API để đưa người dùng chú ý đến điều gì đó đang diễn ra ở nền trước. Sau đó, bạn có thể chuyển tâm trí sang những điều xảy ra trong nền.
Cài đặt Airhorner
Để API này hoạt động, bạn cần có một ứng dụng web tiến bộ (PWA) được cài đặt trên màn hình chính, vì vậy, bước đầu tiên là cài đặt PWA, chẳng hạn như airhorner.com khét tiếng và nổi tiếng thế giới. Nhấn 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.
Một lời nhắc xác nhận sẽ xuất hiện, hãy nhấp vào Cài đặt.
Giờ đây, bạn đã có một biểu tượng mới trên thanh dock của hệ điều hành. Nhấp vào biểu tượng đó để mở PWA. Lớp 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 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 đơn giản mà bạn có thể ghi nhận trong The Airhorner là số lần chương trình được cắm còithở dài. Trên thực tế, với ứng dụng Airhorner đã cài đặt, hãy thử còi hú và kiểm tra huy hiệu. Bộ điều khiển sẽ đếm một lần bất cứ khi nào bạn bấm chuông.
Vậy tính năng này hoạt động như thế nào? Về cơ bản, mã này như sau:
let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
navigator.setExperimentalAppBadge(++hornCounter);
});
Phát chuông báo động vài lần rồi kiểm tra biểu tượng của PWA: ứng dụng sẽ cập nhật mỗi lần. duy nhất. bất cứ lúc nào. tiếng còi hơi. Chỉ đơn giản vậy thôi.
Xoá huy hiệu
Bộ đếm tăng lên đến 99 rồi bắt đầu lại. 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ông cụ cho nhà phát triển, dán dòng bên dưới 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. Bây giờ, biểu tượng của PWA sẽ trông lại như 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 trả lời bản khảo sát này:
API này có trực quan để sử dụng không?
Bạn đã lấy ví dụ để chạy chưa?
Bạn có muốn phản hồi thêm không? Có bị thiếu tính năng không? Vui lòng chia sẻ ý kiến phản hồi nhanh chóng qua bài khảo sát này. Xin cảm ơn!
3. API hệ thống tệp gốc
API Hệ thống tệp gốc cho phép nhà phát triển xây dựng 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 vào ứng dụng web, API này sẽ cho phép các ứng dụng web đọc hoặc lưu trực tiếp các thay đổi đối với tệp và thư mục trên thiết bị của người dùng.
Đọc tệp
Câu lệnh "Hello, world" (Xin chào mọi người) của Native File System API là để đọc một tệp cục bộ và nhận nội dung tệp. Tạo một tệp .txt thuần tuý rồi nhập văn bản. Tiếp theo, hãy chuyển đến trang web bảo mật bất kỳ (tức là trang web được phân phát qua HTTPS), chẳng hạn 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ì API Hệ thống tệp gốc yêu cầu một cử chỉ của người dùng nên chúng tôi đí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 tên người dùng tệp, vì vậy chúng ta chỉ cần thiết lập tên này thành biến toàn cục.
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 một vị trí bất kỳ trên 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 làm cho body có thể chỉnh sửa được bằng cách dán vào đoạn mã dưới đây. 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 các thay đổi này trở lại tệp gốc. Do đó, chúng ta cần một trình ghi trên tên người dùng tệp. Chúng ta có thể có được tác giả này bằng cách dán đoạn mã dưới đây 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 chờ 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();
};
Bây giờ, khi bạn nhấp vào (không phải 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 nội dung 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 quá trình này bằng cách nhấp đúp lại vào tài liệu rồi 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 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 trả lời bản khảo sát này:
API này có trực quan để sử dụng không?
Bạn đã lấy ví dụ để chạy chưa?
Bạn có muốn phản hồi thêm không? Có bị thiếu tính năng không? Vui lòng chia sẻ ý kiến phản hồi nhanh chóng qua bài khảo sát này. Xin cảm ơn!
4. API Phát hiện hình dạng
API Phát hiện hình dạng cung cấp quyền truy cập vào trình phát hiện hình dạng tăng tốc (ví dụ: đối với 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 ảnh động. Các hệ điều hành có các trình phát hiện tính năng hoạt động hiệu quả 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 sẽ mở ra những cách 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 hấp dẫn của API Phát hiện hình dạng là phát hiện khuôn mặt. Để thử nghiệm, chúng tôi cần một trang có cá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ẽ giống như trong ảnh chụp màn hình dưới đây. Trên trình duyệt được hỗ trợ, hộp ranh giới của khuôn mặt và các mốc của khuôn mặt sẽ được nhận dạng.
Bạn có thể thấy việc cần rất ít mã để thực hiện điều này bằng cách phối lại hoặc chỉnh sửa dự án trục trặc, đặc biệt là tệp script.js.
Nếu bạn muốn hoàn toàn động chứ không chỉ làm việc với khuôn mặt của tác giả thì hãy truy cập trang kết quả tìm kiếm trên Google có nhiều khuôn mặt này trong thẻ riêng tư hoặc ở chế độ khách. Bây giờ, 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ỳ, sau đó nhấp vào Kiểm tra. Tiếp theo, trên thẻ Console, hãy dán đoạn mã bên dưới. Mã này sẽ đánh dấu các khuôn mặt được phát hiện bằng 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ẽ lưu ý rằng có một số tin nhắn DOMException và không phải hình ảnh nào cũng đang được xử lý. Điều này là do hình ảnh trong màn hình đầu tiên được cùng dòng dưới dạng URI dữ liệu nên có thể truy cập được, trong khi hình ảnh dưới màn hình đầu tiên đến từ một miền khác chưa được định cấu hình để hỗ trợ CORS. Để minh hoạ, chúng ta không cần phải lo lắng về vấn đề này.
Phát hiện điểm mốc khuôn mặt
Ngoài tính năng chỉ khuôn mặt, macOS còn hỗ trợ phát hiện điểm mốc khuôn mặt. Để thử nghiệm tính năng phát hiện các điểm mốc khuôn mặt, hãy dán đoạn mã sau vào Console. Lời nhắc: danh sách các địa danh không hoàn hảo do crbug.com/914348, nhưng bạn có thể thấy hướng đi của vấn đề và tính năng này mạnh mẽ như thế nào.
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 API Phát hiện hình dạng là phát hiện mã vạch. Tương tự như trước đây, chúng tôi cần một trang có mã vạch, chẳng hạn như trang này. Khi mở mã QR trong trình duyệt, bạn sẽ thấy nhiều mã QR đã được giải mã. Phối lại hoặc chỉnh sửa dự án trục trặc, đặc biệt là tệp script.js để xem cách thực hiện.
Nếu bạn muốn nội dung linh hoạt hơn, chúng ta có thể tiếp tục sử dụng tính năng Tìm kiếm hình ảnh của Google. Lần này, trên trình duyệt, hãy chuyển đến trang kết quả này trên Google Tìm kiếm trong 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ông cụ của Chrome cho nhà phát triển. Sau giây lát, các mã vạch đã nhận dạng được 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. Bây giờ bạn đã biết sơ bộ: Chúng tôi cần một trang có hình ảnh có chứa văn bản, chẳng hạn như trang này kèm theo 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 hộp giới hạn được vẽ xung quanh các đoạn văn bản. Bạn có thể phối lại hoặc chỉnh sửa dự án trục trặc, đặc biệt là tệp script.js để xem cách thực hiện.
Để thử nghiệm linh hoạt việc này, hãy truy cập Trang kết quả tìm kiếm trong 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ông cụ của Chrome cho nhà phát triển. Bạn chỉ cần đợi một chút, hệ thống sẽ nhận ra một số văn bản.
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 trả lời bản khảo sát này:
API này có trực quan để sử dụng không?
Bạn đã lấy ví dụ để chạy chưa?
Bạn có muốn phản hồi thêm không? Có bị thiếu tính năng không? Vui lòng chia sẻ ý kiến phản hồi nhanh chóng qua bài khảo sát này. Xin cảm ơn!
5. API Mục tiêu chia sẻ web
API mục tiêu chia sẻ web 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 chia sẻ từ API Chia sẻ web hoặc sự kiện của hệ thống, chẳng hạn như nút chia sẻ ở cấp hệ điều hành.
Cài đặt PWA để chia sẻ với
Bước đầu tiên, bạn cần có một ứng dụng web tiến bộ (PWA) mà bạn có thể chia sẻ. Lần này, Airhorner (rất may) sẽ không thực hiện được công việc, nhưng ứng dụng minh hoạ Web Share Target sẽ hỗ trợ 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 PWA
Tiếp theo, bạn cần nội dung nào đó để chia sẻ, chẳng hạn như ảnh trên Google Photos. Sử dụng nút Chia sẻ và chọn PWA Sổ tay làm mục tiêu chia sẻ.
Khi nhấn vào biểu tượng ứng dụng, bạn sẽ truy cập ngay vào PWA Sổ lưu trữ và ảnh sẽ xuất hiện ở đó.
Vậy tính năng này hoạt động 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 mục tiêu chia sẻ web hoạt động nằm trong thuộc tính "share_target" của tệp kê khai. Trường "action" trỏ đến một URL được trang trí bằng các tham số như liệt kê trong "params".
Sau đó, bên chia sẻ sẽ điền mẫu URL này sao cho phù hợp (được hỗ trợ 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). Nhờ đó, bên nhận có thể trích xuất các tham số và làm gì đó với các tham số đó, chẳng hạn như hiển thị các tham số đó.
{
"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 trả lời bản khảo sát này:
API này có trực quan để sử dụng không?
Bạn đã lấy ví dụ để chạy chưa?
Bạn có muốn phản hồi thêm không? Có bị thiếu tính năng không? Vui lòng chia sẻ ý kiến phản hồi nhanh chóng qua bài khảo sát này. Xin cảm ơn!
6. API Khoá chế độ thức
Để tránh làm 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ù việc này trong hầu hết trường hợp là bình thường, nhưng một số ứng dụng cần giữ màn hình hoặc thiết bị ở chế độ bật để hoàn thành công việc. API Khoá chế độ thức cung cấp một cách ngăn thiết bị làm mờ và khoá màn hình hoặc ngăn thiết bị chuyển sang chế độ ngủ. Khả năng này mang lại các trải nghiệm mới mà cho đến nay yêu cầu phải có ứng dụng gốc.
Thiết lập trình bảo vệ màn hình
Để kiểm thử API Khoá chế độ thức, trước tiên, bạn phải đảm bảo rằng thiết bị 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 mộ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 đó khởi động sau 1 phút. Hãy đảm bảo rằng thiết bị vẫn hoạt động bằng cách để thiết bị của bạn không có gì độc lập trong khoảng thời gian đó (vâng, tôi biết, nó rất đau). Ảnh chụp màn hình bên dưới cho thấy macOS, nhưng bạn tất nhiên có thể dùng thử 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 phương thức khoá chế độ thức màn hình
Giờ thì 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 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 hoạ về chế độ Wake Lock rồi nhấp vào Kích hoạt
screen Hộp đánh dấu Khoá chế độ thức.
Kể từ thời điểm đó, tính năng khoá chế độ thức sẽ hoạt động. Nếu bạn đủ kiên nhẫn để để thiết bị của mình không chạm trong một phút, bạn sẽ thấy trình bảo vệ màn hình thực sự chưa khởi động.
Tính năng này hoạt động như thế nào? Để tìm hiểu, hãy chuyển đến Dự án trục trặc cho ứng dụng minh hoạ Wake Lock và xem script.js. Nội dung chính của mã nằm trong đoạn mã dưới đây. Mở thẻ mới (hoặc sử dụng thẻ bất kỳ mà bạn mở) và 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 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 trả lời bản khảo sát này:
API này có trực quan để sử dụng không?
Bạn đã lấy ví dụ để chạy chưa?
Bạn có muốn phản hồi thêm không? Có bị thiếu tính năng không? Vui lòng chia sẻ ý kiến phản hồi nhanh chóng qua bài khảo sát này. Xin cảm ơn!
7. API Bộ chọn danh bạ
Một API mà chúng tôi rất hào hứng là API Bộ chọn địa chỉ liên hệ. Chế độ này cho phép một ứng dụng web truy cập vào danh bạ từ trình quản lý danh bạ gốc của thiết bị, nhờ đó, ứng dụng web sẽ có quyền truy cập vào danh bạ của bạn tên, địa chỉ email và số điện thoại. Bạn có thể chỉ định xem bạn chỉ muốn một hay nhiều địa chỉ liên hệ và liệu bạn muốn tất cả các trường hay chỉ muốn một tập hợp con gồm tên, địa chỉ email và số điện thoại.
Những điều cần cân nhắc 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à mình muốn chia sẻ. Bạn sẽ lưu ý rằng không có tuỳ chọn "chọn tất cả" lựa chọn có chủ ý: chúng tôi muốn việc chia sẻ là một quyết định có chủ ý. Tương tự, quyền truy cập không phải là liên tục mà là quyết định một lần.
Truy cập danh bạ
Truy cập vào danh bạ là một nhiệm vụ đơn giản. Trước khi bộ chọn mở ra, bạn có thể chỉ định những trường mình muốn (các trường có các lựa chọn là name, email và telephone) và bạn muốn truy cập vào nhiều địa chỉ liên hệ hay chỉ truy cập vào một địa chỉ 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ã dưới đây:
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 theo phương thức lập trình vào bảng nhớ tạm của hệ thống. Gần đây, chúng tôi đã thêm tính năng hỗ trợ hình ảnh vào API Bảng nhớ tạm không đồng bộ,
để bây giờ bạn có thể sao chép và dán hình ảnh xung quanh. Đ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ợ 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(), 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 được việc này, bạn cần 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 trong 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 từ bảng nhớ tạm trông khá phức tạp, nhưng thực ra chỉ cần lấy lại blob từ mục trong bảng nhớ tạm. Vì có thể có nhiều thành phần nên bạn cần phải lặp lại theo vòng lặp cho đến khi tìm được thành phần mong muốn. Vì lý do bảo mật, hiện tại, chúng tôi chỉ hỗ trợ định dạng tệp PNG. Tuy nhiên, nhiều định dạng hình ảnh khác có thể được hỗ trợ 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 thực tế trong ứng dụng minh hoạ, các đoạn mã liên quan từ mã nguồn của API 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 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 rồi 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 thay đổi và đang tích cực xử lý. Do đó, nhóm chúng tôi rất trân trọng ý kiến phản hồi của bạn, vì chỉ việc tương tác với những người như bạn mới giúp chúng tôi cải thiện đúng những API này.
Bạn cũng nên thường xuyên theo dõi trang đích về các Chức năng của chúng tôi. Chúng tôi sẽ liên tục cập nhật những nội dung này và đề cập đến tất cả các bài viết chuyên sâu về các API mà chúng tôi đang xử lý. Tiếp tục chơi nào!
Tom và toàn bộ nhóm Khả năng 🐡