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

Ernest Delgado
Ernest Delgado
X

מבוא

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

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

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

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

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

Browser Support

  • Chrome: 33.
  • Edge: 12.
  • Firefox: 18.
  • Safari: 7.

Source

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

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

מאפייני החשיפה של המסמך

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

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

הפניות חיצוניות