ב-Chrome 76 הוספנו תמיכה עבור:
prefers-color-scheme
שאילתת מדיה, להצגת מצב כהה לאתרים.- לחצן התקנה בסרגל הכתובות שמפשט את ההתקנה של Progressive Web Apps בשולחן העבודה.
- מניעת הצגה של מיני-סרגל המידע באפליקציות Progressive Web App בנייד.
- עדכונים של חבילות WebAPK תכופים יותר.
- והרבה עוד.
שמי Pete LePage. עכשיו הגיע הזמן לצלול לעומק כדי לראות מה חדש למפתחים ב-Chrome 76!
לחצן להתקנת סרגל הכתובות של PWA
ב-Chrome 76 קל יותר למשתמשים להתקין אפליקציות מסוג Progressive Web App במחשב, על ידי הוספת לחצן התקנה לסרגל הכתובות.
אם האתר שלכם עומד בקריטריונים להתקנה של אפליקציות Progressive Web App, יוצג ב-Chrome לחצן התקנה בסרגל הכתובות, שמציין למשתמש שאפשר להתקין את ה-PWA. אם המשתמש לוחץ על לחצן ההתקנה, הפעולה הזו דומה לקריאה ל-prompt()
באירוע beforeinstallprompt
.
כאן מוצגת תיבת הדו-שיח של ההתקנה, וכך קל למשתמש להתקין את ה-PWA.
פרטים נוספים זמינים במאמר התקנה של סרגל הכתובות ל-Progressive Web Apps במחשב.
יותר שליטה במיני-סרגל המידע של PWA
בנייד, 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.
- מה חדש בכלי הפיתוח ל-Chrome (76)
- הוצאה משימוש והסרה של Chrome 76
- עדכונים ל-ChromeStatus.com עבור Chrome 76
- מה חדש ב-JavaScript ב-Chrome 76
- רשימת שינויים במאגרי המקור ב-Chromium
הרשמה
רוצים להתעדכן בסרטונים שלנו? נרשמים לערוץ YouTube של מפתחי Chrome ומקבלים התראה באימייל בכל פעם שנשיק סרטון חדש.
אני פיט לה פייג', וברגע שגרסת Chrome 77 תושק, אני אהיה כאן כדי לספר לכם מה חדש ב-Chrome!