יש לנו אפשרות ליצור בקלות אתרים ואפליקציות רחבים ומלאים, אבל כמו כל דבר באינטרנט, יש כמה דרכים לעשות זאת. זה חשוב במיוחד עכשיו, כשיותר דפדפנים תומכים בחוויית שימוש של 'אפליקציית אינטרנט מותקנת' שמופיעה במסך מלא.
הצגת האפליקציה או האתר במסך מלא
יש כמה דרכים שבהן משתמש או מפתח יכולים להציג אפליקציית אינטרנט במסך מלא.
- שליחת בקשה להעברת הדפדפן למסך מלא בתגובה לתנועת משתמש.
- מתקינים את האפליקציה במסך הבית.
- זיוף: הסתרה אוטומטית של סרגל הכתובות.
בקשה להעברת הדפדפן למסך מלא בתגובה לתנועת משתמש
לא כל הפלטפורמות זהות. בדפדפן Safari ל-iOS אין API למסך מלא, אבל יש לנו 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 אם אחד מהרכיבים נמצא במצב מסך מלא.
כשהאפליקציה פועלת במסך מלא, לא ניתן יותר להשתמש באמצעי הבקרה של ממשק המשתמש של הדפדפן. כך משתנה האופן שבו המשתמשים מקיימים אינטראקציה עם חוויית המשתמש. הם לא כוללים את אמצעי הבקרה הרגילים לניווט, כמו 'קדימה' ו'אחורה', ואין להם פתח מילוט כמו לחצן הרענון. חשוב להיערך לתרחיש הזה. אתם יכולים להשתמש בחלק מהסלקטורים של 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, שמאחד את שני קודמי הספקים וממשקי ה-API של JS שונים במקצת ל-API עקבי אחד.
טיפים ל-Fullscreen API
הצגת המסמך במסך מלא
הגיוני לחשוב שאפשר להציג את רכיב הגוף במסך מלא, אבל אם אתם משתמשים במנוע עיבוד מבוסס WebKit או Blink, תבחינו בהשפעה מוזרה: רוחב הגוף יתכווץ לגודל הקטן ביותר האפשרי שיכיל את כל התוכן. (Mozilla Gecko מתאים).
כדי לפתור את הבעיה, צריך להשתמש ברכיב document במקום ברכיב 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" />
אם הערך של content מוגדר כ-yes, אפליקציית האינטרנט פועלת במצב מסך מלא. אחרת, היא לא פועלת במצב מסך מלא. ברירת המחדל היא להשתמש ב-Safari כדי להציג תוכן אינטרנט. אפשר לקבוע אם דף אינטרנט מוצג במצב מסך מלא באמצעות מאפיין JavaScript בוליאני לקריאה בלבד, window.navigator.standalone.
Apple
Chrome עבור Android
צוות Chrome הטמיע לאחרונה תכונה שמורה לדפדפן להפעיל את הדף במסך מלא אחרי שהמשתמש הוסיף אותו למסך הבית. היא דומה לדגם של Safari ב-iOS.
<meta name="mobile-web-app-capable" content="yes" />
אתם יכולים להגדיר שאפליקציית האינטרנט תוסיף סמל קיצור דרך למסך הבית של המכשיר, ושהאפליקציה תופעל במסך מלא 'במצב אפליקציה' באמצעות הפריט 'הוספה למסך הבית' בתפריט של Chrome ל-Android.
Google Chrome
עדיף להשתמש במניפסט של אפליקציית האינטרנט.
מניפסט של אפליקציה לאינטרנט (Chrome, Opera, Firefox, Samsung)
מניפסט לאפליקציות אינטרנט הוא קובץ JSON פשוט שמאפשר למפתחים לקבוע איך האפליקציה שלהם תופיע למשתמשים באזורים שבהם הם מצפים לראות אפליקציות (למשל, מסך הבית בנייד), לקבוע אילו אפליקציות המשתמש יוכל להפעיל, וחשוב מכך, איך הוא יוכל להפעיל אותן. בעתיד, המניפסט יעניק לכם שליטה רבה יותר על האפליקציה, אבל כרגע אנחנו מתמקדים רק בדרכים להשקת האפליקציה. פרטים נוספים:
- דיווח לדפדפן על המניפסט
- תיאור של תהליך ההשקה
אחרי שיוצרים את המניפסט ומארחים אותו באתר, כל מה שצריך לעשות הוא להוסיף תג קישור מכל הדפים שמכילים את האפליקציה, באופן הבא:
<link rel="manifest" href="/manifest.json" />
Chrome תומך ב-Manifests מאז גרסה 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"
אתרי חדשות
ברוב המקרים, אתרי חדשות הם חוויות טהורות שמבוססות על תוכן. רוב המפתחים לא יחשבו להוסיף מניפסט לאתר חדשות. המניפסט יאפשר לכם להגדיר מה להפעיל (הדף הראשי של אתר החדשות) ואיך להפעיל אותו (במסך מלא או ככרטיסייה רגילה בדפדפן).
הבחירה היא שלכם, בהתאם לאופן שבו לדעתכם המשתמשים שלכם יעדיפו לגשת לחוויה שלכם. אם רוצים שהאתר יכלול את כל רכיבי הדפדפן שמצופים באתר, אפשר להגדיר את התצוגה ל-browser
.
"display": "browser"
אם אתם רוצים שאתר החדשות ייראה כמו רוב האפליקציות שמתמקדות בחדשות, שפועלות כאפליקציות ומסירות את כל הרכיבים הוויזואליים שדומים לאינטרנט מממשק המשתמש, תוכלו להגדיר את התצוגה כ-standalone
.
"display": "standalone"
זיוף: הסתרה אוטומטית של סרגל הכתובות
כדי 'לזייף מסך מלא', אפשר להסתיר את סרגל הכתובות באופן אוטומטי באופן הבא:
window.scrollTo(0, 1);
זו שיטה פשוטה למדי: הדף נטען ופקודות ניתנות לסרגל הדפדפן כדי להזיז אותו. לצערנו, הוא לא סטנדרטי ולא תומך היטב. בנוסף, צריך להתמודד עם כמה בעיות ייחודיות.
לדוגמה, דפדפנים בדרך כלל משחזרים את המיקום בדף כשהמשתמש חוזר אליו. שימוש ב-window.scrollTo
מבטל את ההגדרה הזו, וזה מרגיז את המשתמש. כדי לעקוף את הבעיה הזו, צריך לאחסן את המיקום האחרון ב-localStorage ולטפל במקרים קיצוניים (לדוגמה, אם הדף פתוח בכמה חלונות).
הנחיות UX
כשאתם יוצרים אתר שמשתמש במסך מלא, יש כמה שינויים פוטנציאליים בחוויית המשתמש שצריך להיות מודעים אליהם כדי ליצור שירות שהמשתמשים יאהבו.
לא להסתמך על פקדי הניווט
ב-iOS אין לחצן חומרה לאחור או תנועת רענון. לכן, חשוב לוודא שהמשתמשים יכולים לנווט באפליקציה בלי להיתקע.
אתם יכולים לזהות בקלות אם אתם עובדים במצב מסך מלא או במצב מותקן בכל הפלטפורמות העיקריות.
iOS
ב-iOS אפשר להשתמש ב-boolean 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
, אפשר להשתמש בסטאק ההיסטוריה של הדפדפן כדי לנהל שינויים במצב האפליקציה, לאפשר למשתמש להשתמש בלחצני החזרה אחורה בחומרה או להציע חוויית שימוש פשוטה בלחצן חזרה אחורה באופן פרוגרמטי באמצעות history API באופן הבא:
window.history.go(-1);
מאפשרים למשתמש לבחור מתי להציג את התמונה במסך מלא
אין דבר מעצבן יותר למשתמש מאתר שמבצע פעולה לא צפויה. כשמשתמש מנווט לאתר שלכם, אל תנסה להטעות אותו ולהעביר אותו למסך מלא.
לא ליירט את אירוע המגע הראשון ולקרוא ל-requestFullscreen()
.
- זה מעצבן.
- יכול להיות שבעתיד הדפדפנים יבקשו מהמשתמשים לאפשר לאפליקציה להשתמש במסך מלא.
אם אתם רוצים להפעיל אפליקציות במסך מלא, כדאי לכם להשתמש בחוויית ההתקנה של כל פלטפורמה.
אל תשלחו ספאם למשתמש כדי להתקין את האפליקציה במסך הבית
אם אתם מתכננים להציע חוויית צפייה במסך מלא באמצעות מנגנוני האפליקציה המותקנים, חשוב להביא בחשבון את המשתמש.
- להיות דיסקרטיים. אפשר להשתמש בבאנר או בכותרת תחתונה כדי להודיע להם שהם יכולים להתקין את האפליקציה.
- אם הם יסגרו את ההודעה, אל תציגו אותה שוב.
- סביר להניח שמשתמשים לא ירצו להתקין את האפליקציה בביקור הראשון שלהם, אלא אם הם מרוצים מהשירות. כדאי לבקש מהם להתקין את האפליקציה אחרי אינטראקציה חיובית באתר.
- אם משתמש מבקר באתר שלכם באופן קבוע ולא מתקין את האפליקציה, סביר להניח שהוא לא יטמיע אותה בעתיד. אל תמשיכו לשלוח להם ספאם.
סיכום
אין לנו ממשק API מוטמע וסטנדרטי לחלוטין, אבל בעזרת חלק מההנחיות שמפורטות במאמר הזה תוכלו ליצור בקלות חוויות שימוש שמנצלות את כל המסך של המשתמש, ללא קשר ללקוח.