חדש ב-Chrome 102

Pete LePage

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

  • אפליקציות PWA מותקנות יכולות להירשם כרכיבי handler לקבצים, וכך המשתמשים יכולים לפתוח קבצים בקלות ישירות מהדיסק.
  • המאפיין 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.