שיפור לסגירת דף ב-XMLHttpRequest() סינכרוני

צמצום זמן האחזור של ניווטים

Joe Medley
Joe Medley

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

צריך לשנות את השיטה הזו, והדפדפנים מגיבים. המפרט של XMLHttpRequest() כבר נקבע להוצאה משימוש ולהסרה. ב-Chrome 80 נעשה הצעד הראשון, ומונעים שימוש בקריאות סינכרוניות בתוך כמה פונקציות טיפול באירועים, במיוחד beforeunload,‏ unload,‏ pagehide ו-visibilitychange, כשהן מופעלות בזמן הסגירה. ב-WebKit גם פורסם לאחרונה התחייבות להטמעת אותו שינוי התנהגות.

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

ביטולי הסכמה זמניים

אנחנו לא רוצים להפסיק את השימוש ב-XMLHttpRequest(), ולכן יש כמה אפשרויות זמניות להפסקת השימוש. לאתרים באינטרנט, זמינה תקופת ניסיון במקור. כך מוסיפים אסימון ספציפי למקור לכותרות הדפים, שמאפשר קריאות XMLHttpRequest() סינכרוניות. האפשרות הזו תסתיים זמן קצר לפני השקת Chrome 89, מתישהו במרץ 2021. לקוחות Chrome Enterprise יכולים גם להשתמש בדגל המדיניות AllowSyncXHRInPageDismissal, שייפסק באותו זמן.

אפשרויות אחרות

לא משנה איך שולחים נתונים חזרה לשרת, עדיף לא להמתין עד שהדף פורק כדי לשלוח את כל הנתונים בבת אחת. בנוסף ליצירת חוויית משתמש גרועה, פעולת ההורדה לא מהימנה בדפדפנים מודרניים, ויש סיכון לאובדן נתונים אם משהו משתבש. באופן ספציפי, אירועי הסרה של נתונים שנטענו לרוב לא מופעלים בדפדפנים לנייד כי יש דרכים רבות לסגור כרטיסייה או דפדפן במערכות הפעלה לנייד בלי שהאירוע unload יופעל. ב-XMLHttpRequest(), השימוש במטענים ייעודיים (payloads) קטנים היה בחירה. עכשיו זה נדרש. שתי החלופות האלה כוללות מגבלה של 64 KB להעלאה לכל הקשר, כנדרש במפרט.

אחזור הודעת keep-alive

Fetch API מספק אמצעי חזק לטיפול באינטראקציות עם שרתים וממשק עקבי לשימוש בממשקי API שונים של פלטפורמות. אחת מהאפשרויות היא keepalive, שמבטיחה שהבקשה תמשיך גם אם הדף שהיא נשלחה ממנו נשאר פתוח וגם אם לא:

window.addEventListener('unload', {
  fetch
('/siteAnalytics', {
    method
: 'POST',
    body
: getStatistics(),
    keepalive
: true
 
});
}

השיטה fetch() מאפשרת שליטה רבה יותר על מה שנשלח לשרת. מה שלא מוצג בדוגמה הוא ש-fetch() מחזיר גם הבטחה שמתקבלת עם אובייקט Response. מכיוון שאני מנסה לא להפריע לפריקה של הדף, בחרתי לא לעשות איתו שום דבר.

SendBeacon()

למעשה, SendBeacon() משתמש ב-Fetch API ברקע, ולכן יש לו את אותה הגבלה של 64KB לעומס המועמס, והוא גם מבטיח שהבקשה תמשיך אחרי פריקת הדף. היתרון העיקרי שלו הוא הפשטות. הוא מאפשר לשלוח את הנתונים באמצעות שורת קוד אחת:

window.addEventListener('unload', {
  navigator
.sendBeacon('/siteAnalytics', getStatistics());
}

סיכום

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

תמונה של Matthew Hamilton ב-Unsplash