חדש ב-Chrome 55

Pete LePage

צפייה ב-YouTube

• async ו-await מאפשרים לכתוב קוד מבוסס-הבטחה כאילו הוא סינכרוני, אבל בלי לחסום את ה-thread הראשי.
• אירועי סמן מספקים דרך אחידה לטיפול בכל אירועי הקלט.
• לאתרים שמתווספים למסך הבית ניתנת באופן אוטומטי ההרשאה אחסון מתמיד.

ויש עוד הרבה דברים.

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

אירועי מצביע

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

אירועי מגע הם נהדרים, אבל כדי לתמוך במגע ובעכבר, צריך לתמוך בשני מודלים של אירועים:

elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);

Chrome מאפשר עכשיו טיפול מאוחד בקלט על ידי שליחת PointerEvents:

elem.addEventListener('pointermove', pointerMoveEvent);

אירועי סמן מאחדים את מודל הקלט של הסמן בדפדפן, ומקבצים יחד אירועים של מגע, עטים ועכברים לקבוצה אחת של אירועים. הם נתמכים ב-IE11,‏ Edge,‏ Chrome,‏ Opera, ויש תמיכה חלקית ב-Firefox.

פרטים נוספים זמינים במאמר הדרך הנכונה.

async וגם await

לפעמים קשה להבין את ההתנהגות של JavaScript לא סנכרוני. הנה הפונקציה הזו עם כל הקריאות החוזרות ה"מקסימות" שלה:

function logFetch(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      } else {
        console.error('xhr failed', xhr.statusText);
      }
    }
  };
  xhr.onerror = function (e) {
    console.error(xhr.statusText);
  };
  xhr.open('GET', url);
  xhr.send();
}

כתיבת מחדש עם promises עוזרת למנוע את בעיית ההטמעה:

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}

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

Chrome תומך עכשיו במילות המפתח של JavaScript‏ async ו-await, שמאפשרות לכתוב קוד JavaScript שמבוסס על Promise, שיכול להיות מובנה וקריאה כמו קוד סינכרוני.

במקום זאת, אפשר לפשט את הפונקציה האסינכרונית כך:

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

בפוסט מעולה של ג'ייק מוסבר בהרחבה על פונקציות אסינכררוניות – איך להפוך הבטחות לידידותיות.

אחסון מתמיד

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

if (navigator.storage && navigator.storage.persist) {
  navigator.storage.persist().then(granted => {
    if (granted)
      alert("Storage will not be cleared except by explicit user action");
    else
      alert("Storage may be cleared by the UA under storage pressure.");
  });
}

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

במאמר Persistent Storage של Chris Wilson מפורט מידע מלא על אחסון מתמיד, וגם מוסבר איך לבקש אחסון מתמיד לאתר.

סימון מקפים אוטומטי ב-CSS

הוספת מקפים אוטומטית ב-CSS, אחת מתכונות הפריסה הנפוצות ביותר ב-Chrome, נתמכת עכשיו ב-Android וב-Mac.

Web Share API

לבסוף, עכשיו קל יותר להפעיל יכולות שיתוף מקוריות באמצעות Web Share API החדש, שזמין כגרסת טרום-השקה. כל הפרטים מופיעים בפוסט של פול (Mr. Web Intents) קינלן בנושא שיתוף ב-Navigator.

סגירה

אלה רק כמה מהשינויים ב-Chrome 55 למפתחים.

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

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