Khả năng của web
Chúng tôi muốn thu hẹp khoảng cách khả năng giữa web và gốc và giúp nhà phát triển dễ dàng tạo trải nghiệm tuyệt vời trên web mở. Chúng tôi thực sự tin rằng mọi nhà phát triển phải có quyền truy cập vào những khả năng cần thiết để tạo ra một trải nghiệm tuyệt vời trên web và chúng tôi cam kết xây dựng một môi trường web có nhiều tính năng hơn.
Tuy nhiên, có một số chức năng (như truy cập hệ thống tệp và phát hiện trạng thái rảnh) mà bạn có thể sử dụng nhưng không dùng được trên web. Những khả năng bị thiếu 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 các chức 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ó trong khi nhận phản hồi sớm từ 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ó thể 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ẽ trải nghiệm với một số API web hoàn toàn mới hoặc chỉ dùng được sau khi gắn 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à trong các trường hợp sử dụng mà các API này mở khóa, 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 cho bạn cơ chế cơ bản của một số API tiên tiến. Lưu ý rằng những cơ chế này chưa được thiết lập hoàn toàn và chúng tôi rất coi trọng phản hồi của bạn về luồng nhà phát triển.
Bạn cần có
Vì các API nổi bật trong lớp học lập trình này thực sự rất quan trọng, nên các yêu cầu đối với mỗi API sẽ khác nhau. Hãy 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
Lớp học lập trình không nhất thiết phải được làm việc theo tuần tự. Mỗi mục đại diện cho một API độc lập, vì vậy, vui lòng chọn quả anh đào mà bạn quan tâm nhất.
Mục tiêu của API Badging là thu hút người dùng; sự chú ý đến những điều xảy ra trong nền. Để đơn giản hóa bản minh họa trong lớp học lập trình này, hãy sử dụng API để giúp người dùng chú ý đến những điều đang diễn ra ở nền trước. Sau đó, bạn có thể chuyển ý tưởng sang những điều diễn ra trong nền.
Cài đặt Airhorner
Để API này hoạt động, bạn cần cài đặt PWA đến màn hình chính, vì vậy, trước tiên, bạn cần cài đặt PWA, chẳng hạn như airhorner.com nổi tiếng thế giới,. Hãy nhấn nút Install ở góc trên cùng bên phải hoặc dùng trình đơn ba chấm để cài đặt theo cách thủ công.
Thao tác này sẽ hiển thị lời nhắc xác nhận, nhấp vào Cài đặt.
Bạn hiện có một biểu tượng mới trong đế của hệ điều hành. Nhấp vào đó để chạy PWA. Ứng dụng sẽ có cửa sổ ứng dụng riêng và chạy ở chế độ độc lập.
|
|
Đặt huy hiệu
Sau khi cài đặt PWA, bạn cần có 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 trong The Air Horner là sigh, số lần nó bị cắm cờ. Thực ra, với ứng dụng Airhorner đã cài đặt, hãy thử kèn và kiểm tra huy hiệu. Tính năng này sẽ tăng lên bất cứ khi nào bạn gắn cờ.
Vậy tính năng này hoạt động như thế nào? Về cơ bản, mã là:
let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
navigator.setExperimentalAppBadge(++hornCounter);
});Phát âm thanh lớn vài lần và kiểm tra biểu tượng của PWA Chỉ dễ dàng như vậy.
Xóa huy hiệu
Bộ đếm sẽ tăng lên 99 và sau đó bắt đầu lại. Bạn cũng có thể đặt lại theo cách thủ công. Mở thẻ 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 xóa huy hiệu một cách rõ ràng như được hiển thị trong đoạn mã sau. Biểu tượng của PWA\39; giờ đây sẽ trông giống như lúc đầ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ản khảo sát này:
API này có trực quan không?
Bạn có xem ví dụ về cách chạy không?
Bạn muốn chia sẻ thêm? Thiếu tính năng phải không? Vui lòng cung cấp ý kiến phản hồi nhanh trong bản khảo sát này. Thank you!
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 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 ứng dụng web, API này cho phép ứ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
"Hello, world" của API Hệ thống tệp gốc là đọc tệp cục bộ và nhận nội dung tệp. Tạo một tệp .txt thuần túy và nhập một số văn bản. Tiếp theo, hãy chuyển đến trang web bảo mật nào (tức là 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ã dưới đây vào bảng điều khiển. Vì API hệ thống tệp gốc yêu cầu thao tác của người dùng nên chúng tôi đính kèm trình xử lý nhấp đúp vào tài liệu. Sau này, chúng ta sẽ cần trình xử lý tệp, vì vậy, chúng ta sẽ đặt nó thành một 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 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 đây. 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 tôi muốn thực hiện một số thay đổi. Vì vậy, hãy để body có thể chỉnh sửa 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à trình chỉnh sửa văn bản.
document.body.contentEditable = true;
Bây giờ, chúng tôi muốn ghi lại những thay đổi này vào tệp gốc. Do đó, chúng ta cần có người viết để xử lý tệp mà chúng ta có thể lấy được bằng cách dán đoạn mã dưới đây vào bảng điều khiển. Xin nhắc lại, chúng tôi cần cử chỉ của người dùng, vì vậy, lần này chúng tôi 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();
};
Khi bạn nhấp vào (không nhấp đúp) vào tài liệu, lời nhắc quyền sẽ hiển thị. Khi bạn cấp quyền, nội dung của tệp sẽ là bất kỳ nội dung nào 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 quá 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 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ản khảo sát này:
API này có trực quan không?
Bạn có xem ví dụ về cách chạy không?
Bạn muốn chia sẻ thêm? Thiếu tính năng phải không? Vui lòng cung cấp ý kiến phản hồi nhanh trong bản khảo sát này. Thank you!
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ụ: cho khuôn mặt người) và hoạt động trên hình ảnh tĩnh và/hoặc nguồn cấp dữ liệu hình ảnh trực tiếp. Hệ điều hành có trình phát hiện tính năng hiệu suất và được tối ưu hóa 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 tập hợp 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 qua giao diện FaceDetector, phát hiện mã vạch 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 API Phát hiện hình dạng là phát hiện khuôn mặt. Để kiểm tra, 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. Nút đó sẽ trông giống như trong ảnh chụp màn hình bên dưới. 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 khuôn mặt sẽ được nhận dạng.
Bạn có thể thấy số lượng mã yêu cầu để thực hiện việc này bằng cách phối lại hoặc chỉnh sửa Dự án Gush (đặc biệt là tệp script.js).
Nếu bạn muốn sử dụng hoàn toàn động lực và không chỉ làm việc với khuôn mặt của tác giả, hãy truy cập trang kết quả của Google Tìm kiếm đầy đủ các khuôn mặt trong một thẻ riêng tư hoặc ở chế độ khách. Bây giờ trên trang đó, hãy mở Công cụ dành cho nhà phát triển Chrome bằng cách nhấp chuột phải vào một vị trí bất kỳ, sau đó 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. Mã này sẽ làm nổi bật những khuôn mặt được phát hiện bằng một hộp màu đỏ 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 rằng có một số đoạn chú thích DOMException và không phải tất cả hình ảnh đều đang được xử lý. Điều này là do các hình ảnh trong màn hình đầu tiên được sử dụng như một URI dữ liệu và có thể được truy cập, trong khi đó các hình ảnh dưới màn hình đầu tiên đến từ một miền khác không được định cấu hình để hỗ trợ CORS. Để minh họa, chúng tôi không cần phải lo lắng về việc này.
Phát hiện dấu mốc khuôn mặt
Ngoài tính năng khuôn mặt, macOS cũng hỗ trợ tính năng phát hiện các địa danh khuôn mặt. Để kiểm tra việc phát hiện các mốc khuôn mặt, hãy dán đoạn mã sau vào Bảng điều khiển. Lời nhắc: đội hình của các địa danh hoàn toàn không hoàn hảo vì crbug.com/914348, nhưng bạn có thể thấy vị trí này đang chuyển hướng và tính năng này có thể mạnh mẽ đến mức 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 ta cần một trang có mã vạch, chẳng hạn như trang này. Khi mở 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 Glass, đặc biệt là tệp script.js để xem hiệu suất của dự án.
Nếu bạn muốn linh hoạt hơn, chúng tôi có thể sử dụng lại Google Tìm kiếm hình ảnh. Lần này, trong trình duyệt của bạn, hãy chuyển đến trang kết quả của Google Tìm kiếm 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 cho nhà phát triển. Sau một thời gian ngắn, mã vạch được công nhận sẽ được chú thích với 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. Giờ đây, bạn đã biết thông tin chi tiết: Chúng tôi 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à hộp giới hạn được vẽ xung quanh đoạn văn bản. Phối lại hoặc chỉnh sửa Dự án Glass, đặc biệt là tệp script.js để xem hiệu suất của dự án.
Để thử nghiệm tính năng này, hãy chuyển đến 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 cho nhà phát triển. Một chú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ản khảo sát này:
API này có trực quan không?
Bạn có xem ví dụ về cách chạy không?
Bạn muốn chia sẻ thêm? Thiếu tính năng phải không? Vui lòng cung cấp ý kiến phản hồi nhanh trong bản khảo sát này. Thank you!
API mục tiêu chia sẻ trên web cho phép các ứng dụng web đã cài đặt đăng ký hệ điều hành cơ bản làm mục tiêu chia sẻ để nhận nội dung được chia sẻ từ API chia sẻ web hoặc cá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ẻ
Bước đầu tiên, bạn cần có PWA để có thể chia sẻ. Lần này, Airhorner (may mắn) sẽ không thực hiện được việc này, nhưng ứng dụng minh họa Web Target Target đã hỗ trợ bạn. Cài đặt ứng dụng lên 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 có nội dung để chia sẻ, chẳng hạn như ảnh trên Google Photos. Dùng nút Chia sẻ và chọn PWA của sổ lưu niệm làm mục tiêu 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à ả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 Sổ tay trong PWA. Cấu hình để làm cho 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, trong trường "action" của nó trỏ đến một URL được trang trí bằng các thông số như liệt kê trong "params".
Sau đó, phía chia sẻ sẽ điền mẫu URL này một cách tương ứng (được hỗ trợ thông qua hành động 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 API Chia sẻ web). Sau đó, bên nhận có thể trích xuất các thông số và thực hiện hành động với chúng, chẳng hạn như hiển thị các thông 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 bản khảo sát này:
API này có trực quan không?
Bạn có xem ví dụ về cách chạy không?
Bạn muốn chia sẻ thêm? Thiếu tính năng phải không? Vui lòng cung cấp ý kiến phản hồi nhanh trong bản khảo sát này. Thank you!
Để tránh làm tiêu hao pin, hầu hết thiết bị nhanh chóng chuyển sang chế độ ngủ khi không hoạt động. Trong hầu hết các trường hợp, thường thì bạn cần giữ màn hình hoặc thiết bị ở trạng thái hoạt động để hoàn tất công việc. API Wake Lock mang đến cho bạn cách ngăn thiết bị giảm độ sáng và khóa màn hình, cũng như ngăn thiết bị chuyển sang chế độ ngủ. Khả năng này cho phép các trải nghiệm mới mà trước đây vẫn cần có một ứng dụng gốc.
Thiết lập trình bảo vệ màn hình
Để thử nghiệm API Wake Lock, 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 tùy 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ệ này bắt đầu sau 1 phút. Hãy đảm bảo rằng tính năng này hoạt động bằng cách để thiết bị của bạn ở một nơi chính xác trong thời gian đó (Ôi, tôi biết rồi, nó bị đau). Ảnh chụp màn hình bên dưới hiển thị macOS, nhưng tất nhiên, bạn có thể thử xem trên thiết bị Android di động hay bất kỳ nền tảng máy tính nào được hỗ trợ.
Đặt phương thức khóa 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 khóa chế độ thức loại "screen" để ngăn trình bảo vệ màn hình thực hiện công việc. Chuyển đến ứng dụng Demo Lock và nhấp vào hộp đánh dấu Kích hoạt screen Wake Lock.
Kể từ khoảnh khắc đó, tính năng khóa chế độ thức sẽ hoạt động. Nếu bạn kiên nhẫn đến mức được giữ nguyên thiết bị cho một phút, thì bây giờ bạn sẽ thấy trình bảo vệ màn hình thực sự không khởi động.
Vậy quy trình này hoạt động như thế nào? Để tìm hiểu, hãy truy cập vào dự án Groding cho ứng dụng Demo Wake Lock và xem script.js. Nội dung chính của mã có trong đoạn mã dưới đây. Mở một thẻ mới (hoặc dùng thẻ nào bạn đang 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 khóa chế độ thức đang hoạt động trong đúng 10 giây (xem nhật ký trong 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ản khảo sát này:
API này có trực quan không?
Bạn có xem ví dụ về cách chạy không?
Bạn muốn chia sẻ thêm? Thiếu tính năng phải không? Vui lòng cung cấp ý kiến phản hồi nhanh trong bản khảo sát này. Thank you!
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 ứng dụng web truy cập vào danh bạ của người quản lý danh bạ gốc của thiết bị. Nhờ đó, ứng dụng web 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 mình chỉ muốn một hoặc nhiều người liên hệ, cũng như chỉ muốn một số trường, tất cả các trường, đị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à bạn muốn chia sẻ. Bạn sẽ lưu ý rằng không có "select all" tùy chọn, là có chủ ý: chúng tôi muốn chia sẻ là một quyết định có ý thức. Tương tự như vậy, quyền truy cập không phải là liên tục mà chỉ là một quyết định một lần.
Truy cập vào 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 trường mình muốn (các tùy chọn là name, email và telephone) và liệu bạn muốn truy cập nhiều hay chỉ một địa chỉ liên hệ. Bạn có thể kiểm tra API này trên thiết bị Android bằng cách mở ứng dụng minh họa. Phần 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);
});
Sao chép và dán văn bản
Cho đến nay, không 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 hỗ trợ hình ảnh vào API không đồng bộ
để bây giờ bạn có thể sao chép và dán hình ảnh xung quanh. Tính năng 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 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 Navgator.clipboard.writeText() rồi dán văn bản đó vào sau bằng cách gọi navigategator.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. Để thực hiện việc này, bạn cần dữ liệu hình ảnh dưới dạng blob mà sau đó bạn chuyển vào hàm dựng mục bảng nhớ tạm. Cuối cùng, bạn có thể sao chép mục bảng nhớ tạm này bằng cách gọi Navigationgator.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 lại hình ảnh từ bảng nhớ tạm có vẻ liên quan, nhưng thực ra chỉ bao gồm việc lấy blob trở lại từ mục bảng nhớ tạm. Vì có thể có nhiều kết quả, nên bạn cần lặp lại cho đến khi có kết quả mà bạn quan tâm. Vì lý do bảo mật, hiện tại tính năng này chỉ được sử dụng cho hình ảnh PNG, nhưng có thể hỗ trợ nhiều định dạng hình ảnh hơn 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 trong hoạt động trong ứng dụng minh họa, các đoạn mã liên quan từ mã nguồn đượ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 sự cho phép. Tuy nhiên, bạn cần cấp quyền truy cập để dán hình ảnh 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:
Xin chúc mừng, bạn đã kết thúc lớp học lập trình. Xin nhắc lại rằng phần lớn các API này vẫn đang hoạt động hiệu quả và đang được xử lý. Vì vậy, nhóm thực sự đánh giá cao phản hồi của bạn, vì chỉ tương tác với những người như bạn sẽ giúp chúng tôi đạt được những API này.
Bạn cũng nên thường xuyên xem trang đích về Khả năng của chúng tôi. Chúng tôi sẽ cập nhật báo cáo và có các nội dung hướng dẫn cho tất cả bài viết chuyên sâu về các API mà chúng tôi xử lý. Không ngừng nghỉ!
Tom và toàn bộ Nhóm chức năng 🐡