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

Ernest Delgado

מבוא

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

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

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

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

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

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

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

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

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

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

דוגמה לאירוע

// 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