חדש ב-Chrome 68

Pete LePage

ויש עוד הרבה!

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

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

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 מרחיב את הגישה ל-Payment Request באמצעות הפעלה של אפליקציות תשלום מבוססות-אינטרנט שמאפשרות לבצע תשלומים ישירות מתוך ממשק 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' }
  }
});

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

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

ועוד.

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

  • כדי לנווט בתוכן שמוטמע ב-iframe נדרשת מחווה של המשתמש להעברת הקשר הגלישה ברמה העליונה למקור אחר.
  • החל מ-Chrome 1, התחילית של ערכי cursor של CSS בשביל grab ו-grabbing ב-CSS, ועכשיו אנחנו תומכים בערכים הרגילים ללא קידומת. לסיום.
  • וזה גדול מאוד! עכשיו, כשמבקשים עדכונים ל-Service Worker, המערכת מתעלמת ממטמון ה-HTTP, ולכן Chrome משולב במפרט ובדפדפנים אחרים.

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

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

להרשמה

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

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