שימוש בממשק ה-API של חשיפת דף

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

Ernest Delgado

מבוא

כמפתחי אתרים, אנחנו מתלהבים מטכנולוגיות חדשות שמאפשרות לנו ליצור דפי אינטרנט אינטראקטיביים ומעניינים יותר מאי פעם. גרפיקה תלת-ממדית עם WebGL? בהחלט. יכולות אודיו מתקדמות באמצעות WebAudio? בטח. אפליקציות לשיתוף פעולה בזמן אמת שמשתמשות במצלמת האינטרנט ובמיקרופון? רשום אותי!

פחות מלהיבות, אבל חשובות באותה מידה, הן הטכנולוגיות שמאפשרות לנו לפתח אפליקציות שפועלות ביעילות רבה יותר ומספקות חוויית משתמש טובה יותר באופן כללי. כאן נכנס לתמונה ממשק API כמו PageVisibility.

Page Visibility API מבצע פונקציה פשוטה אבל חשובה – הוא מאפשר לאפליקציה לדעת מתי דף גלוי למשתמש. פריט המידע הבסיסי הזה מאפשר ליצור דפי אינטרנט שמתנהגים בצורה שונה כשהם לא מוצגים. ריכזנו כאן כמה דוגמאות:

• דף אינטרנט שאוחזר ממנו מידע מהשרת יכול להאט את מחזור העדכונים שלו כשלא צופים בו באופן פעיל
• דף שבו מוצג קרוסלה של תמונות מסתובבות או תוכן וידאו/אודיו יכול להשהות את הפעולה עד שהמשתמש יציג את הדף שוב
• אפליקציה יכולה להחליט להציג התראות למשתמש רק כשהיא מוסתרת מהעין

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

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

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

מאפייני הרשאות הגישה למסמכים

בגרסה הנוכחית של מפרט PageVisibilityAPI מוגדרים שני מאפייני מסמך: המאפיין הבוליאני hidden והמאפיין המנומר visibilityState. כרגע יש למאפיין visibilityState ארבעה ערכים אפשריים: hidden,‏ visible,‏ prerender ו-unloaded.

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

טיפול בתחיליות של ספקים

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

function getHiddenProp(){
    var prefixes = ['webkit','moz','ms','o'];

    // if 'hidden' is natively supported just return it
    if ('hidden' in document) return 'hidden';

    // otherwise loop over all the known prefixes until we find one
    for (var i = 0; i < prefixes.length; i++){
        if ((prefixes[i] + 'Hidden') in document)
            return prefixes[i] + 'Hidden';
    }

    // otherwise it's not supported
    return null;
}

דוגמה למאפייני מסמך

עכשיו אפשר לכתוב פונקציה isHidden() שתעבוד בכל הדפדפנים כדי לבדוק אם המסמך גלוי.

function isHidden() {
    var prop = getHiddenProp();
    if (!prop) return false;

    return document[prop];
}

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

• hidden: המסמך מוסתר לחלוטין
• visible: המסמך גלוי לפחות חלקית במכשיר תצוגה אחד לפחות
• prerender: המסמך נטען מחוץ למסך ולא גלוי (הערך הזה הוא אופציונלי. לא בטוח שכל הדפדפנים יתמכו בו)
• unloaded: אם המסמך יוסר מהאחסון, הערך הזה יוחזר (הערך הזה הוא אופציונלי, ולא בטוח שכל הדפדפנים יתמכו בו)

האירוע VisibilityChange

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

דוגמה לאירוע

// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp) {
  var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
  document.addEventListener(evtname, visChange);
}

function visChange() {
   var txtFld = document.getElementById('visChangeText');

   if (txtFld) {
      if (isHidden())
         txtFld.value += "Tab Hidden!\n";
      else
         txtFld.value += "Tab Visible!\n";
   }
}

סיכום

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

מקורות מידע חיצוניים

• מפרט W3C של PageVisibility API
• קבוצת עבודה בנושא ביצועי אתרים
• דוגמה ל-PageVisibility ב-IE10
• Visibility.js – polyfill ל-PageVisibility
• isVis – פולאפיל של PageVisibility