דף זה תורגם על ידי Cloud Translation API.

יצירת חוויות במסך מלא

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

האפליקציה או האתר נטענים במסך מלא

משתמש או מפתח יכולים להציג אפליקציית אינטרנט במסך מלא בכמה דרכים.

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

בקשה לדפדפן לעבור למסך מלא בתגובה לתנועת משתמש

לא כל הפלטפורמות שוות. ב-Safari ל-iOS אין ממשק API במסך מלא, אבל יש לנו ב-Chrome ב-Android, ב-Firefox וב-IE 11 ומעלה. רוב האפליקציות שתצרו ישתמשו בשילוב של ה-API של JS וסלקטורים ב-CSS שמסופקים על-ידי המפרט של מסך מלא. אלה ממשקי ה-API העיקריים של JS שצריך לטפל בהם כשיוצרים חוויה במסך מלא:

הרכיב element.requestFullscreen() (שמופיע כרגע ב-Chrome, Firefox ו-IE) מציג את הרכיב במצב מסך מלא.
document.exitFullscreen() (כרגע יש קידומת ב-Chrome, ב-Firefox וב-IE. במקום זאת, Firefox משתמש ב-cancelFullScreen()) כדי לבטל מצב מסך מלא.
document.fullscreenElement (שמופיע כרגע ב-Chrome, Firefox ו-IE) מוחזר TRUE אם אחד מהאלמנטים נמצא במצב מסך מלא.

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

<button id="goFS">Go fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      document.body.requestFullscreen();
    },
    false,
  );
</script>

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

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

function toggleFullScreen() {
  var doc = window.document;
  var docEl = doc.documentElement;

  var requestFullScreen =
    docEl.requestFullscreen ||
    docEl.mozRequestFullScreen ||
    docEl.webkitRequestFullScreen ||
    docEl.msRequestFullscreen;
  var cancelFullScreen =
    doc.exitFullscreen ||
    doc.mozCancelFullScreen ||
    doc.webkitExitFullscreen ||
    doc.msExitFullscreen;

  if (
    !doc.fullscreenElement &&
    !doc.mozFullScreenElement &&
    !doc.webkitFullscreenElement &&
    !doc.msFullscreenElement
  ) {
    requestFullScreen.call(docEl);
  } else {
    cancelFullScreen.call(doc);
  }
}

אנחנו מפתחי אינטרנט שונאים מורכבות. ממשק API מופשט נחמד ברמה גבוהה שאפשר להשתמש בו הוא מודול Screenfull.js של Sindre Sorhus, שמאחד את שתי הקידומות של JS API והספק שונות במקצת לממשק API עקבי אחד.

טיפים ל-API במסך מלא

הצגת המסמך במסך מלא

הגיוני לקחת את רכיב ה-body למסך מלא, אבל כשמשתמשים במנוע רינדור שמבוססים על WebKit או Blink, יש לכך השפעה מוזרה: כיווץ רוחב הגוף לגודל הקטן ביותר האפשרי שיכיל את כל התוכן. (Mozilla Gecko בסדר).

מסך מלא ברכיב המסמך — איור 2: מסך מלא על רכיב המסמך.

כדי לתקן את הבעיה, צריך להשתמש ברכיב המסמך במקום ברכיב body:

document.documentElement.requestFullscreen();

יצירת רכיב וידאו למסך מלא

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

<video id="videoElement"></video>
<button id="goFS">Go Fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      var videoElement = document.getElementById('videoElement');
      videoElement.requestFullscreen();
    },
    false,
  );
</script>

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

<div id="container">
  <video></video>
  <div>
    <button>Play</button>
    <button>Stop</button>
    <button id="goFS">Go fullscreen</button>
  </div>
</div>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      var container = document.getElementById('container');
      container.requestFullscreen();
    },
    false,
  );
</script>

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

<style>
  #goFS:-webkit-full-screen #goFS {
    display: none;
  }
  #goFS:-moz-full-screen #goFS {
    display: none;
  }
  #goFS:-ms-fullscreen #goFS {
    display: none;
  }
  #goFS:fullscreen #goFS {
    display: none;
  }
</style>

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

על ידי הוספת קישור בחזרה לדף הפתיחה
באמצעות מנגנון לסגירת תיבות דו-שיח או חזרה אחורה

הפעלת דף במסך מלא ממסך הבית

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

בפלטפורמות העיקריות לנייד, קל למדי להטמיע אותו באמצעות מטא תגים או קובצי מניפסט באופן הבא.

iOS

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

<meta name="apple-mobile-web-app-capable" content="yes" />

אם התוכן מוגדר כ'כן', אפליקציית האינטרנט תפעל במצב מסך מלא. אחרת, היא לא תפעל. התנהגות ברירת המחדל היא שימוש ב-Safari להצגת תוכן מהאינטרנט. אפשר לקבוע אם דף אינטרנט מוצג במצב מסך מלא באמצעות המאפיין window.navigator.standalone לקריאה בלבד של JavaScript בוליאני.
Apple

Chrome ל-Android

צוות Chrome הטמיע לאחרונה תכונה שמורה לדפדפן להפעיל את הדף במסך מלא כשהמשתמש הוסיף אותו למסך הבית. היא דומה למודל iOS של Safari.

<meta name="mobile-web-app-capable" content="yes" />

תוכל להגדיר את אפליקציית האינטרנט שלך כך שתוסיף סמל של קיצור דרך של אפליקציה למסך הבית של המכשיר, ושהאפליקציה תופעל במסך מלא ב"מצב אפליקציה" באמצעות פריט התפריט "הוספה למסך הבית" של Chrome ל-Android.
Google Chrome

אפשרות טובה יותר היא להשתמש במניפסט של אפליקציית האינטרנט.

מניפסט של אפליקציית אינטרנט (Chrome, Opera, Firefox, Samsung)

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

עדכון הדפדפן לגבי המניפסט
תיאור אופן ההפעלה

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

<link rel="manifest" href="/manifest.json" />

Chrome תומך במניפסטים מגרסה 38 ל-Android (אוקטובר 2014), ומעניק לך שליטה על האופן שבו אפליקציית האינטרנט תופיע כשהיא מותקנת במסך הבית (באמצעות הנכסים short_name, name ו-icons) ואיך צריך להפעיל אותה כשהמשתמש לוחץ על סמל ההפעלה (באמצעות start_url, display ו-orientation).

בהמשך מוצגת מניפסט לדוגמה. לא מוצג בה כל מה שיכול להיות במניפסט.

{
  "short_name": "Kinlan's Amaze App",
  "name": "Kinlan's Amazing Application ++",
  "icons": [
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "landscape"
}

התכונה הזו מתקדמת לחלוטין ומאפשרת לכם ליצור חוויות משתמש טובות ומשולבות יותר למשתמשים בדפדפן שתומך בתכונה הזו.

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

אפליקציות עזר

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

    "display": "standalone"

משחקים

ברוב המשחקים אפשר להפיק תועלת ממניפסט באופן מיידי. ברוב המשחקים המטרה היא להפעיל מסך מלא ולאלץ אוריינטציה ספציפית.

אם אתם מפתחים גלילה אנכית או משחק כמו Flappy Birds, סביר להניח שתרצו שהמשחק יהיה תמיד במצב תצוגה לאורך.

    "display": "fullscreen",
    "orientation": "portrait"

אם מצד שני אתם בונים משחק חשיבה או משחק כמו X-Com, סביר להניח שתרצו שהמשחק יפעל תמיד לרוחב.

    "display": "fullscreen",
    "orientation": "landscape"

אתרי חדשות

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

הבחירה תלויה בכם, ובאופן שבו המשתמשים ירצו לקבל גישה לחוויה שלכם. אם אתם רוצים שהאתר יכלול את כל דפדפן Chrome שהייתם מצפים שיהיה באתר, אפשר להגדיר את התצוגה לערך browser.

    "display": "browser"

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

    "display": "standalone"

זיוף זה: הסתרה אוטומטית של סרגל הכתובות

אפשר לבצע 'זיוף מסך מלא' על ידי הסתרה אוטומטית של סרגל הכתובות באופן הבא:

window.scrollTo(0, 1);

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

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

הנחיות בנושא חוויית משתמש

כשאתם בונים אתר שבו אתם משתמשים במסך מלא, יש מספר שינויים פוטנציאליים בחוויית המשתמש שכדאי להיות מודעים להם כדי לפתח שירות שהמשתמשים יאהבו.

הפסקת השימוש בפקדי הניווט

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

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

iOS

ב-iOS אפשר להשתמש בערך הבוליאני navigator.standalone כדי לראות אם המשתמש הופעל ממסך הבית.

if (navigator.standalone == true) {
  // My app is installed and therefore fullscreen
}

מניפסט של אפליקציית אינטרנט (Chrome, Opera, Samsung)

כשמפעילים את Chrome כאפליקציה מותקנת, היא לא פועלת בחוויית מסך מלא אמיתית ולכן document.fullscreenElement מחזיר null והסלקטורים ב-CSS לא פועלים.

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

selector:-webkit-full-screen {
  display: block; // displays the element only when in fullscreen
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

אם המשתמשים מפעילים את האתר שלך ממסך הבית, שאילתת המדיה display-mode תוגדר למה שהוגדר במניפסט של אפליקציית האינטרנט. במקרה של מסך מלא בלבד:

@media (display-mode: fullscreen) {
}

אם המשתמש מפעיל את האפליקציה במצב עצמאי, שאילתת המדיה display-mode תהיה standalone:

@media (display-mode: standalone) {
}

Firefox

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

selector:-moz-full-screen {
  display: block; // hides the element when not in fullscreen mode
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Internet Explorer

ב-IE, בפסאודו המחלקה של ה-CSS אין מקף, אבל מלבד זאת הוא פועל בדומה ל-Chrome ול-Firefox.

selector:-ms-fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

מפרט

האיות במפרט תואם לתחביר שמשמש את IE.

selector:fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

השארת המשתמשים במסך מלא

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

שינוי של כתובת ה-URL באופן פרוגרמטי על ידי שימוש ב-window.location = "http://example.com" יגרום ליציאה מהמסך המלא.
משתמש שילחץ על קישור חיצוני בתוך הדף שלך יעבור ממסך מלא.
שינוי כתובת ה-URL דרך ה-API navigator.pushState יקטע גם את חוויית המסך המלא.

אם רוצים שהמשתמשים יצפו במסך מלא, יש שתי אפשרויות:

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

באמצעות התחביר #תחביר כדי לעדכן את כתובת ה-URL (window.location = "#somestate"), והאזנה לאירוע window.onhashchange, ניתן להשתמש בערימת ההיסטוריה של הדפדפן כדי לנהל את השינויים במצב האפליקציה, לאפשר למשתמשים להשתמש בלחצני החזרה בחומרה או להציע חוויה פשוטה של לחצן 'הקודם' פרוגרמטי באמצעות ממשק ה-API של ההיסטוריה, באופן הבא:

window.history.go(-1);

המשתמש יכול לבחור מתי לעבור למסך מלא

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

אין ליירט את אירוע המגע הראשון ולהתקשר אל requestFullscreen().

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

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

אסור לשלוח למשתמשים ספאם כדי להתקין את האפליקציה במסך הבית

אם אתם מתכננים להציע חוויה במסך מלא באמצעות המנגנונים המותקנים של האפליקציות, יש להתחשב במשתמש.

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

סיכום

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