חדש ב-Chrome 76

פיט לפייג'
פיט לה פייג'
Twitter GitHub Glitch Mastodon דף הבית

ב-Chrome 76 הוספנו תמיכה עבור:

שמי Pete LePage. עכשיו הגיע הזמן לצלול לעומק כדי לראות מה חדש למפתחים ב-Chrome 76!

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

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

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

פרטים נוספים זמינים במאמר התקנה של סרגל הכתובות ל-Progressive Web Apps במחשב.


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

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

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

החל מגרסה 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 App.

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

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

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

לפרטים מלאים, אפשר לעיין במאמר עדכון של חבילות WebAPK בתדירות גבוהה יותר.

מצב כהה

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

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

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

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

ועוד!

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

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(). לכן, כבר לא צריך ליצור wrapper מסביב לקורא קבצים!

// 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, ועכשיו אפשר להעתיק ולהדביק תמונות בקלות באופן פרוגרמטי.

קריאה נוספת

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

הרשמה

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

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