ایجاد تجربیات تمام صفحه

ما این توانایی را داریم که به راحتی وب‌سایت‌ها و برنامه‌های تمام صفحه همه‌جانبه ایجاد کنیم، اما مانند هر چیزی در وب، چند راه برای انجام آن وجود دارد. این به ویژه در حال حاضر مهم است که مرورگرهای بیشتری از تجربه "برنامه وب نصب شده" که تمام صفحه راه اندازی می شود پشتیبانی می کنند.

دریافت تمام صفحه برنامه یا سایت شما

راه های مختلفی وجود دارد که کاربر یا توسعه دهنده می تواند یک برنامه وب تمام صفحه را دریافت کند.

• در پاسخ به ژست کاربر، مرورگر را به حالت تمام صفحه بخواهید.
• برنامه را در صفحه اصلی نصب کنید.
• جعل کنید: نوار آدرس را به صورت خودکار مخفی کنید.

در پاسخ به ژست کاربر، مرورگر را به حالت تمام صفحه بخواهید

همه پلتفرم ها برابر نیستند . iOS Safari یک API تمام صفحه ندارد، اما ما در کروم در اندروید، فایرفاکس و IE 11 و بالاتر داریم. اکثر برنامه هایی که می سازید از ترکیبی از JS API و انتخابگرهای CSS ارائه شده توسط مشخصات تمام صفحه استفاده می کنند. API های اصلی JS که باید هنگام ساخت یک تجربه تمام صفحه به آنها اهمیت دهید عبارتند از:

• element.requestFullscreen() (در حال حاضر در کروم، فایرفاکس و IE پیشوند شده است) عنصر را در حالت تمام صفحه نمایش می دهد.
• document.exitFullscreen() (در حال حاضر در کروم، فایرفاکس و اینترنت اکسپلورر پیشوند شده است. فایرفاکس به جای آن از cancelFullScreen() استفاده می کند) حالت تمام صفحه را لغو می کند.
• document.fullscreenElement (در حال حاضر در کروم، فایرفاکس و IE پیشوند شده است) اگر هر یک از عناصر در حالت تمام صفحه باشد، مقدار true را برمی گرداند.

توجه: متوجه خواهید شد که در نسخه های پیشوندی ناهماهنگی زیادی بین بدنه 'S' در صفحه وجود دارد. این مشکل است، اما این مشکل با مشخصاتی است که در حال پرواز هستند.

وقتی برنامه شما تمام صفحه است، دیگر کنترل های رابط کاربری مرورگر را در دسترس ندارید. این نحوه تعامل کاربران با تجربه شما را تغییر می دهد. آنها کنترل های ناوبری استاندارد مانند رو به جلو و عقب را ندارند. آنها دریچه فرار خود را ندارند که دکمه Refresh است. مهم است که این سناریو را برآورده کنید. وقتی مرورگر وارد حالت تمام صفحه می شود، می توانید از برخی انتخابگرهای CSS برای کمک به تغییر سبک و ارائه سایت خود استفاده کنید.

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

مثال بالا کمی ساختگی است. من تمام پیچیدگی های مربوط به استفاده از پیشوندهای فروشنده را پنهان کرده ام.

کد واقعی بسیار پیچیده تر است. موزیلا یک اسکریپت بسیار مفید ایجاد کرده است که می توانید از آن برای تغییر حالت تمام صفحه استفاده کنید. همانطور که می بینید، وضعیت پیشوند فروشنده در مقایسه با 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 تمام صفحه

ساخت سند تمام صفحه

شکل 1: تمام صفحه روی عنصر بدنه.

طبیعی است که فکر کنید عنصر بدنه را تمام صفحه می‌گیرید، اما اگر در یک موتور رندر مبتنی بر WebKit یا Blink هستید، خواهید دید که این اثر عجیبی دارد که عرض بدنه را به کوچک‌ترین اندازه ممکن کاهش می‌دهد که همه محتوا را شامل می‌شود. (Mozilla Gecko خوب است.)

شکل 2: تمام صفحه در عنصر سند.

برای رفع این مشکل، از عنصر document به جای عنصر 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

از زمان عرضه آیفون، کاربران می‌توانند برنامه‌های وب را در صفحه اصلی نصب کنند و آنها را به عنوان برنامه‌های وب تمام صفحه راه‌اندازی کنند.

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

اگر محتوا روی بله تنظیم شده باشد، برنامه وب در حالت تمام صفحه اجرا می شود. در غیر این صورت، آن را ندارد. رفتار پیش فرض استفاده از سافاری برای نمایش محتوای وب است. شما می توانید تعیین کنید که آیا یک صفحه وب در حالت تمام صفحه نمایش داده می شود یا خیر.

اپل

کروم برای اندروید

تیم کروم اخیراً قابلیتی را اجرا کرده است که به مرورگر می‌گوید زمانی که کاربر صفحه را به صفحه اصلی اضافه کرد، صفحه را تمام صفحه راه‌اندازی کند. این شبیه به مدل سافاری iOS است.

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

می‌توانید برنامه وب خود را طوری تنظیم کنید که نماد میانبر برنامه به صفحه اصلی دستگاه اضافه شود و برنامه در حالت تمام صفحه با استفاده از گزینه منوی «افزودن به صفحه اصلی» در Chrome برای Android اجرا شود.

گوگل کروم

گزینه بهتر استفاده از Web App Manifest است.

مانیفست برنامه وب (Chrome، Opera، Firefox، Samsung)

Manifest for Web applications یک فایل JSON ساده است که به شما، توسعه‌دهنده، این توانایی را می‌دهد تا نحوه نمایش برنامه‌تان را برای کاربر در مناطقی که انتظار دارند برنامه‌ها را ببیند (مثلاً صفحه اصلی تلفن همراه) کنترل کنید. کاربر می تواند راه اندازی کند و مهمتر از آن، چگونه می تواند آن را راه اندازی کند. در آینده مانیفست به شما کنترل بیشتری بر برنامه شما می‌دهد، اما در حال حاضر ما فقط بر روی نحوه راه‌اندازی برنامه تمرکز می‌کنیم. به طور مشخص:

1. به مرورگر درباره مانیفست خود بگویید
2. توضیح نحوه راه اندازی

پس از ایجاد مانیفست و میزبانی آن در سایت شما، تنها کاری که باید انجام دهید این است که یک برچسب پیوند از تمام صفحات خود که برنامه شما را در بر می گیرد، به شرح زیر اضافه کنید:

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

Chrome از نسخه 38 برای Android (اکتبر 2014) از Manifests پشتیبانی می‌کند و به شما امکان می‌دهد نحوه نمایش برنامه وب خود را هنگام نصب در صفحه اصلی (از طریق 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 می توانید از navigator.standalone boolean استفاده کنید تا ببینید آیا کاربر از صفحه اصلی راه اندازی شده است یا خیر.

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) {
}

فایرفاکس

هنگامی که کاربر تمام صفحه را از طریق سایت شما درخواست می کند یا کاربر برنامه را در حالت تمام صفحه راه اندازی می کند، همه 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
}

اینترنت اکسپلورر

در IE کلاس شبه CSS فاقد خط فاصله است، اما در غیر این صورت مشابه کروم و فایرفاکس کار می کند.

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 از طریق navigator.pushState API نیز از تجربه تمام صفحه خارج می شود.

اگر می خواهید کاربر را در یک تجربه تمام صفحه نگه دارید، دو گزینه دارید:

1. از مکانیسم های قابل نصب برنامه وب برای نمایش تمام صفحه استفاده کنید.
2. رابط کاربری و وضعیت برنامه خود را با استفاده از قطعه # مدیریت کنید.

با استفاده از #syntax برای به روز رسانی url (window.location = "#somestate")، و گوش دادن به رویداد window.onhashchange ، می توانید از پشته تاریخچه خود مرورگر برای مدیریت تغییرات در وضعیت برنامه استفاده کنید، و به کاربر اجازه دهید از برنامه خود استفاده کند. دکمه‌های برگشت سخت‌افزاری، یا با استفاده از تاریخچه API به شرح زیر، یک تجربه دکمه بازگشت برنامه‌ای ساده را ارائه دهید:

window.history.go(-1);

به کاربر اجازه دهید انتخاب کند چه زمانی تمام صفحه نمایش داده شود

هیچ چیز برای کاربر آزاردهنده تر از وب سایتی نیست که کاری غیرمنتظره انجام دهد. وقتی کاربری به سایت شما می‌رود، سعی نکنید او را به حالت تمام صفحه فریب دهید.

اولین رویداد لمسی را قطع نکنید و requestFullscreen() را فراخوانی کنید.

1. آزار دهنده است.
2. ممکن است مرورگرها تصمیم بگیرند که در آینده از کاربر بخواهند اجازه دهند برنامه تمام صفحه را بگیرد.

اگر می‌خواهید برنامه‌ها را تمام صفحه راه‌اندازی کنید، به استفاده از تجربه‌های نصب برای هر پلتفرم فکر کنید.

کاربر را برای نصب برنامه خود در صفحه اصلی اسپم نکنید

اگر قصد دارید یک تجربه تمام صفحه را از طریق مکانیسم های برنامه نصب شده ارائه دهید، مراقب کاربر باشید.

• محتاط باشید از یک بنر یا پاورقی استفاده کنید تا به آنها اطلاع دهید که می توانند برنامه را نصب کنند.
• اگر درخواست را رد کردند، دیگر آن را نشان ندهید.
• در اولین بازدید کاربران بعید است که بخواهند برنامه را نصب کنند مگر اینکه از خدمات شما راضی باشند. در نظر بگیرید که پس از یک تعامل مثبت در سایت شما، از آنها درخواست نصب کنید.
• اگر کاربر به طور مرتب از سایت شما بازدید می کند و برنامه را نصب نمی کند، بعید است در آینده برنامه شما را نصب کند. به اسپم کردن آنها ادامه ندهید.

نتیجه گیری

در حالی که ما یک API کاملاً استاندارد و پیاده‌سازی شده نداریم، با استفاده از برخی از راهنمایی‌های ارائه شده در این مقاله، می‌توانید به راحتی تجربیاتی ایجاد کنید که از کل صفحه کاربر، صرف نظر از مشتری، استفاده کند.

بازخورد