דף זה תורגם על ידי 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, שזמין עכשיו כגרסת מקור לניסיון, מספק דרך לגשת למכשירים האלה ב-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
// }

Multi-Screen window Location 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() או כשאציב חלונות חדשים. כל הפרטים מפורטים במאמר של טום בנושא ניהול כמה מסכים באמצעות Multi-Screen Window Placement API באתר web.dev.

ועוד

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

/* 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);
}

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

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

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

קריאה נוספת

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

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

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