חדש ב-Chrome 68

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

ויש עוד עוד המון!

שמי Pete LePage. בואו נראה מה חדש למפתחים ב-Chrome 68.

רוצה לקבל את רשימת השינויים המלאה? כדאי לעיין ברשימת השינויים במאגרי המקור ב-Chromium.

הוספה למסך הבית של שינויים

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

כדי לבקש מהמשתמש אישור, מקשיבים לאירוע beforeinstallprompt, שומרים את האירוע ומוסיפים לאפליקציה לחצן או רכיב אחר בממשק המשתמש כדי לציין שאפשר להתקין אותו.

let installPromptEvent;

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

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


btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(handleInstall);
});

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

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

ממשק API למחזור חיים של דף

כשלמשתמש יש מספר גדול של כרטיסיות פועלות, יכול להיות שמשאבים קריטיים כמו זיכרון, מעבד (CPU), סוללה והרשת עלולים להירשם יתר על המידה, והדבר עלול לפגוע בחוויית המשתמש.

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

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

const prepareForFreeze = () => {
  // Close any open IndexedDB connections.
  // Release any web locks.
  // Stop timers or polling.
};
const reInitializeApp = () => {
  // Restore IndexedDB connections.
  // Re-acquire any needed web locks.
  // Restart timers or polling.
};
document.addEventListener('freeze', prepareForFreeze);
document.addEventListener('resume', reInitializeApp);

קראו את הפוסט של פיל Page Lifecycle API לקבלת הרבה פרטים נוספים, כולל דוגמאות קוד, טיפים ועוד. תוכלו למצוא את הspec ואת מסמך ההסבר ב-GitHub.

ממשק ה-API של Payment Handler

ה-Payment Request API הוא דרך סטנדרטית ופתוחה לקבלת תשלומים. ה-Payment Handler API מרחיב את טווח ההגעה של בקשת תשלום על ידי הפעלה של אפליקציות תשלומים מבוססות-אינטרנט שמאפשרות לבצע תשלומים ישירות מתוך האפליקציה Payment Request.

אם אתם מפיצים, תוכלו להוסיף אפליקציית תשלומים מבוססת-אינטרנט קיימת בקלות, ממש כמו להוסיף רשומה לנכס supportedMethods.

const request = new PaymentRequest([{
  // Your custom payment method identifier comes here
  supportedMethods: 'https://bobpay.xyz/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

אם מותקן קובץ שירות (service worker) שמטפל באמצעי התשלום שצוין, הוא יופיע בממשק המשתמש של Payment Request והמשתמש יכול לשלם באמצעותו.

לאיג'י יש פוסט מעולה שמראה איך להטמיע את התכונה הזו באתרים של מוכרים ובמטפלי תשלומים.

ועוד!

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

חדש בכלי הפיתוח

הקפידו לצפות בקטע חדש בכלי הפיתוח ל-Chrome, כדי לראות מה חדש ב'כלי הפיתוח' ב-Chrome 68.

הרשמה

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

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