חדש ב-Chrome 102

Pete LePage

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

  • אפליקציות PWA שהותקנו יכולות להירשם כרכיבי handler של קבצים, וכך למשתמשים קל לפתוח קבצים ישירות מהדיסק.
  • המאפיין inert מאפשר לסמן חלקים מה-DOM כקבועים.
  • ה-Navigation API מקל על אפליקציות בדף יחיד לטפל בניווט ובעדכונים לכתובת ה-URL
  • ויש הרבה עוד.

שמי Pete LePage. בואו נראה מה חדש למפתחים ב-Chrome 102.

File Handling API

ה-API לטיפול בקבצים מאפשר לרישום אפליקציות PWA שהותקנו במערכת ההפעלה כ-handler של קבצים. לאחר ההרשמה, משתמש יכול ללחוץ על קובץ כדי לפתוח אותו עם ה-PWA המותקן. האפשרות הזו מתאימה במיוחד לאפליקציות PWA שמקיימות אינטראקציה עם קבצים, כמו עורכי תמונות, סביבות פיתוח משולבות (IDE), עורכי טקסט וכו'.

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

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

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

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

לפרטים נוספים, ראו את המאמר אפשר לאפליקציות אינטרנט מותקנות להיות רכיבי handler של קבצים.

הנכס inert

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

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

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

כאן, הוצהר על inert ברכיב <div> השני, כך שכל התוכן שנכלל בו, כולל <button> ו-<label>, לא יכול לקבל מיקוד או ללחוץ עליו.

יש תמיכה ב-inert ב-Chrome בגרסה 102, והוא מגיע גם ל-Firefox וגם ל-Safari.

פרטים נוספים זמינים במאמר חדש: אינרטי.

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

כדי להשתמש ב-API של הניווט, מוסיפים האזנה ל-navigate באובייקט navigation הגלובלי.

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

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

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

ופעולות נוספות.

כמובן שיש עוד המון אפשרויות.

  • המטרה של ממשק Sanitizer API החדש היא לבנות מעבד חזק למחרוזות שרירותיות שניתן להוסיף לדף בצורה בטוחה.
  • המאפיין hidden=until-found מאפשר לדפדפן לחפש טקסט באזורים מוסתרים, ולחשוף את הקטע הזה אם נמצאה התאמה.

קריאה נוספת

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

להרשמה

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

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