1. מבוא והגדרה
יכולות האינטרנט
אנחנו רוצים לצמצם את פער היכולות בין האינטרנט לבין אפליקציות מקוריות, ולאפשר למפתחים ליצור בקלות חוויות שימוש מעולות באינטרנט הפתוח. אנחנו מאמינים שלכל מפתח צריכה להיות גישה ליכולות שהוא צריך כדי ליצור חוויית אינטרנט מעולה, ואנחנו מחויבים ליצירת אינטרנט עם יכולות משופרות.
עם זאת, יש יכולות מסוימות – כמו גישה למערכת קבצים וזיהוי של חוסר פעילות – שזמינות באפליקציות מקומיות אבל לא זמינות באינטרנט. היכולות החסרות האלה אומרות שלא ניתן להציג באינטרנט סוגים מסוימים של אפליקציות, או שהן פחות שימושיות.
אנחנו נתכנן ונפתח את היכולות החדשות האלה באופן פתוח ושקוף, תוך שימוש בתהליכים הקיימים של תקני פלטפורמת האינטרנט הפתוחה. במקביל, נבקש משוב מוקדם ממפתחים ומספקי דפדפנים אחרים כדי לשפר את העיצוב ולהבטיח שהוא יהיה ניתן להפעלה הדדית.
מה תפַתחו
ב-Codelab זה תתנסו עם מספר ממשקי API חדשים לאינטרנט או עם ממשקי API שזמינים רק מאחורי דגל. לכן, ה-codelab הזה מתמקד בממשקי ה-API עצמם ובתרחישי שימוש שמתאפשרים באמצעות ממשקי ה-API האלה, ולא ביצירת מוצר סופי ספציפי.
מה תלמדו
ב-codelab הזה נלמד אתכם את המכניקה הבסיסית של כמה ממשקי API מתקדמים. חשוב לזכור שהמנגנונים האלה עדיין לא סופיים, והמשוב שלכם על תהליך העבודה של המפתחים חשוב לנו מאוד.
הדרישות
ממשקי ה-API שמוצגים ב-codelab הזה הם ממש חדשניים, ולכן הדרישות לכל API משתנות. חשוב לקרוא בעיון את פרטי התאימות בתחילת כל קטע.
איך ניגשים ל-codelab
לא חייבים לעבוד על ה-codelab לפי הסדר. כל קטע מייצג API עצמאי, אז אתם יכולים להשתמש בקוד מהסתעפות אחרת (Cherry-picking) את מה שהכי מעניין אתכם.
2. Badging API
המטרה של Badging API היא למשוך את תשומת הלב של המשתמשים לדברים שקורים ברקע. כדי לפשט את ההדגמה ב-codelab הזה, נשתמש ב-API כדי למשוך את תשומת הלב של המשתמשים למשהו שקורה בחזית. אחרי זה אפשר להשתמש באנלוגיה הזו כדי להבין מה קורה ברקע.
התקנת Airhorner
כדי שה-API הזה יפעל, צריך להתקין PWA במסך הבית. לכן השלב הראשון הוא להתקין PWA, כמו airhorner.com המפורסם. לוחצים על הלחצן התקנה בפינה השמאלית העליונה או משתמשים בתפריט שלוש הנקודות כדי להתקין באופן ידני.
תוצג הודעת אישור. לוחצים על התקנה.
עכשיו יש לכם סמל חדש במזח של מערכת ההפעלה. כדי להפעיל את ה-PWA, לוחצים עליו. היא תפעל בחלון אפליקציה משלה במצב עצמאי.
|
|
הגדרת תג
אחרי שמתקינים PWA, צריך להזין נתונים מספריים (התגים יכולים להכיל רק מספרים) כדי להציג אותם בתג. אחד הדברים הפשוטים שאפשר לספור ב-The Air Horner הוא sigh, מספר הפעמים שהקרן הופעלה. בעצם, כשהאפליקציה Airhorner מותקנת, נסו להפעיל את הצופר ולבדוק את התג. המונה עולה בכל פעם שמשתמשים בצופר.
אז איך זה עובד? בעצם, הקוד הוא:
let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
navigator.setExperimentalAppBadge(++hornCounter);
});
משמיעים את צופר האוויר כמה פעמים ובודקים את הסמל של ה-PWA: הוא יתעדכן בכל פעם שצופר האוויר ישמיע צליל. זה הכול.
מחיקת תג
המונה עולה עד 99 ואז מתחיל מחדש. אפשר גם לאפס אותו באופן ידני. פותחים את הכרטיסייה 'מסוף' בכלי הפיתוח, מדביקים את השורה שלמטה ומקישים על Enter.
navigator.setExperimentalAppBadge(0);
אפשרות אחרת היא להסיר את התג באופן מפורש, כמו שמוצג בקטע הקוד הבא. הסמל של ה-PWA אמור לחזור למראה המקורי שלו, ברור וללא תג.
navigator.clearExperimentalAppBadge();
משוב
מה דעתך על ה-API הזה? נשמח לקבל ממך תשובות לארבע שאלות קצרות.
האם השימוש ב-API הזה היה אינטואיטיבי?
הצלחת להריץ את הדוגמה?
רוצה לספר לנו עוד? האם היו תכונות חסרות? נשמח לקבל משוב מהיר בסקר הזה. תודה!
3. Native File System API
Native File System API מאפשר למפתחים ליצור אפליקציות אינטרנט מתקדמות שמקיימות אינטראקציה עם קבצים במכשיר המקומי של המשתמש. אחרי שהמשתמש מעניק לאפליקציית אינטרנט גישה, ה-API הזה מאפשר לאפליקציות אינטרנט לקרוא או לשמור שינויים ישירות בקבצים ובתיקיות במכשיר של המשתמש.
קריאת קובץ
הפעולה הראשונה שצריך לעשות עם Native File System API היא לקרוא קובץ מקומי ולקבל את תוכן הקובץ. יוצרים קובץ .txt ומזינים בו טקסט. לאחר מכן, עוברים לאתר מאובטח (כלומר, אתר שמוצג באמצעות HTTPS) כמו example.com ופותחים את מסוף כלי הפיתוח. מדביקים את קטע הקוד שלמטה במסוף. מכיוון ש-Native File System API דורש פעולת משתמש, אנחנו מצרפים handler של לחיצה כפולה למסמך. נצטרך את הקובץ בהמשך, לכן נגדיר אותו כמשתנה גלובלי.
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 שמלא בפנים בכרטיסייה פרטית או במצב אורח. עכשיו, בדף הזה, פותחים את הכלים למפתחים ב-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, ולא כל התמונות עוברות עיבוד. הסיבה לכך היא שהתמונות above-the-fold מוטמעות כמזהי URI של נתונים ולכן אפשר לגשת אליהן, בעוד שהתמונות below-the-fold מגיעות מדומיין אחר שלא מוגדר לתמיכה ב-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 היא זיהוי ברקודים. בדומה למה שביקשנו קודם, אנחנו צריכים דף עם ברקודים, כמו הדף הזה. כשפותחים את הקובץ בדפדפן, אפשר לראות את קודי ה-QR השונים מפוענחים. כדי לראות איך זה נעשה, אפשר לערוך או ליצור רמיקס של פרויקט Glitch, במיוחד של הקובץ script.js.
אם אתם רוצים משהו דינמי יותר, אפשר שוב להשתמש בחיפוש תמונות Google. הפעם, בדפדפן, עוברים אל דף תוצאות החיפוש הזה ב-Google בכרטיסייה פרטית או במצב אורח. עכשיו מדביקים את קטע הקוד שלמטה בכרטיסייה Console בכלי הפיתוח ל-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.
כדי לבדוק את זה באופן דינמי, עוברים אל דף תוצאות החיפוש בכרטיסייה פרטית או במצב אורח. עכשיו מדביקים את קטע הקוד שלמטה בכרטיסייה Console בכלי הפיתוח ל-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. לוחצים על לחצן השיתוף ובוחרים באפשרות Scrapbook PWA כיעד לשיתוף.
כשמקישים על סמל האפליקציה, מגיעים ישירות ל-PWA של אלבום התמונות, והתמונה נמצאת שם.
אז איך זה עובד? כדי לגלות, אפשר לעיין בקובץ המניפסט של אפליקציית האינטרנט של Scrapbook PWA. ההגדרה שמאפשרת ל-Web Share Target API לפעול נמצאת במאפיין "share_target" של המניפסט, שבשדה "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. Wake Lock API
כדי למנוע את התרוקנות הסוללה, רוב המכשירים עוברים למצב שינה במהירות כשלא משתמשים בהם. ברוב המקרים זה בסדר, אבל יש אפליקציות שצריכות שהמסך או המכשיר יישארו פעילים כדי להשלים את הפעולה שלהן. ממשק ה-API של Wake Lock מספק דרך למנוע מהמכשיר לעמעם ולנעול את המסך או לעבור למצב שינה. היכולת הזו מאפשרת חוויות חדשות, שעד עכשיו דרשו אפליקציית נייטיב.
הגדרת שומר מסך
כדי לבדוק את Wake Lock API, קודם צריך לוודא שהמכשיר יעבור למצב שינה. לכן, בחלונית ההעדפות של מערכת ההפעלה, צריך להפעיל שומר מסך לפי בחירתכם ולוודא שהוא מתחיל אחרי דקה אחת. כדי לוודא שהשיטה עובדת, צריך להשאיר את המכשיר ללא מגע בדיוק למשך הזמן הזה (כן, אני יודע, זה קשה). צילומי המסך שלמטה הם מ-macOS, אבל כמובן שאפשר לנסות את זה במכשיר Android נייד או בכל פלטפורמת מחשב נתמכת.
הגדרת חסימת מצב שינה
עכשיו כשאתם יודעים ששומר המסך פועל, תשתמשו בחסימת מצב שינה מסוג "screen" כדי למנוע משומר המסך לבצע את הפעולה שלו. עוברים אל אפליקציית ההדגמה של Wake Lock ולוחצים על הפעלה .
תיבת הסימון screen חסימת מצב שינה.
מרגע זה, נעילת מצב שינה פעילה. אם תהיו סבלניים מספיק כדי לא לגעת במכשיר במשך דקה, תראו ששומר המסך באמת לא התחיל.
איך זה עובד? כדי לגלות, אפשר לעבור אל פרויקט Glitch של אפליקציית ההדגמה Wake Lock ולבדוק את script.js. קטע הקוד שלמטה כולל את עיקרי הקוד. פותחים כרטיסייה חדשה (או משתמשים בכרטיסייה פתוחה כלשהי) ומדביקים את הקוד שלמטה במסוף של הכלים למפתחים ב-Chrome. כשלוחצים על החלון, אמור להופיע חסימת מצב שינה שפעילה למשך 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 שאנחנו הכי מתלהבים מהם הוא הכלי לבחירת אנשי קשר. ההרשאה מאפשרת לאפליקציית אינטרנט לגשת לאנשי הקשר ממנהל אנשי הקשר המקורי של המכשיר, כך שלאפליקציית האינטרנט תהיה גישה לשמות, לכתובות האימייל ולמספרי הטלפון של אנשי הקשר. אתם יכולים לציין אם אתם רוצים רק איש קשר אחד או כמה אנשי קשר, ואם אתם רוצים את כל השדות או רק קבוצת משנה של שמות, כתובות אימייל ומספרי טלפון.
שיקולים בנושא פרטיות
אחרי שבורר אנשי הקשר נפתח, אפשר לבחור את אנשי הקשר שרוצים לשתף. שימו לב שאין אפשרות 'בחירת הכול'. זה נעשה בכוונה, כי אנחנו רוצים שהשיתוף יהיה החלטה מודעת. באופן דומה, הגישה לא רציפה, אלא מוגבלת להחלטה חד-פעמית.
גישה לאנשי הקשר
הגישה לאנשי הקשר היא פשוטה. לפני שבוחר אנשי הקשר נפתח, אפשר לציין אילו שדות רוצים (האפשרויות הן 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 האלה.
מומלץ גם לעיין לעיתים קרובות בדף הנחיתה בנושא יכולות. אנחנו נדאג לעדכן אותו, והוא כולל הפניות לכל המאמרים המפורטים בנושא ממשקי ה-API שאנחנו עובדים איתם. תמשיכו ליהנות!
תום וכל צוות היכולות 🐡