1. ข้อมูลเบื้องต้นและการตั้งค่า
ความสามารถของเว็บ
เราต้องการปิดช่องว่างด้านความสามารถระหว่างเว็บกับเนทีฟ และทำให้นักพัฒนาซอฟต์แวร์สร้างประสบการณ์ที่ยอดเยี่ยมในเว็บแบบเปิดได้อย่างง่ายดาย เราเชื่อเป็นอย่างยิ่งว่านักพัฒนาซอฟต์แวร์ทุกคนควรสามารถเข้าถึงความสามารถที่จำเป็นต่อการสร้างประสบการณ์การใช้งานเว็บที่ยอดเยี่ยม และเรามุ่งมั่นที่จะทำให้เว็บมีประสิทธิภาพยิ่งขึ้น
อย่างไรก็ตาม มีความสามารถบางอย่าง เช่น การเข้าถึงระบบไฟล์และการตรวจหาเมื่อไม่มีการใช้งาน ซึ่งมีให้ในเครื่องแต่ไม่พร้อมใช้งานบนเว็บ ความสามารถที่ขาดหายไปเหล่านี้หมายความว่าแอปบางประเภทจะส่งบนเว็บไม่ได้ หรือมีประโยชน์น้อยลง
เราจะออกแบบและพัฒนาความสามารถใหม่ๆ เหล่านี้ให้เปิดกว้างและโปร่งใส โดยใช้กระบวนการมาตรฐานแพลตฟอร์มเว็บแบบเปิดที่มีอยู่แล้ว พร้อมกับขอความคิดเห็นล่วงหน้าจากนักพัฒนาซอฟต์แวร์และผู้ให้บริการเบราว์เซอร์รายอื่นๆ ในขณะที่เราพัฒนาการออกแบบอย่างต่อเนื่อง เพื่อให้แน่ใจว่ามีการออกแบบที่สามารถทำงานร่วมกันได้
สิ่งที่คุณจะสร้าง
ใน Codelab นี้ คุณจะได้ทดลองกับ API ของเว็บจำนวนมากที่เป็น API ใหม่เอี่ยมหรือพร้อมใช้งานหลัง Flag เท่านั้น ดังนั้น Codelab นี้จะมุ่งเน้นที่ตัว API เองและกรณีการใช้งานที่ API เหล่านี้ปลดล็อกมากกว่าการสร้างผลิตภัณฑ์ขั้นสุดท้ายโดยเฉพาะ
สิ่งที่คุณจะได้เรียนรู้
Codelab นี้จะสอนกลไกพื้นฐานของ API แบบ Bleeding-Edge หลายตัวแก่คุณ โปรดทราบว่ากลไกเหล่านี้ยังไม่ตายตัว และเราขอขอบคุณอย่างยิ่งสำหรับความคิดเห็นของคุณเกี่ยวกับขั้นตอนการดำเนินการของนักพัฒนาซอฟต์แวร์
สิ่งที่ต้องมี
เนื่องจาก API ที่แสดงใน Codelab นี้อยู่ในขั้นขยายการทำงาน ข้อกำหนดสำหรับ API แต่ละรายการจึงแตกต่างกัน โปรดอ่านข้อมูลความเข้ากันได้อย่างละเอียดในตอนต้นของแต่ละส่วน
วิธีใช้ Codelab
Codelab ไม่จำเป็นต้องทำงานตามลำดับเสมอไป แต่ละส่วนเป็นตัวแทนของ API อิสระ คุณจึงสามารถเลือกที่คุณสนใจมากที่สุดได้
2. Badging API
เป้าหมายของ Badging API คือการนำ กับสิ่งต่างๆ ที่เกิดขึ้นในเบื้องหลัง เพื่อให้การสาธิตใน Codelab มีความเรียบง่าย ให้ใช้ API เพื่อนำผู้ใช้ กับสิ่งที่กำลังเกิดขึ้นเบื้องหน้า จากนั้นคุณก็จะสามารถโน้มน้าวจิตใจกับสิ่งที่เกิดขึ้นเบื้องหลังได้
ติดตั้ง Airhorner
เพื่อให้ API นี้ทำงานได้ คุณต้องมี PWA ที่ติดตั้งไว้ในหน้าจอหลัก ดังนั้นขั้นตอนแรกคือการติดตั้ง PWA เช่น airhorner.com ที่มีชื่อเสียงระดับโลก กดปุ่มติดตั้งที่มุมขวาบน หรือใช้เมนู 3 จุดเพื่อติดตั้งด้วยตนเอง
ระบบจะแสดงข้อความยืนยัน ให้คลิกติดตั้ง
ตอนนี้คุณมีไอคอนใหม่ใน Dock ของระบบปฏิบัติการแล้ว คลิกเพื่อเปิดใช้ PWA ซึ่งจะมีหน้าต่างแอปของตัวเองและเรียกใช้ในโหมดสแตนด์อโลน
|
|
การตั้งค่าป้าย
หลังจากติดตั้ง PWA แล้ว คุณต้องมีข้อมูลตัวเลขบางอย่าง (ป้ายจะมีได้เฉพาะตัวเลขเท่านั้น) เพื่อแสดงบนป้าย สิ่งที่ตรงๆ ใน The Air Horner ก็คือการถอนหายใจที่ตัวเองถูกชะตากันมาหลายครั้งแล้ว อันที่จริง ติดตั้งแอป Airhorner ที่ติดตั้งไว้แล้ว ให้ลองปรับแตรและตรวจสอบตราสัญลักษณ์ เสียงจะดังขึ้นเมื่อใดก็ตามที่คุณบีบแตร
แล้วฟีเจอร์นี้ทำงานอย่างไร โดยพื้นฐานแล้ว โค้ดนี้คือ
let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
navigator.setExperimentalAppBadge(++hornCounter);
});
ส่งเสียงแอร์ฮอร์น 2 ครั้งและตรวจสอบไอคอนของ PWA ซึ่งจะอัปเดตทุกๆ โสด เสียงแอร์ฮอร์น ง่ายๆ เท่านี้เลย
การล้างป้าย
ตัวนับเวลาเต็มจนถึง 99 แล้วเริ่มใหม่ หรือคุณจะรีเซ็ตด้วยตนเองก็ได้ เปิดแท็บคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บ วางบรรทัดด้านล่าง แล้วกด Enter
navigator.setExperimentalAppBadge(0);
นอกจากนี้ คุณยังสามารถกำจัดป้ายออกได้ด้วยการล้างป้ายนั้นอย่างชัดแจ้ง ดังที่แสดงในข้อมูลโค้ดต่อไปนี้ ในตอนนี้ไอคอน PWA ควรมีลักษณะเหมือนจุดเริ่มต้นอีกครั้ง ชัดเจนและไม่มีป้าย
navigator.clearExperimentalAppBadge();
ความคิดเห็น
คุณคิดอย่างไรกับ API นี้ โปรดช่วยเราด้วยการตอบแบบสำรวจนี้สั้นๆ
API นี้ใช้งานง่ายไหม
คุณได้รับตัวอย่างการเรียกใช้หรือไม่
อยากบอกอะไรเพิ่มเติมไหม มีฟีเจอร์ไม่ครบไหม โปรดแสดงความคิดเห็นสั้นๆ ในแบบสำรวจนี้ ขอขอบคุณ
3. API ระบบไฟล์แบบดั้งเดิม
Native File System API ช่วยให้นักพัฒนาซอฟต์แวร์สร้างเว็บแอปที่มีประสิทธิภาพซึ่งโต้ตอบกับไฟล์ในอุปกรณ์ภายในของผู้ใช้ได้ หลังจากที่ผู้ใช้ให้สิทธิ์เข้าถึงเว็บแอปแล้ว API นี้จะช่วยให้เว็บแอปอ่านหรือบันทึกการเปลี่ยนแปลงลงในไฟล์และโฟลเดอร์ในอุปกรณ์ของผู้ใช้ได้โดยตรง
การอ่านไฟล์
โค้ด "สวัสดีชาวโลก" ของ Native File System API คือการอ่านไฟล์ในเครื่องและรับเนื้อหาของไฟล์ สร้างไฟล์ .txt แบบธรรมดาและป้อนข้อความ จากนั้นไปที่เว็บไซต์ที่ปลอดภัย (เว็บไซต์ที่ให้บริการผ่าน HTTPS) เช่น example.com แล้วเปิดคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บ วางข้อมูลโค้ดด้านล่างในคอนโซล เนื่องจาก Native File System API กำหนดให้ใช้ท่าทางสัมผัสของผู้ใช้ เราจึงแนบตัวแฮนเดิลการดับเบิลคลิกบนเอกสาร เราจะต้องใช้แฮนเดิลไฟล์ในภายหลัง จึงควรทำให้เป็นตัวแปรร่วม
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 นี้ใช้งานง่ายไหม
คุณได้รับตัวอย่างการเรียกใช้หรือไม่
อยากบอกอะไรเพิ่มเติมไหม มีฟีเจอร์ไม่ครบไหม โปรดแสดงความคิดเห็นสั้นๆ ในแบบสำรวจนี้ ขอขอบคุณ
4. Shape Detection API
Shape Detection API ให้สิทธิ์เข้าถึงเครื่องมือตรวจจับรูปร่างแบบเร่ง (เช่น สำหรับใบหน้าของมนุษย์) และทำงานกับภาพนิ่งและ/หรือฟีดรูปภาพแบบสด ระบบปฏิบัติการมีตัวตรวจจับฟีเจอร์ที่มีประสิทธิภาพและมีประสิทธิภาพสูง เช่น FaceDetector ของ Android Shape Detection API จะเปิดการใช้งานแบบเนทีฟเหล่านี้และแสดงผ่านชุดอินเทอร์เฟซ JavaScript
ขณะนี้ ฟีเจอร์ที่รองรับคือการตรวจจับใบหน้าผ่านอินเทอร์เฟซ FaceDetector การตรวจหาบาร์โค้ดผ่านอินเทอร์เฟซ BarcodeDetector และการตรวจจับข้อความ (การจดจำอักขระด้วยแสง) ผ่านอินเทอร์เฟซ TextDetector
การตรวจจับใบหน้า
ฟีเจอร์ที่น่าสนใจของ Shape Detection API คือการตรวจจับใบหน้า ในการทดสอบ เราต้องใช้หน้าเว็บที่มีใบหน้า หน้านี้ที่มีใบหน้าของผู้เขียนเป็นจุดเริ่มต้นที่ดี ซึ่งจะมีลักษณะคล้ายในภาพหน้าจอด้านล่าง ในเบราว์เซอร์ที่รองรับ ระบบจะจดจำกรอบขอบเขตของใบหน้าและจุดสังเกตของใบหน้า
คุณดูได้ว่าต้องใช้โค้ดเพียงเล็กน้อยในการดำเนินการดังกล่าวโดยการรีมิกซ์หรือแก้ไขโปรเจ็กต์ Glitch โดยเฉพาะไฟล์ Script.js
ถ้าคุณต้องการสร้างไดนามิกเต็มรูปแบบและไม่เพียงใช้งานได้กับใบหน้าของผู้เขียนเท่านั้น ให้ไปที่หน้าผลการค้นหาของ Google Search ซึ่งมีใบหน้าจำนวนมากในแท็บส่วนตัวหรือในโหมดผู้มาเยือน ในหน้าดังกล่าว ให้เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ 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);
}
});
การตรวจหาบาร์โค้ด
ฟีเจอร์ที่สองของ Shape Detection API คือการตรวจจับบาร์โค้ด เช่นเดียวกับก่อนหน้านี้ เราต้องการหน้าเว็บที่มีบาร์โค้ด เช่น หน้านี้ เมื่อเปิดในเบราว์เซอร์ คุณจะเห็นคิวอาร์โค้ดต่างๆ ที่มีการถอดรหัส รีมิกซ์หรือแก้ไขโปรเจ็กต์ Glitch โดยเฉพาะไฟล์ Script.js เพื่อดูว่าดำเนินไปอย่างไร
ถ้าคุณต้องการสิ่งที่มีชีวิตชีวามากขึ้น เราสามารถใช้ Google Image Search อีกครั้งได้ ครั้งนี้ในเบราว์เซอร์ ให้ไปที่หน้าผลการค้นหาของ Google ในแท็บส่วนตัวหรือในโหมดผู้มาเยือน วางข้อมูลโค้ดด้านล่างในแท็บคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome หลังจากนั้นสักครู่ บาร์โค้ดที่รู้จักจะมีคำอธิบายประกอบด้วยค่าดิบและประเภทบาร์โค้ด
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 ไม่ต้องรอสักพัก ระบบจึงจะจดจำข้อความบางส่วน
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 นี้ใช้งานง่ายไหม
คุณได้รับตัวอย่างการเรียกใช้หรือไม่
อยากบอกอะไรเพิ่มเติมไหม มีฟีเจอร์ไม่ครบไหม โปรดแสดงความคิดเห็นสั้นๆ ในแบบสำรวจนี้ ขอขอบคุณ
5. Web Share Target API
Web Share Target API ช่วยให้เว็บแอปที่ติดตั้งไว้ลงทะเบียนกับระบบปฏิบัติการที่สำคัญเป็นเป้าหมายการแชร์เพื่อรับเนื้อหาที่แชร์จาก Web Share API หรือเหตุการณ์ของระบบ เช่น ปุ่มแชร์ระดับระบบปฏิบัติการ
ติดตั้ง PWA เพื่อแชร์
ในขั้นตอนแรก คุณต้องมี PWA ที่คุณแชร์ได้ ครั้งนี้ Airhorner (โชคดี) จะทำงานไม่ได้ แต่แอปเดโม Web Share Target ช่วยคุณได้ ติดตั้งแอปลงในหน้าจอหลักของอุปกรณ์
แชร์บางสิ่งไปยัง PWA
จากนั้น คุณต้องมีสิ่งที่แชร์ เช่น รูปภาพจาก Google Photos ใช้ปุ่ม "แชร์" และเลือก PWA ของสมุดภาพเป็นเป้าหมายการแชร์
เมื่อแตะไอคอนแอป คุณจะเข้าสู่ PWA ของสมุดภาพโดยตรง และรูปภาพจะอยู่ในนั้น
แล้วฟีเจอร์นี้ทำงานอย่างไร หากต้องการดูข้อมูล ให้ลองดูไฟล์ Manifest ของเว็บแอปของสมุดภาพ 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 นี้ใช้งานง่ายไหม
คุณได้รับตัวอย่างการเรียกใช้หรือไม่
อยากบอกอะไรเพิ่มเติมไหม มีฟีเจอร์ไม่ครบไหม โปรดแสดงความคิดเห็นสั้นๆ ในแบบสำรวจนี้ ขอขอบคุณ
6. API Wake Lock
อุปกรณ์ส่วนใหญ่จะเข้าสู่โหมดสลีปอย่างรวดเร็วเมื่อไม่มีการใช้งานเพื่อหลีกเลี่ยงไม่ให้แบตเตอรี่หมดเร็ว แม้ว่าโดยส่วนใหญ่จะไม่มีปัญหา แต่แอปพลิเคชันบางอย่างต้องเปิดหน้าจอหรืออุปกรณ์ค้างไว้เพื่อให้การทำงานเสร็จสมบูรณ์ 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 ใจความสำคัญของโค้ดอยู่ในข้อมูลโค้ดด้านล่าง เปิดแท็บใหม่ (หรือใช้แท็บใดก็ได้ที่คุณเปิดไว้) และวางโค้ดด้านล่างในคอนโซลเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ 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 นี้ใช้งานง่ายไหม
คุณได้รับตัวอย่างการเรียกใช้หรือไม่
อยากบอกอะไรเพิ่มเติมไหม มีฟีเจอร์ไม่ครบไหม โปรดแสดงความคิดเห็นสั้นๆ ในแบบสำรวจนี้ ขอขอบคุณ
7. Contact Picker API
API ที่เรารู้สึกตื่นเต้นอย่างมากคือ Contact Picker API ซึ่งช่วยให้เว็บแอปเข้าถึงรายชื่อติดต่อจากโปรแกรมจัดการรายชื่อติดต่อภายในของอุปกรณ์ได้ เพื่อให้เว็บแอปมีสิทธิ์เข้าถึงรายชื่อติดต่อ อีเมล และหมายเลขโทรศัพท์ คุณสามารถระบุว่าต้องการรับข้อมูลรายชื่อติดต่อเพียงโปรไฟล์เดียวหรือหลายรายการ และกำหนดได้ว่าต้องการรับข้อมูลทุกช่องหรือเฉพาะบางส่วนของชื่อ อีเมล และหมายเลขโทรศัพท์
ข้อพิจารณาเกี่ยวกับความเป็นส่วนตัว
เมื่อเครื่องมือเลือกเปิดขึ้น คุณสามารถเลือกรายชื่อติดต่อที่ต้องการแชร์ได้ คุณจะเห็นว่าไม่มี "เลือกทั้งหมด" อย่างรอบคอบ: เราต้องการให้ข้อมูลร่วมกัน เป็นการตัดสินใจที่ไตร่ตรอง ในทำนองเดียวกัน การเข้าถึงอาจไม่ต่อเนื่อง แต่เป็นการตัดสินใจเพียงครั้งเดียว
การเข้าถึงรายชื่อติดต่อ
การเข้าถึงรายชื่อติดต่อเป็นงานที่ไม่ซับซ้อน ก่อนที่เครื่องมือเลือกจะเปิดขึ้น คุณสามารถระบุฟิลด์ที่ต้องการ (ตัวเลือกได้แก่ 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);
});
8. Async Clipboard API
การคัดลอกและวางข้อความ
ก่อนหน้านี้ยังไม่มีวิธีคัดลอกและวางรูปภาพไปยังคลิปบอร์ดของระบบ เมื่อเร็วๆ นี้ เราได้เพิ่มการรองรับรูปภาพใน Async Clipboard API
เพื่อให้คุณคัดลอกและวางรูปภาพได้ มีอะไรใหม่คือคุณสามารถเขียนรูปภาพลงในคลิปบอร์ดได้ด้วย API คลิปบอร์ดแบบไม่พร้อมกันรองรับการคัดลอกและวางข้อความมาระยะหนึ่งแล้ว คุณคัดลอกข้อความไปยังคลิปบอร์ดได้โดยเรียกใช้ navigator.clipboard.writeText() จากนั้นวางข้อความดังกล่าวในภายหลังโดยเรียกใช้ navigator.clipboard.readText()
การคัดลอกและวางรูปภาพ
ตอนนี้คุณเขียนรูปภาพลงในคลิปบอร์ดได้แล้ว เพื่อให้สามารถใช้งานได้ คุณต้องมีข้อมูลรูปภาพเป็น BLOB ที่ส่งไปยังเครื่องมือสร้างรายการคลิปบอร์ด สุดท้าย คุณสามารถคัดลอกรายการคลิปบอร์ดนี้ได้โดยเรียกใช้ 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);
}
การวางรูปภาพกลับจากคลิปบอร์ดดูค่อนข้างเกี่ยวข้อง แต่จริงๆ แล้วเป็นการนำ 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 นี้ได้ในแอปสาธิต โดยข้อมูลโค้ดที่เกี่ยวข้องจากซอร์สโค้ดที่ฝังอยู่ด้านบน การคัดลอกรูปภาพไปยังคลิปบอร์ดสามารถทำได้โดยไม่ต้องขออนุญาต แต่คุณต้องให้สิทธิ์เข้าถึงเพื่อวางจากคลิปบอร์ด
หลังจากให้สิทธิ์เข้าถึงแล้ว คุณจะอ่านรูปภาพจากคลิปบอร์ดและวางลงในแอปพลิเคชันได้ โดยทำดังนี้
9. สำเร็จแล้ว!
ขอแสดงความยินดี คุณมาถึงตอนท้ายของ Codelab แล้ว ขอย้ำอีกครั้งว่านี่เป็นการแจ้งเตือนอีกครั้งว่า API ส่วนใหญ่ยังคงมีปัญหาและกำลังทำงานอย่างต่อเนื่อง ทีมของเราจึงขอขอบคุณความคิดเห็นของคุณ เพราะการโต้ตอบกับผู้ใช้อย่างคุณ จะช่วยให้เราได้รับ API เหล่านี้อย่างถูกต้อง
นอกจากนี้ เราขอแนะนำให้คุณดูที่หน้า Landing Page ของความสามารถเป็นประจำ เราจะคอยอัปเดตอยู่เสมอ และมีคำแนะนำเกี่ยวกับบทความเชิงลึกทั้งหมดสำหรับ API ที่เราพัฒนาอยู่ ร็อกกันต่อเลย!
Tom และทีมความสามารถทั้งหมด 🐡