דף זה תורגם על ידי Cloud Translation API.

חדש ב-Chrome 86

Pete LePage

אנחנו מתחילים להשיק את Chrome 86 בגרסה היציבה.

דברים שעליך לדעת:

File System Access API זמין עכשיו בגרסה יציבה.
יש תוכניות ניסיון חדשות למקורות של Web HID ושל Multi-screen Window Placement API.
יש כמה דברים חדשים ב-CSS והרבה יותר.

קוראים לי Pete LePage ואני עובד ומצלם מהבית. עכשיו נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 86.

גישה למערכת קבצים

נכון לעכשיו, אפשר להשתמש ברכיב <input type="file"> כדי לקרוא קובץ מהדיסק. כדי לשמור את השינויים, מוסיפים את הערך download לתג עוגן. כך יוצג בורר הקבצים, ולאחר מכן הקובץ יישמר. אי אפשר לכתוב באותו הקובץ שפתחתם. תהליך העבודה הזה מעצבן.

באמצעות File System Access API (לשעבר Native File System API), שעבר את תקופת הניסיון המקורית ועכשיו זמין בגרסה יציבה, אפשר להפעיל את showOpenFilePicker(), שמציג בורר קבצים ולאחר מכן מחזיר מאגר קובץ שאפשר להשתמש בו כדי לקרוא את הקובץ.

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

כדי לשמור קובץ בדיסק, אפשר להשתמש במזהה הקובץ שקיבלת מקודם או לבצע קריאה ל-showSaveFilePicker() כדי לקבל מזהה קובץ חדש.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}

צילום מסך של בקשת הרשאה — הצגת בקשה למשתמש להעניק הרשאה לכתיבה בקובץ.

לפני הכתיבה, Chrome יבדוק אם המשתמש העניק הרשאת כתיבה. אם לא העניק הרשאת כתיבה, Chrome יבקש מהמשתמש להעניק אותה.

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

ל-API יש הרבה תכונות נוספות, לכן מומלץ לעיין במאמר בנושא גישה למערכת הקבצים באתר web.dev.

גרסת מקור לניסיון: WebHID

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

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

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

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

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

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

גרסת מקור לניסיון: Multi-Screen Window Placement API

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

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

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

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

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

אחרי שהמשתמש מעניק הרשאה, קריאה ל-window.getScreens() מחזירה הבטחה שמתקבלת ממנה מערך של אובייקטים מסוג Screen.

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

לאחר מכן אוכל להשתמש במידע הזה כשאקרא ל-requestFullScreen() או כשאציב חלונות חדשים. כל הפרטים מפורטים במאמר של Tom בנושא ניהול כמה מסכים באמצעות Multi-Screen Window Placement API באתר web.dev.

ועוד

סלקטור ה-CSS החדש, :focus-visible, מאפשר לכם להביע הסכמה לאותה שיטת ניתוח (heuristic) שבה הדפדפן משתמש כשהוא מחליט אם להציג את אינדיקטור המיקוד שמוגדר כברירת מחדל.

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

אפשר להתאים אישית את הצבע, הגודל או הסוג של המספר או התגול ברשימה באמצעות רכיב ה-CSS ::marker.

li::marker {
  content: '😍';
}
li:last-child::marker {
  content: '🤯';
}

בנוסף, כנס Chrome Dev Summit יגיע למסך בקרבת מקום, אז כדאי לעקוב אחרי הערוץ שלנו ב-YouTube כדי לקבל מידע נוסף.

קריאה נוספת

כאן מפורטות רק חלק מהנקודות העיקריות. בקישור שבהמשך מפורטים שינויים נוספים ב-Chrome 86.

רוצים להתעדכן בסרטונים שלנו? נרשמים לערוץ YouTube של מפתחי Chrome, ומקבלים התראה באימייל בכל פעם שאנחנו משיקים סרטון חדש. אפשר גם להוסיף את פיד ה-RSS שלנו לקורא הפיד.

קוראים לי פיט לייפיי (Pete LePage), ואחרי שגרסת Chrome 87 תפורסם, אספר לכם מה חדש ב-Chrome.