חדש ב-Chrome 55

לצפייה ב-YouTube

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

ויש עוד המון.

שמי Pete LePage, ועכשיו המפתחים יכולים לגלות מה חדש ב-Chrome 55!

אירועי מצביע

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

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

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);
  }
}

לג'ייק יש פוסט מעולה: Async Functions – הבטחת הבטחות – עם כל הפרטים.

אחסון קבוע

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

מקף אוטומטי של CSS

מקף אוטומטי של CSS – אחת מתכונות הפריסה הנפוצות ביותר ב-Chrome נתמכת ב-Android וב-Mac.

Web Share API

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

סגירה

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

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

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