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

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

הצגת האפליקציה או האתר במסך מלא

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

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

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

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

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

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

כשהאפליקציה במסך מלא, כבר לא יהיו לך פקדים בממשק המשתמש של הדפדפן זמין בשבילך. הפעולה הזו משנה את האופן שבו משתמשים מקיימים אינטראקציה עם חוויה אישית. אין להם את פקדי הניווט הרגילים, כמו 'העברה'. וחזרה; אין להם פתח מילוט שהוא הלחצן 'רענון'. זו חשוב לטפל בתרחיש הזה. אפשר להשתמש בסלקטורים ב-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 מופשט ברמה גבוהה שאפשר להשתמש בו הוא המודול של Sindre Sorhus Screenfull.js. שמאחד את שתי הקידומות והקידומות של הספקים של JS API לתוך אחת API עקבי.

טיפים לשימוש בממשק API במסך מלא

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

איור 1: מסך מלא ברכיב הגוף.

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

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

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

document.documentElement.requestFullscreen();

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

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

1. שליחת הודעה לדפדפן על המניפסט
2. תיאור של אופן ההפעלה

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

<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, ולטפל במקרי הקצה (לדוגמה, אם למשתמש יש שהדף ייפתח בכמה חלונות).

הנחיות לגבי UX

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

לא מסתמכים על פקדי ניווט

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

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

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

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

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

window.history.go(-1);

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

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

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

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

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

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

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

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

סיכום

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

משוב