חדש ב-Chrome 76

Pete LePage

בגרסה 76 של Chrome הוספנו תמיכה באפשרויות הבאות:

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

לחצן ההתקנה של סרגל הכתובות לאפליקציות PWA

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

אם האתר שלכם עומד בקריטריונים להתקנה של Progressive Web App, בסרגל הכתובות ב-Chrome יוצג לחצן התקנה שמציין למשתמש שאפשר להתקין את ה-PWA. אם המשתמש לוחץ על לחצן ההתקנה, זה בעצם כמו קריאה ל-prompt() באירוע beforeinstallprompt. המערכת מציגה את תיבת הדו-שיח להתקנה, ומאפשרת למשתמש להתקין בקלות את אפליקציית ה-PWA.

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


שליטה רבה יותר בסרגל המידע המינימלי של אפליקציות ה-PWA

דוגמה לסרגל המידע המינימלי של 'הוספה למסך הבית' באפליקציית AirHorner

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

החל מגרסה 76 של Chrome, קריאה ל-preventDefault() באירוע beforeinstallprompt תמנע את ההצגה של סרגל המידע המינימלי.

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

חשוב לעדכן את ממשק המשתמש – כדי שהמשתמשים ידעו שאפשר להתקין את ה-PWA. במאמר דפוסים לקידום התקנת PWA תוכלו למצוא שיטות מומלצות לקידום ההתקנה של Progressive Web Apps.

עדכונים מהירים יותר לחבילות WebAPK

כשמתקינים Progressive Web App ב-Android, דפדפן Chrome מבקש ומתקין Web APK באופן אוטומטי. לאחר ההתקנה, Chrome בודק מדי פעם אם המניפסט של אפליקציית האינטרנט השתנה, יכול להיות שעדכנתם את הסמלים, הצבעים או ששיניתם את שם האפליקציה כדי לבדוק אם יש צורך ב-WebAPK חדש.

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

פרטים מלאים זמינים במאמר עדכון WebAPKs בתדירות גבוהה יותר.

מצב כהה

הרבה מערכות הפעלה תומכות עכשיו במצב כהה או בעיצוב כהה.

שאילתה המדיה prefers-color-scheme מאפשרת לכם לשנות את המראה והתחושה של האתר כך שיתאים למצב המועדף על המשתמש.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

טום כתב מאמר מעולה בנושא Hello darkness, my old friend ב-web.dev, שבו מוסבר כל מה שצריך לדעת, וגם טיפים לתכנון גיליונות סגנונות שתומכים גם במצב בהיר וגם במצב כהה.

ועוד.

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

Promise.allSettled()

אני אישית מאוד מתרגש מ-Promise.allSettled(). הפונקציה דומה ל-Promise.all(), אלא שהיא ממתינה עד שכל ההבטחות ימולאו לפני שהיא מחזירה תשובה.

const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.

await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).

קל יותר לקרוא blobs

קל יותר לקרוא קבצים מסוג Blob באמצעות שלוש שיטות חדשות: text(),‏ arrayBuffer() ו-stream(). כלומר, אין יותר צורך ליצור מעטפת סביב קורא הקבצים.

// New easier way
const text = await blob.text();
const aBuff = await blob.arrayBuffer();
const stream = await blob.stream();

// Old, wrapped reader
return new Promise((resolve) => {
  const reader = new FileReader();
  reader.addEventListener('loadend', (e) => {
    const text = e.srcElement.result;
    resolve(text);
  });
  reader.readAsText(file);
});

תמיכה בתמונות ב-API האסינכרוני של הלוח

הוספנו תמיכה בתמונות ל-Asynchronous Clipboard API, כך שקל להעתיק ולהדביק תמונות באופן פרוגרמטי.

קריאה נוספת

זוהי רק רשימה חלקית של השינויים העיקריים. בקישורים שבהמשך מפורטים שינויים נוספים בגרסה 76 של Chrome.

להרשמה

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

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