חדש ב-Chrome 68

Pete LePage

ויש עוד הרבה!

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

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

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

Page Lifecycle API

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

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

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

Payment Handler API

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

מוכרים יכולים להוסיף אפליקציית תשלום מבוססת-אינטרנט קיימת בקלות, על ידי הוספת רשומה לנכס 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' }
  }
});

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

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

ועוד.

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

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

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

להרשמה

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

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