מבוא
כמפתחי אתרים, אנחנו נוטים להתלהב מטכנולוגיות חדשות שמאפשרות לנו ליצור דפי אינטרנט אינטראקטיביים ומעניינים יותר. גרפיקה בתלת-ממד עם WebGL? בהחלט. יכולות אודיו מתקדמות עם WebAudio? בטח. יישומי שיתוף פעולה בזמן אמת באמצעות מצלמת האינטרנט והמיקרופון? רשום אותי!
הטכנולוגיות שמאפשרות לנו לבנות אפליקציות שפועלות ביעילות רבה יותר ומספקות חוויית משתמש טובה יותר הן פחות מלהיבות, אבל גם חשובות לא פחות. כאן נכנס לתמונה ממשק API כמו Page visibility.
ממשק ה-API של חשיפת דפים מבצע פונקציה פשוטה אך חשובה – הוא מודיע לאפליקציה מתי הדף גלוי למשתמש. פיסת מידע בסיסית זו מאפשרת ליצור דפי אינטרנט שהתנהגותם שונה כאשר לא מעיינים בהם. ריכזנו כאן כמה דוגמאות:
- דף אינטרנט שמאחזר מידע משרת עלול להאט את מחזור העדכון שלו כשהוא לא מוצג באופן פעיל
- דף שבו מוצגת קרוסלת תמונות מסתובבת או תוכן של וידאו/אודיו יכול להשהות עד שהמשתמש יציג שוב את הדף.
- אפליקציה יכולה להחליט להציג התראות למשתמש רק כאשר הן מוסתרות
בהתחלה ממשק ה-API הזה לא נראה שימושי במיוחד מעבר לנוחות המשתמש, אבל בהתחשב לגידול העצום בגלישה באינטרנט בנייד, כל דבר שעוזר לחסוך בצריכת הסוללה של המכשיר מקבל חשיבות רבה. באמצעות API של חשיפה בדף, האתר שלכם יכול לעזור למכשיר של המשתמש לצרוך פחות חשמל ולהאריך את חייו.
מפרט ה-API, שנכון לכתיבה זו נמצא בשלב 'המלצה על מועמדים', מספק שני מאפיינים לזיהוי מצב החשיפה של המסמך וגם אירוע של תגובה לשינויים בחשיפה.
במדריך זה אציג את היסודות של ממשק ה-API ואראה כיצד ליישם אותו בכמה דוגמאות מעשיות (אל תהססו לדלג עליהן אם אתם טיפוסים חסרי סבלנות).
המאפיינים של חשיפת המסמך
בגרסה הנוכחית של מפרט PageVisibilityAPI מוגדרים שני מאפייני מסמכים: הבוליאני hidden והספירה visibilityState. לנכס visibilityState יש כרגע 4 ערכים אפשריים: 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
בנוסף למאפייני הרשאות הגישה, יש אירוע חשיפה של המסמך שמופעל בכל פעם שמצב החשיפה של המסמך משתנה. ניתן לרשום 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 הוא חלק חשוב מהחשיבה הזו. למידע נוסף על יצירת אפליקציות אינטרנט עם מודעות למשאבים, עיינו במאמרים נוספים הקשורים לביצועים.