חדש ב-Chrome 86

פיט לפייג'
פיט לה פייג'
Twitter GitHub Glitch Mastodon דף הבית

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

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

אני 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);
});

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

בוחר מכשירי ממשק אנושי (HID)
בוחר התקני HID.

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

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


גרסת מקור לניסיון: ממשק 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 Windows Placement 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 לקורא הפידים.

אני פיט לה פייג', וברגע שגרסת Chrome 87 תושק, אני אהיה כאן כדי לספר לכם מה חדש ב-Chrome!