ความสามารถในเว็บ
เราต้องการปิดช่องว่างความสามารถระหว่างเว็บกับโฆษณาเนทีฟ และทําให้นักพัฒนาซอฟต์แวร์สร้างประสบการณ์ที่ยอดเยี่ยมบนเว็บแบบเปิดได้อย่างง่ายดาย เราเชื่อมั่นเป็นอย่างยิ่งว่านักพัฒนาซอฟต์แวร์ทุกคนควรที่จะเข้าถึงความสามารถที่จําเป็นสําหรับการสร้างประสบการณ์การใช้งานเว็บที่ยอดเยี่ยม และเรามุ่งมั่นที่จะสร้างเว็บที่มีความสามารถมากกว่า
อย่างไรก็ตาม ความสามารถบางอย่าง เช่น การเข้าถึงระบบไฟล์และการตรวจหาเมื่อไม่มีการใช้งาน พร้อมใช้งานสําหรับโฆษณาเนทีฟ แต่พร้อมใช้งานบนเว็บไม่ได้ ความสามารถที่ขาดหายไปเหล่านี้หมายความว่าแอปบางประเภทแสดงบนเว็บไม่ได้ หรือมีประโยชน์น้อยกว่า
เราจะออกแบบและพัฒนาความสามารถใหม่เหล่านี้อย่างโปร่งใสและโปร่งใสโดยใช้กระบวนการของแพลตฟอร์มเว็บแบบเปิดที่มีอยู่ พร้อมทั้งรับความคิดเห็นตั้งแต่เนิ่นๆ จากนักพัฒนาซอฟต์แวร์และผู้ให้บริการเบราว์เซอร์รายอื่นๆ ในขณะที่เรากําลังปรับปรุงการออกแบบเพื่อให้แน่ใจว่าการออกแบบทํางานร่วมกันได้
สิ่งที่คุณจะสร้าง
ใน Codelab นี้ คุณจะลองใช้ API เว็บจํานวนหนึ่งที่เป็นแบบใหม่หรือพร้อมใช้งานเบื้องหลังก็ได้ ดังนั้น Codelab นี้จึงมุ่งเน้นไปที่ API และกรณีการใช้งานที่ API เหล่านี้ปลดล็อก ไม่ใช่การสร้างผลิตภัณฑ์สุดท้าย
สิ่งที่จะได้เรียนรู้
Codelab นี้จะสอนกลไกเบื้องต้นของ API ที่มีขอบภาพจํานวนมาก โปรดทราบว่ากลไกเหล่านี้ยังไม่ได้รับการกําหนดตายตัว และขอขอบคุณอย่างยิ่งสําหรับความคิดเห็นของคุณเกี่ยวกับขั้นตอนสําหรับนักพัฒนาซอฟต์แวร์
สิ่งที่ต้องมี
เนื่องจาก API ที่แสดงใน Codelab นี้มีลักษณะการทํางานที่ล้ําสมัย ข้อกําหนดของ API แต่ละรายการจึงแตกต่างกัน โปรดอ่านข้อมูลความเข้ากันได้อย่างละเอียดในตอนต้นของแต่ละส่วน
วิธีการเรียกใช้ Codelab
Codelab ไม่ได้มีจุดประสงค์เพื่อให้ทํางานตามลําดับ แต่ละส่วนแสดง API อิสระ คุณจึงควรเลือกสิ่งที่สนใจมากที่สุด
เป้าหมายของ Badging API คือทําให้ผู้ใช้สนใจสิ่งต่างๆ ที่เกิดขึ้นในเบื้องหลัง เพื่อความเรียบง่ายของการสาธิตใน Codelab นี้ เรามาลองใช้ API เพื่อดึงผู้ใช้ให้สนใจสิ่งที่กําลังเกิดขึ้นอยู่เบื้องหน้ากัน จากนั้น คุณสามารถโอนอารมณ์ความรู้สึกไปยังสิ่งต่างๆ ที่เกิดขึ้นในเบื้องหลังได้
ติดตั้ง Airhorner
คุณต้องมี PWA ที่ติดตั้งในหน้าจอหลักเพื่อให้ API นี้ใช้งานได้ ดังนั้นขั้นตอนแรกคือการติดตั้ง PWA เช่น airhorner.com ที่โด่งดังจากทั่วโลก กดปุ่มติดตั้งที่มุมบนขวา หรือใช้เมนู 3 จุดเพื่อติดตั้งด้วยตนเอง
การดําเนินการนี้จะแสดงข้อความแจ้งให้ยืนยัน ให้คลิกติดตั้ง
ตอนนี้คุณมีไอคอนใหม่ในแท่นชาร์จระบบปฏิบัติการแล้ว คลิกเพื่อเปิดใช้ PWA แอปนี้มีหน้าต่างแอปของตัวเองและทํางานในโหมดสแตนด์อโลน
|
|
การตั้งค่าป้าย
เมื่อติดตั้ง PWA แล้ว คุณต้องมีข้อมูลตัวเลขบางรายการ (ป้ายต้องมีตัวเลขเท่านั้น) จึงจะแสดงบนป้ายได้ สิ่งที่ตรงไปตรงมาในการนับใน The Air Horner คือการบีบมือ คือจํานวนครั้งที่ทํากับเขา จริงๆ แล้วแอป Airhorner ที่ติดตั้งไว้ให้คุณลองส่งเสียงเตือนแตรและตรวจสอบป้าย ระบบจะนับคะแนนเมื่อใดก็ตามที่คุณส่งเสียง
วิธีนี้ทํางานอย่างไร โค้ดก็คือ
let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
navigator.setExperimentalAppBadge(++hornCounter);
});ส่งเสียงแอร์ฮอร์น 2 ครั้ง แล้วเลือกไอคอน PWA': จะอัปเดตทุกในช่วงเวลา เสียง Airhorn ง่ายมากเลยทีเดียว
การล้างป้าย
ตัวนับสูงถึง 99 และเริ่มต้นใหม่ และยังรีเซ็ตด้วยตนเองได้ด้วย เปิดแท็บคอนโซลเครื่องมือสําหรับนักพัฒนาเว็บ วางบรรทัดด้านล่าง แล้วกด Enter
navigator.setExperimentalAppBadge(0);หรือคุณจะลบป้ายด้วยการล้างให้ชัดเจนตามที่แสดงในข้อมูลโค้ดต่อไปนี้ก็ได้ ไอคอน PWA' ของคุณควรมีลักษณะเหมือนกับจุดเริ่มต้น ชัดเจน และปราศจากป้าย
navigator.clearExperimentalAppBadge();
ความคิดเห็น
คุณคิดอย่างไรกับ API นี้ โปรดช่วยเราโดยการตอบแบบสํารวจสั้นๆ นี้
API นี้ใช้งานง่ายหรือไม่
คุณมีตัวอย่างที่จะเรียกใช้หรือไม่
อยากบอกอะไรเพิ่มเติมไหม มีฟีเจอร์บางอย่างที่ขาดหายไปไหม โปรดแสดงความคิดเห็นสั้นๆ ในแบบสํารวจนี้ ขอขอบคุณ
Native File System API ช่วยให้นักพัฒนาซอฟต์แวร์สร้างเว็บแอปที่มีประสิทธิภาพซึ่งโต้ตอบกับไฟล์ในอุปกรณ์ของผู้ใช้ หลังจากที่ผู้ใช้ให้สิทธิ์เข้าถึงเว็บแอปแล้ว API นี้จะช่วยให้เว็บแอปอ่านหรือบันทึกการเปลี่ยนแปลงของไฟล์และโฟลเดอร์ในอุปกรณ์ของผู้ใช้ได้โดยตรง
การอ่านไฟล์
" Hello, World" ของ Native File System API คือการอ่านไฟล์ในเครื่องและรับเนื้อหาของไฟล์ สร้างไฟล์ .txt ธรรมดาและป้อนข้อความ จากนั้น ให้ไปที่เว็บไซต์ที่ปลอดภัย (กล่าวคือ เว็บไซต์ที่แสดงผ่าน HTTPS) เช่น example.com แล้วเปิดคอนโซลเครื่องมือสําหรับนักพัฒนาเว็บ วางข้อมูลโค้ดด้านล่างในคอนโซล เนื่องจาก Native File System API ต้องใช้ท่าทางสัมผัสของผู้ใช้ เราจึงแนบเครื่องจัดการ DoubleClick ในเอกสาร เราจะต้องใช้แฮนเดิลไฟล์ในภายหลัง เราจึงเปลี่ยนให้เป็นตัวแปรส่วนกลาง
document.ondblclick = async () => {
window.handle = await window.chooseFileSystemEntries();
const file = await handle.getFile();
document.body.textContent = await file.text();
};
จากนั้น คุณจะดับเบิลคลิกที่ใดก็ได้ในหน้า example.com เครื่องมือเลือกไฟล์จะปรากฏขึ้น
เลือกไฟล์ .txt ที่สร้างไว้ก่อนหน้านี้ จากนั้นเนื้อหาไฟล์จะแทนที่เนื้อหาจริง body ของ example.com
การบันทึกไฟล์
ต่อไป เราต้องการเปลี่ยนแปลงบางอย่าง ดังนั้นมาทําให้ body แก้ไขได้โดยวางลงในข้อมูลโค้ดด้านล่าง ในตอนนี้ คุณสามารถแก้ไขข้อความได้ประหนึ่งว่าเบราว์เซอร์นั้นเป็นเครื่องมือแก้ไขข้อความ
document.body.contentEditable = true;
ตอนนี้เราอยากเขียนการเปลี่ยนแปลงเหล่านี้กลับไปยังไฟล์ต้นฉบับ ดังนั้นเราจึงต้องใช้ผู้เขียนในแฮนเดิลไฟล์ ซึ่งเราได้มาจากการวางข้อมูลโค้ดด้านล่างในคอนโซล ขอย้ําอีกครั้งว่าเราต้องดูท่าทางสัมผัสของผู้ใช้ ดังนั้นขณะนี้เราจึงรอคลิกเอกสารหลัก
document.onclick = async () => {
const writer = await handle.createWriter();
await writer.truncate(0);
await writer.write(0, document.body.textContent);
await writer.close();
};
เมื่อคุณคลิก (ดับเบิลคลิก) เอกสาร ข้อความแจ้งสิทธิ์จะปรากฏขึ้น เมื่อคุณให้สิทธิ์ เนื้อหาของไฟล์จะเป็นสิ่งที่คุณเคยแก้ไขใน body มาก่อน ยืนยันการเปลี่ยนแปลงด้วยการเปิดไฟล์ในตัวแก้ไขอื่น (หรือเริ่มต้นกระบวนการอีกครั้งโดยการดับเบิลคลิกเอกสารอีกครั้ง แล้วเปิดไฟล์อีกครั้ง)
ยินดีด้วย คุณเพิ่งสร้างเครื่องมือแก้ไขข้อความที่มีขนาดเล็กที่สุดในโลก [citation needed]
ความคิดเห็น
คุณคิดอย่างไรกับ API นี้ โปรดช่วยเราโดยการตอบแบบสํารวจสั้นๆ นี้
API นี้ใช้งานง่ายหรือไม่
คุณมีตัวอย่างที่จะเรียกใช้หรือไม่
อยากบอกอะไรเพิ่มเติมไหม มีฟีเจอร์บางอย่างที่ขาดหายไปไหม โปรดแสดงความคิดเห็นสั้นๆ ในแบบสํารวจนี้ ขอขอบคุณ
Shape Detection API ช่วยให้คุณเข้าถึงเครื่องมือตรวจสอบรูปร่างแบบเร่ง (เช่น สําหรับใบหน้าของมนุษย์) และใช้งานได้กับภาพนิ่งและ/หรือฟีดรูปภาพเคลื่อนไหว ระบบปฏิบัติการมีตัวตรวจจับฟีเจอร์ที่มีประสิทธิภาพและได้รับการเพิ่มประสิทธิภาพสูง เช่น FaceDetector ของ Android Shape Detection API จะเปิดการติดตั้งใช้งานโฆษณาเนทีฟเหล่านี้และเปิดเผยผ่านชุดอินเทอร์เฟซ JavaScript
ปัจจุบันฟีเจอร์ที่รองรับ ได้แก่ การตรวจจับใบหน้าผ่านอินเทอร์เฟซ FaceDetector, การตรวจหาบาร์โค้ดผ่านอินเทอร์เฟซ BarcodeDetector และการตรวจหาข้อความ (การจดจําอักขระด้วยแสง) ผ่านอินเทอร์เฟซ TextDetector
การตรวจจับใบหน้า
ฟีเจอร์ที่น่าสนใจของ Shape Detection API คือการตรวจจับใบหน้า หากต้องการทดสอบ คุณต้องมีหน้าที่มีใบหน้า หน้านี้ที่มีใบหน้าของผู้เขียน' เป็นจุดเริ่มต้นที่ดี ซึ่งจะมีลักษณะดังนี้ในภาพหน้าจอด้านล่าง ในเบราว์เซอร์ที่รองรับ ระบบจะจดจํากล่องขอบเขตใบหน้าและจุดสังเกตของใบหน้า
คุณสามารถดูได้ว่าจําเป็นต้องใช้โค้ดจํานวนน้อยเพียงใดในการทําให้เหตุการณ์นี้เกิดขึ้นโดยรีมิกซ์หรือแก้ไขโปรเจ็กต์ Glitch โดยเฉพาะไฟล์ Script.js
หากคุณต้องการเปลี่ยนหน้าแบบไดนามิกทั้งหมด เพียงอยากใช้งานกับใบหน้าของผู้เขียนเท่านั้น ให้ไปที่หน้าผลการค้นหาของ Google ที่มีใบหน้าทั้งหมดในแท็บส่วนตัวหรือในโหมดผู้มาเยือน ในหน้านั้น ให้เปิดเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ Chrome โดยคลิกขวาที่ใดก็ได้ แล้วคลิกตรวจสอบ จากนั้นวางข้อมูลโค้ดลงในแท็บคอนโซลด้านล่าง โค้ดจะไฮไลต์ใบหน้าที่ตรวจพบด้วยช่องสีแดงกึ่งโปร่งใส
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);
}
});โปรดทราบว่ามีรูปภาพข้อความ DOMException บางรายการ รูปภาพบางรูปไม่ได้รับการประมวลผล เนื่องจากรูปภาพครึ่งหน้าบนขีดเส้นใต้เป็น URI ข้อมูลและเข้าถึงได้ ในขณะที่รูปภาพครึ่งหน้าล่างมาจากโดเมนอื่นที่ไม่ได้กําหนดค่าเพื่อให้รองรับ CORS สําหรับการสาธิตนั้น เราไม่ต้องกังวลเกี่ยวกับเรื่องนี้ได้
การตรวจจับใบหน้าที่สําคัญ
นอกจากใบหน้าเพียงอย่างเดียวแล้ว macOS ยังรองรับการตรวจจับจุดสังเกตใบหน้าด้วย หากต้องการทดสอบการตรวจหาจุดสังเกตใบหน้า ให้วางข้อมูลโค้ดต่อไปนี้ลงในคอนโซล การช่วยเตือน: รายการจุดสังเกตของจุดสังเกตต่างๆ ไม่ได้สมบูรณ์แบบเลยเนื่องจาก crbug.com/914348 แต่คุณจะดูว่าทิศทางนี้ที่ใดและฟีเจอร์นี้ทรงพลังเพียงใด
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);
}
});การตรวจหาบาร์โค้ด
ฟีเจอร์ที่ 2 ของ Shape Detection API คือการตรวจหาบาร์โค้ด ในทํานองเดียวกัน เราต้องการหน้าที่มีบาร์โค้ด เช่น หน้าเว็บนี้ เมื่อเปิดเบราว์เซอร์นี้ คุณจะเห็นโค้ด QR ต่างๆ ที่ถูกถอดรหัส รีมิกซ์หรือแก้ไขโปรเจ็กต์ Glitch โดยเฉพาะไฟล์ script.js เพื่อดูการทํางาน
หากคุณต้องการอะไรที่มีชีวิตชีวามากขึ้น เราสามารถใช้ Google ค้นหารูปอีกครั้ง ครั้งนี้ในเบราว์เซอร์ ให้ไปที่หน้าผลการค้นหาของ Google นี้ในแท็บส่วนตัวหรือในโหมดผู้มาเยือน จากนี้ไปวางข้อมูลโค้ดด้านล่างในแท็บ Chrome DevTools Console หลังจากผ่านไปสักครู่ บาร์โค้ดที่ยอมรับจะใส่คําอธิบายประกอบด้วยค่าดิบและประเภทบาร์โค้ด
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);
}
});การตรวจหาข้อความ
ฟีเจอร์สุดท้ายของ Shape Detection API คือการตรวจหาข้อความ ขณะนี้คุณทราบการเจาะแล้ว: เราต้องการหน้าเว็บที่มีรูปภาพที่มีข้อความ เช่น หน้านี้ พร้อมด้วยผลการสแกนของ Google Books โดยในเบราว์เซอร์ที่รองรับ คุณจะเห็นข้อความที่ระบบจดจําและช่องที่ล้อมรอบข้อความ รีมิกซ์หรือแก้ไขโปรเจ็กต์ Glitch โดยเฉพาะไฟล์ script.js เพื่อดูการทํางาน
หากต้องการทดสอบแบบไดนามิก ให้ไปที่หน้าผลการค้นหาในแท็บส่วนตัวหรือโหมดผู้มาเยือน จากนี้ไปวางข้อมูลโค้ดด้านล่างในแท็บ Chrome DevTools Console เมื่อระบบรอรอสักครู่ ข้อความบางส่วนจะแสดงขึ้น
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);
}
});ความคิดเห็น
คุณคิดอย่างไรกับ API นี้ โปรดช่วยเราโดยการตอบแบบสํารวจสั้นๆ นี้
API นี้ใช้งานง่ายหรือไม่
คุณมีตัวอย่างที่จะเรียกใช้หรือไม่
อยากบอกอะไรเพิ่มเติมไหม มีฟีเจอร์บางอย่างที่ขาดหายไปไหม โปรดแสดงความคิดเห็นสั้นๆ ในแบบสํารวจนี้ ขอขอบคุณ
Web Share Target API ช่วยให้เว็บแอปที่ติดตั้งไว้สามารถลงทะเบียนกับระบบปฏิบัติการที่เกี่ยวข้องเป็นเป้าหมายการแชร์เพื่อรับเนื้อหาที่แชร์จาก Web Share API หรือเหตุการณ์ของระบบ เช่น ปุ่มแชร์ระบบปฏิบัติการ
ติดตั้ง PWA เพื่อแชร์กับ
ในขั้นแรก คุณต้องมี PWA ที่แชร์ได้ คราวนี้ Airhorner (โชคดี) จะทําทุกอย่างไม่ได้ แต่แอปสาธิต Web Share Target ช่วยคุณได้ ติดตั้งแอปลงในหน้าจอหลักของอุปกรณ์
แชร์ข้อมูลไปยัง PWA
ขั้นตอนต่อไปคือสิ่งที่คุณต้องการแชร์ เช่น รูปภาพจาก Google Photos ใช้ปุ่ม "แชร์" และเลือก PWA ของสมุดภาพซึ่งเป็นเป้าหมายที่แชร์
เมื่อแตะไอคอนแอป ระบบจะนําคุณไปที่ Scrapbook PWA โดยตรง จากนั้นรูปภาพจะอยู่ที่นั่น
วิธีนี้ทํางานอย่างไร หากต้องการทราบ ให้ดูไฟล์ Manifest ของเว็บแอปของ Scrapbook PWA' การกําหนดค่าเพื่อทําให้ Web Share Target API อยู่ในพร็อพเพอร์ตี้ "share_target" ของไฟล์ Manifest ที่ช่อง "action" จะชี้ไปยัง URL ที่ตกแต่งอย่างด้วยพารามิเตอร์ตามที่ระบุไว้ใน "params"
จากนั้นฝั่งการแชร์จะป้อนข้อมูลเทมเพลต URL นี้ตามลําดับ (ไม่ว่าจะแชร์ผ่านการดําเนินการแชร์ หรือควบคุมโดยนักพัฒนาแอปโดยใช้ Web Share API) ฝั่งจึงได้ดึงข้อมูลพารามิเตอร์และดําเนินการกับพารามิเตอร์นั้น เช่น แสดงพารามิเตอร์
{
"action": "/_share-target",
"enctype": "multipart/form-data",
"method": "POST",
"params": {
"files": [{
"name": "media",
"accept": ["audio/*", "image/*", "video/*"]
}]
}
}ความคิดเห็น
คุณคิดอย่างไรกับ API นี้ โปรดช่วยเราโดยการตอบแบบสํารวจสั้นๆ นี้
API นี้ใช้งานง่ายหรือไม่
คุณมีตัวอย่างที่จะเรียกใช้หรือไม่
อยากบอกอะไรเพิ่มเติมไหม มีฟีเจอร์บางอย่างที่ขาดหายไปไหม โปรดแสดงความคิดเห็นสั้นๆ ในแบบสํารวจนี้ ขอขอบคุณ
อุปกรณ์ส่วนใหญ่จะเข้าสู่โหมดสลีปได้อย่างรวดเร็วเมื่อไม่มีการใช้งาน เพื่อไม่ให้แบตเตอรี่หมดเร็ว แม้ว่าโดยส่วนใหญ่แล้วการทํางานนี้จะเป็นไปไม่ได้ แต่ก็มีแอปพลิเคชันบางอย่างที่ทําให้หน้าจอหรืออุปกรณ์เปิดทํางานตลอดเวลา Wake Lock API มีวิธีป้องกันไม่ให้อุปกรณ์หรี่แสงและล็อกหน้าจอ หรือป้องกันไม่ให้อุปกรณ์เข้าสู่โหมดสลีป ความสามารถนี้ช่วยให้สามารถใช้ประสบการณ์ใหม่ๆ ที่ก่อนหน้านี้ต้องใช้แอปที่มาพร้อมเครื่อง
ตั้งค่าโปรแกรมรักษาหน้าจอ
หากต้องการทดสอบ Wake Lock API ก่อนอื่นให้ตรวจสอบว่าอุปกรณ์เข้าสู่โหมดสลีป ดังนั้น ในแผงค่ากําหนดของระบบปฏิบัติการ ให้เปิดใช้งานโปรแกรมรักษาหน้าจอที่คุณเลือก แล้วตรวจสอบว่าโปรแกรมเริ่มทํางานหลังจากผ่านไปแล้ว 1 นาที ตรวจดูว่าทํางานได้โดยปล่อยอุปกรณ์ทิ้งไว้สําหรับช่วงเวลานั้น (ฉันรู้นะว่ามันเจ็บ) ภาพหน้าจอด้านล่างแสดง macOS แต่คุณสามารถลองใช้ได้ในอุปกรณ์เคลื่อนที่ Android หรือแพลตฟอร์มเดสก์ท็อปที่รองรับ
ตั้งค่า Wake Lock หน้าจอ
เมื่อทราบว่าโปรแกรมรักษาหน้าจอทํางานแล้ว คุณจึงจะใช้ Wake Lock ประเภท "screen" เพื่อป้องกันไม่ให้โปรแกรมรักษาหน้าจอทํางาน ไปที่แอปสาธิต Wake Lock แล้วคลิกช่องทําเครื่องหมายเปิดใช้งาน screen Wake Lock
เริ่มตั้งแต่ช่วงเวลาดังกล่าว ฟีเจอร์ Wake Lock จะทํางาน หากคุณอดทนรอให้อุปกรณ์ไม่ปลดล็อกเป็นเวลา 1 นาที คุณจะเห็นว่าโปรแกรมรักษาหน้าจอไม่ได้เริ่มต้นทํางานจริงๆ
วิธีนี้ทํางานอย่างไร หากต้องการทราบข้อมูล ให้ไปที่โปรเจ็กต์ Glitch สําหรับแอปสาธิต Wake Lock และดู script.js. gist ของโค้ดอยู่ในข้อมูลโค้ดด้านล่าง เปิดแท็บใหม่ (หรือใช้แท็บใดแท็บหนึ่งเพื่อเปิด) แล้ววางโค้ดด้านล่างในคอนโซลเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ Chrome เมื่อคุณคลิกหน้าต่าง คุณจะเห็น Wake Lock ที่ยังคงทํางานเป็นเวลา 10 วินาที (ดูบันทึกคอนโซล) และโปรแกรมรักษาหน้าจอไม่ควรเริ่มทํางาน
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);
}
ความคิดเห็น
คุณคิดอย่างไรกับ API นี้ โปรดช่วยเราโดยการตอบแบบสํารวจสั้นๆ นี้
API นี้ใช้งานง่ายหรือไม่
คุณมีตัวอย่างที่จะเรียกใช้หรือไม่
อยากบอกอะไรเพิ่มเติมไหม มีฟีเจอร์บางอย่างที่ขาดหายไปไหม โปรดแสดงความคิดเห็นสั้นๆ ในแบบสํารวจนี้ ขอขอบคุณ
API ที่เราตื่นเต้นมากคือ Contact Selecter API การดําเนินการนี้ช่วยให้เว็บแอปเข้าถึงรายชื่อติดต่อจากโปรแกรมจัดการรายชื่อติดต่อในอุปกรณ์ของอุปกรณ์ได้ ดังนั้นเว็บแอปจึงเข้าถึงรายชื่อติดต่อ อีเมล และหมายเลขโทรศัพท์ของคุณได้ คุณสามารถระบุได้ว่าต้องการให้ติดต่อรายชื่อติดต่อเพียงรายเดียวหรือหลายคน และเลือกว่าจะระบุข้อมูลทุกช่อง หรือแค่ชื่อ อีเมล และหมายเลขโทรศัพท์เพียงบางส่วน
ข้อควรพิจารณาเกี่ยวกับความเป็นส่วนตัว
เมื่อเครื่องมือเลือกเปิดขึ้น คุณสามารถเลือกรายชื่อติดต่อที่คุณต้องการแชร์ได้ คุณจะเห็นว่าไม่มีตัวเลือก "select &&tt; ทั้งหมด ที่จงใจจงใจ: เราต้องการให้คุณตัดสินใจอย่างรอบคอบ ในทํานองเดียวกัน การเข้าถึงก็ไม่ใช่การดําเนินการต่อเนื่อง แต่เป็นการตัดสินแบบครั้งเดียว
การเข้าถึงรายชื่อติดต่อ
การเข้าถึงรายชื่อติดต่อเป็นงานที่ไม่ซับซ้อน ก่อนที่เครื่องมือเลือกจะเปิด คุณจะระบุช่องที่ต้องการได้ (ตัวเลือกจะเป็น name, email และ telephone) และเลือกว่าจะเข้าถึงรายชื่อติดต่อหลายรายการหรือรายชื่อเดียว คุณทดสอบ API นี้ในอุปกรณ์ Android ได้โดยเปิดแอปพลิเคชันเดโม ส่วนที่เกี่ยวข้องของซอร์สโค้ดคือตัวอย่างข้อมูลโค้ดด้านล่างนี้
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);
});
การคัดลอกและวางข้อความ
จนถึงตอนนี้ ยังไม่มีวิธีคัดลอกและวางรูปภาพแบบเป็นโปรแกรมลงในคลิปบอร์ดของระบบ เมื่อเร็วๆ นี้เราได้เพิ่มการรองรับรูปภาพลงใน Async Clipboard API
เพื่อให้คุณคัดลอกและวางรูปภาพได้ มีอะไรใหม่ก็คือคุณสามารถเขียนไปยังคลิปบอร์ดได้ด้วย API คลิปบอร์ดแบบอะซิงโครนัสรองรับการคัดลอกและวางข้อความมาระยะหนึ่งแล้ว คุณสามารถคัดลอกข้อความไปยังคลิปบอร์ดได้โดยเรียกใช้ navgator.clipboard.writeText() จากนั้นวางข้อความดังกล่าวในภายหลังโดยเรียกใช้ navgator.clipboard.readText()
การคัดลอกและวางรูปภาพ
คุณเขียนรูปภาพไปยังคลิปบอร์ดได้แล้ว ในการทําเช่นนั้น คุณต้องมีข้อมูลรูปภาพเป็น BLOB แล้วส่งต่อไปยังเครื่องมือสร้างรายการคลิปบอร์ด สุดท้าย คุณสามารถคัดลอกรายการคลิปบอร์ดนี้ได้โดยเรียกใช้ navgator.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);
}การวางรูปภาพกลับเข้าไปจากคลิปบอร์ดดูค่อนข้างเกี่ยวข้อง แต่จริงๆ แล้วเป็นเพียงการดึง BLOB กลับมาจากรายการคลิปบอร์ด เนื่องจากอาจมีหลายทาง คุณจึงต้องวนซ้ําไปเรื่อยๆ จนกว่าจะมีคนสนใจ เหตุผลด้านความปลอดภัยคือในขณะนี้ เราจํากัดขนาดรูปภาพ PNG เท่านั้น แต่อาจรองรับรูปแบบรูปภาพเพิ่มเติมในอนาคต
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);
}
}ดูการทํางานของ API นี้ได้ในแอปเดโม ข้อมูลโค้ดที่เกี่ยวข้องจากซอร์สโค้ดจะฝังอยู่ด้านบน คุณทําสําเนารูปภาพลงในคลิปบอร์ดได้โดยไม่ต้องขออนุญาต แต่จะต้องให้สิทธิ์เข้าถึงเพื่อวางจากคลิปบอร์ด
เมื่อให้สิทธิ์เข้าถึงแล้ว คุณจะอ่านรูปภาพจากคลิปบอร์ดแล้ววางลงในแอปพลิเคชันได้โดยทําดังนี้
ยินดีด้วย คุณดูวิดีโอจนจบ Codelab แล้ว ขอย้ําอีกครั้งว่า API ส่วนใหญ่ยังคงทํางานอย่างต่อเนื่อง ดังนั้น ทีมจึงยินดีรับฟังความคิดเห็นของคุณ เนื่องจากการโต้ตอบกับบุคคลอย่างคุณจะช่วยให้เราสามารถรวบรวม API เหล่านี้ได้อย่างถูกต้อง
นอกจากนี้ เรายังขอแนะนําให้คุณดูหน้า Landing Page ของความสามารถเป็นประจํา เราจะคอยอัปเดตให้เป็นปัจจุบันอยู่เสมอ และมีตัวชี้ไปยังบทความเชิงลึกทั้งหมดสําหรับ API ที่เราทํางานอยู่ ลุยเลย!
ทนงและทีมทั้งหมดของ 🐡