חדש ב-Chrome 102

Pete LePage

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

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

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

File Handling API

ה-API לטיפול בקבצים מאפשר ל-PWAs מותקנות להירשם למערכת ההפעלה כ-file 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);
  }
});

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

הנכס 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.

פרטים נוספים זמינים במאמר מידע על inert.

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

כדי להשתמש ב-Navigation 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;
  }
});

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

במאמר ניתוב מודרני בצד הלקוח: Navigation API מפורטים פרטים מלאים ודמו שאפשר לנסות.

ועוד.

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

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

קריאה נוספת

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

להרשמה

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

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