יכולות מעבדה של יכולות אינטרנט

יכולות אינטרנט

אנחנו רוצים לסגור את הפערים ביכולת שבין האינטרנט לגרסה המקורית, ולהקל על מפתחים ליצור חוויות מעולות באינטרנט הפתוח. אנחנו מאמינים שכל מפתח צריך לקבל גישה ליכולות הנדרשות כדי ליצור חוויית משתמש טובה באינטרנט, ואנחנו מחויבים לאינטרנט מתקדם יותר.

עם זאת, חלק מהיכולות – כמו גישה למערכת הקבצים וזיהוי מצב לא פעיל – זמינות במקור אבל לא זמינות באינטרנט. המשמעות של היכולות החסרות היא שסוגים מסוימים של אפליקציות לא ניתנים להצגה באינטרנט, או שהם פחות שימושיים.

אנחנו נעצב ונוסיף את היכולות החדשות האלה בצורה שקופה ופתוחה, באמצעות התהליכים הקיימים בתקנים של פלטפורמת האינטרנט הפתוחה, תוך קבלת משוב מוקדם ממפתחים ומספקי דפדפנים אחרים כשאנחנו חוזרים על תכנון כדי להבטיח שילוב הדדי.

מה תיצור

בשיעור Lab זה תשחקו עם מספר ממשקי API לאינטרנט שהם חדשים לגמרי או זמינים רק אחרי סימון. לכן, Lab Lab זה מתמקד בממשקי ה-API עצמם ובתרחישים לדוגמה שבהם ממשקי ה-API האלה מבטלים את הנעילה, ולא בונים מוצר ספציפי ספציפי.

מה תלמדו

מעבדת קוד זו תלמד את המנגנון הבסיסי של מספר ממשקי API מתקדמים. שימו לב שהמכניקות האלה לא מוגדרות עדיין באבן, ואנחנו מעריכים מאוד את המשוב שלכם לגבי תהליך הפיתוח.

מה תצטרך להכין

מכיוון שממשקי ה-API שמוצגים ב-Codelab הזה נמצאים ממש בקצה, הדרישות של כל API משתנות. חשוב לקרוא בעיון את פרטי התאימות בתחילת כל קטע.

איך ניגשים ל-Codelab

Codelab לא מיועד בהכרח לעבוד ברצף. כל קטע מייצג ממשק API עצמאי, לכן אל תהסס לבחור את הנושאים שמעניינים אותך ביותר.

המטרה של Tag API היא למשוך משתמשים' תשומת לב לדברים שמתרחשים ברקע. כדי לפשט את ההדגמה ב-Codelab הזה, צריך להשתמש ב-API כדי למשוך משתמשים ולגרום להם לבצע את הפעולה הרצויה. לאחר מכן תוכלו לבצע את ההעברה הנפשית לדברים שמתרחשים ברקע.

התקנת Airhorer

כדי ש-API זה יפעל, יש צורך באפליקציית PWA המותקנת במסך הבית. לכן, השלב הראשון הוא להתקין PWA, כמו airhorer.com, הידוע לשמצה בעולם. יש ללחוץ על לחצן ההתקנה בפינה השמאלית העליונה או להשתמש בתפריט שלוש הנקודות כדי להתקין באופן ידני.

תוצג הודעת אישור, לוחצים על התקנה.

עכשיו יש סמל חדש באביזר העגינה של מערכת ההפעלה. לוחצים עליו כדי להפעיל את ה-PWA. יהיה לה חלון אפליקציה משלו והוא יפעל במצב עצמאי.

הגדרת תג

עכשיו, כשאפליקציית PWA מותקנת, אתם צריכים נתונים מספריים (תגים יכולים לכלול מספרים בלבד) כדי להופיע בתג. דבר אחד שיש לספור ב"אוויר אוויר" הוא אנחות, מספר הפעמים שהוא קרס. למעשה, באמצעות אפליקציית לאשרן, אפשר לנסות לבצע קרן יער ולבדוק את התג. הפעולה הזו נספרת בכל פעם שקרן אחת קרן.

איך זה עובד? בעיקרון, הקוד הוא:

let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
  navigator.setExperimentalAppBadge(++hornCounter);
});

שומעים את קרן האוויר כמה פעמים ובודקים את הסמל של PWA&#39. היא תתעדכן בכל פעם. פעם אחת. קולות קרן אוויר. זה הכול.

ניקוי תג

הדלפק עולה ל-99 ולאחר מכן מתחיל מחדש. אפשר גם לאפס אותו באופן ידני. פותחים את הכרטיסייה DevTools Console, מדביקים את השורה למטה ומקישים על Enter. 

navigator.setExperimentalAppBadge(0);

לחלופין, אפשר גם להסיר את התג באופן מפורש על ידי הסרתו, כפי שמוצג בקטע הקוד הבא. הסמל של PWA' שלך אמור להיראות שוב כמו בהתחלה, ברור וללא תג.

navigator.clearExperimentalAppBadge();

משוב

מה חשבת על ה-API הזה? נשמח לקבל ממך תשובות לסקר הזה בקצרה:

האם ה-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 הזה היה אינטואיטיבי לשימוש?

כן לא

האם קיבלת את הדוגמה להרצה?

כן לא

רוצה לספר לנו עוד? האם היו חסרות תכונות? נשמח לקבל ממך משוב מהיר בסקר הזה. תודה!

ממשק ה-API לזיהוי צורות מספק גישה לגלאי צורה מואצת (למשל, לפנים אנושיים) והוא פועל על תמונות סטילס ו/או על פידים של תמונות בשידור חי. למערכות ההפעלה יש מזהי תכונות בעלי ביצועים אופטימליים, כמו FaceIdentifier ל-Android. ה-Forms Detection API פותח את ההטמעות המקוריות האלה וחושף אותן דרך קבוצה של ממשקי JavaScript.

בשלב זה, התכונות הנתמכות הן זיהוי פנים דרך הממשק FaceDetector, זיהוי ברקוד דרך הממשק BarcodeDetector וזיהוי טקסט (זיהוי תווים אופטי) דרך הממשק TextDetector.

זיהוי פנים

תכונה מרתקת של Forms 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);
  }
});

זיהוי ברקוד

התכונה השנייה של form Detect API היא זיהוי ברקוד. בדומה לדף הקודם, אנחנו צריכים דף עם ברקודים, כמו העמוד הזה. כשפותחים את הדפדפן בדפדפן, מופיעים קודי ה-QR השונים. מבצעים רמיקס או עורכים את פרויקט Glick, במיוחד את הקובץ script.js כדי לראות את הביצועים שלו.

אם ברצונך משהו דינמי יותר, נוכל להשתמש שוב בחיפוש התמונות של Google. הפעם בדפדפן עוברים לדף תוצאות החיפוש של Google בכרטיסייה פרטית או במצב אורח. עכשיו מדביקים את קטע הקוד למטה בכרטיסייה Chrome Developer 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);
  }
});

זיהוי טקסט

התכונה האחרונה של Forms Detection API היא זיהוי טקסט. בשלב זה כבר ידוע לך התרגול: אנחנו צריכים דף שמכיל תמונות שמכילות טקסט, כמו הדף הזה עם תוצאות הסריקה של Google Books. בדפדפנים נתמכים יופיע הטקסט שזוהתה ותיבת התווי מוקפת מעברי טקסט. מבצעים רמיקס או עורכים את פרויקט Glick, במיוחד את הקובץ script.js כדי לראות את הביצועים שלו.

כדי לבדוק זאת באופן דינמי, עוברים אל דף תוצאות החיפוש בכרטיסייה פרטית או במצב אורח. עכשיו מדביקים את קטע הקוד למטה בכרטיסייה Chrome Developer 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 הזה היה אינטואיטיבי לשימוש?

כן לא

האם קיבלת את הדוגמה להרצה?

כן לא

רוצה לספר לנו עוד? האם היו חסרות תכונות? נשמח לקבל ממך משוב מהיר בסקר הזה. תודה!

ממשק ה-API של שיתוף באינטרנט מאפשר לאפליקציות אינטרנט מותקנות להירשם במערכת ההפעלה הבסיסית כיעד שיתוף, כדי לקבל תוכן משותף מה-API של שיתוף אינטרנט או מאירועי מערכת, כמו לחצן השיתוף ברמת מערכת ההפעלה.

התקנת PWA לשיתוף

בשלב הראשון, נדרש נכס PWA שאפשר לשתף איתו. הפעם איירורן (בהצלחה) לא תבצע את העבודה, אבל אפליקציית ההדגמה של שיתוף אינטרנט נותנת לכם גב. מתקינים את האפליקציה במסך הבית של המכשיר.

שיתוף פריט ל-PWA

בשלב הבא, צריך לשתף משהו, כמו תמונה מ-Google Photos. לוחצים על הלחצן 'שיתוף' ובוחרים את ה-Pascbook - PWA בתור יעד לשיתוף.

כשמקישים על סמל האפליקציה, מגיעים ישירות אל ה-PWA של האלבום התמונתי, והתמונה נמצאת שם ישירות.

איך זה עובד? כדי לגלות זאת, יש לעיין במניפסט של אפליקציית האינטרנט ב-Scrabook PWA. התצורה כך שממשק ה-API של שיתוף אינטרנט יהיה זמין בנכס "share_target" במניפסט שבשדה "action" שלו מפנה לכתובת URL המקושטת בפרמטרים המפורטים ב-"params".

הצד השיתוף מאכלס את תבנית כתובת ה-URL הזו בהתאם ((באמצעות פעולת שיתוף או בשליטה פרוגרמטית של המפתח באמצעות ה-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, תחילה צריך לוודא שהמכשיר עובר למצב שינה. לכן, בחלונית ההעדפות של מערכת ההפעלה, מפעילים שומר מסך לבחירתכם ומוודאים שהוא מתחיל אחרי דקה. מוודאים שהוא פועל כהלכה – פשוט משאירים את המכשיר ריק למשך הזמן הזה (כן, זה באמת כואב). צילומי המסך שבהמשך מציגים את macOS, אבל אפשר לנסות זאת גם במכשיר ה-Android הנייד או בכל פלטפורמת מחשב נתמכת.

להגדרת נעילת מסך במסך

עכשיו, כשאתם יודעים ששומר המסך שלכם פועל, אתם יכולים להשתמש בנעילת מצב שינה מסוג "screen" כדי למנוע משומר המסך לבצע את העבודה שלו. עוברים אל אפליקציית החסימות של מצב שינה ולוחצים על תיבת הסימון הפעלה screen נעילת מצב שינה.

מהרגע הזה תוצג חסימות מצב שינה פעילות. אם סבלתם מספיק כדי להשאיר את המכשיר במכשיר ללא מגע למשך דקה, תראו ששומר המסך אכן לא התחיל.

איך זה עובד? כדי לגלות זאת, יש לעבור אל פרויקט התקלה באפליקציית ההדגמה של 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 הזה היה אינטואיטיבי לשימוש?

כן לא

האם קיבלת את הדוגמה להרצה?

כן לא

רוצה לספר לנו עוד? האם היו חסרות תכונות? נשמח לקבל ממך משוב מהיר בסקר הזה. תודה!

ממשק API שמלהיב אותנו מאוד הוא ה-API של ליצירת קשר. היא מאפשרת לאפליקציית אינטרנט לגשת לאנשי הקשר מחשבון הניהול של המכשיר, כך שלאפליקציית האינטרנט יש גישה לאנשי הקשר, לשמות, לכתובות האימייל ולמספרי הטלפון שלך. אתם יכולים לציין אם אתם רוצים רק איש קשר אחד או כמה אנשי קשר, ואם אתם רוצים את כל השדות או רק קבוצת משנה של שמות, כתובות אימייל ומספרי טלפון.

שיקולים הקשורים לפרטיות

אחרי שהבורר ייפתח, תוכלו לבחור את אנשי הקשר שתרצו לשתף. שימו לב לכך שלא קיימת אפשרות "select all" והיא מכוונת: אנחנו רוצים לקבל החלטה מושכלת. באופן דומה, הגישה אינה רציפה, אלא החלטה חד-פעמית.

גישה לאנשי קשר

גישה לאנשי קשר היא משימה פשוטה. לפני שהבורר ייפתח, תוכלו לציין מהם השדות הרצויים (האפשרויות הן 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 של לוח האסינכרוני תומך בהעתקה ובהדבקה של טקסט. אפשר להעתיק טקסט ללוח על ידי קריאה ל-()ggator.clipboard.WriteText

העתקה והדבקה של תמונות

עכשיו תוכלו גם לכתוב תמונות ללוח. כדי לבצע את הפעולה הזו, צריך להעלות את נתוני התמונה כ-blob, לאחר מכן אפשר להעביר אותם לבנייה של פריט הלוח. לבסוף, תוכלו להעתיק את הפריט שבלוח על ידי קריאה לכתובת ()ggator.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 הזה מופיע באפליקציית ההדגמה, וקטעי הקוד הרלוונטיים מקוד המקור שלו מוטמעים למעלה. ניתן להעתיק תמונות ללוח ללא הרשאה, אך עליך להעניק גישה להדבקה מהלוח.

אחרי שמעניקים גישה, אפשר לקרוא את התמונה מהלוח ולהדביק אותה באפליקציה:

כל הכבוד, הגעתם לסוף של שיעור הקוד. שוב, זוהי תזכורת לכך שרוב ממשקי ה-API עדיין נמצאים בתהליך עבודה פעיל. לכן, הצוות מאוד מעריך את המשוב שלכם, מאחר שרק אינטראקציה עם אנשים כמו אתם תעזור לנו לקבל את ממשקי ה-API האלה בצורה נכונה.

כמו כן, מומלץ לעיין בדף הקיבולת שלנו. נעדכן אתכם בכל שאלה לגבי כל ממשקי ה-API המעמיקים שעליהם אנחנו עובדים. אין בעיה!

טום וכל צוות היכולות 🐡