إنشاء تجارب في وضع ملء الشاشة

لدينا القدرة على إنشاء مواقع ويب غامرة بملء الشاشة التطبيقات، ولكن مثل أي شيء على الويب، هناك طريقتان لإجراء ذلك. الأمر مهم بشكل خاص في الوقت الحالي حيث إن المزيد من المتصفحات تدعم تطبيق الويب" وتجربة تشغيل وضع ملء الشاشة.

عرض تطبيقك أو موقعك الإلكتروني في وضع ملء الشاشة

هناك عدة طرق يمكن للمستخدم أو المطوّر من خلالها عرض تطبيق الويب في وضع ملء الشاشة.

  • اطلب من المتصفح الانتقال إلى وضع ملء الشاشة استجابةً لإيماءة مستخدم.
  • ثبِّت التطبيق على الشاشة الرئيسية.
  • زائف: يمكنك إخفاء شريط العناوين تلقائيًا.

طلب الانتقال إلى وضع ملء الشاشة في المتصفح استجابةً لإيماءة مستخدم

ليست كل المنصات متساوية. لا يحتوي iOS Safari على واجهة برمجة تطبيقات بملء الشاشة، ولكننا نجري ذلك على Chrome على أجهزة Android، وFirefox والإصدار 11 من IE والإصدارات الأحدث. ستستخدم معظم التطبيقات التي تنشئها مزيجًا من واجهة برمجة تطبيقات JavaScript وأدوات اختيار لغة CSS التي توفّرها مواصفات ملء الشاشة المصدر الرئيسي يجب الاهتمام بواجهة برمجة تطبيقات JavaScript عند إنشاء تجربة بملء الشاشة:

  • 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 نصًا برمجيًا مفيدًا جدًا يمكنك استخدامه للتبديل إلى وضع ملء الشاشة بالنسبة يمكنك أن ترى، فإن حالة بادئة البائع معقدة مرهقًا جدًا مقارنة بواجهة برمجة التطبيقات المحددة. حتى مع استخدام التعليمات البرمجية المبسطة قليلاً أدناه، إلا أنها لا تزال معقدة.

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

نحن مطوّرون على الويب يكرهون التعقيدات. واجهة برمجة تطبيقات تجريدية عالية المستوى يمكنك استخدامها هي وحدة Screenfull.js من سيندر سورهوس توحِّد بادئتَي JS API والموردَين المختلفَين قليلاً في واجهة واحدة واجهة برمجة تطبيقات متسقة.

نصائح حول واجهة برمجة التطبيقات بملء الشاشة

جارٍ عرض المستند بملء الشاشة
ملء الشاشة على النص الأساسي
الشكل 1: ملء الشاشة على عنصر النص الأساسي

من الطبيعي الاعتقاد بأنّ عنصر الجسم بملء الشاشة، ولكن إذا في أي محرك عرض مستند إلى WebKit أو Blink، ستجد أن له تأثيرًا غريبًا بتصغير عرض الجسم إلى أصغر حجم ممكن يحتوي على جميع المحتوى. (يحسن Mozilla Gecko).

وضع ملء الشاشة على عنصر المستند
الشكل 2: وضع ملء الشاشة على عنصر المستند

لحلّ هذه المشكلة، استخدِم عنصر المستند بدلاً من العنصر الأساسي:

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.tainalone للقراءة فقط في JavaScript.

Apple

Chrome لنظام Android

نفذ فريق Chrome مؤخرًا ميزة تطلب من المتصفح تشغيل الصفحة بملء الشاشة عندما يضيفها المستخدم إلى الشاشة الرئيسية. من المهم يشبه نموذج iOS Safari.

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

يمكنك إعداد تطبيق الويب لتتم إضافة رمز اختصار التطبيق إلى الشاشة الرئيسية للجهاز، وتشغيل التطبيق في "وضع التطبيق" بملء الشاشة استخدام "الإضافة إلى الشاشة الرئيسية" في Chrome لأجهزة Android عنصر قائمة.

Google Chrome

والخيار الأفضل هو استخدام بيان تطبيق الويب.

بيان تطبيق الويب (Chrome وOpera وFirefox وSamsung)

بيان تطبيقات الويب هو ملف جسون بسيط يمنحك مطور برامج، وإمكانية التحكم في كيفية ظهور التطبيق للمستخدم في المناطق يتوقعون رؤية تطبيقات (على سبيل المثال الشاشة الرئيسية للهاتف المحمول)، توجه وما يمكن للمستخدم إطلاقه، والأهم من ذلك، كيف يمكنه إطلاقه. في جلسة المعمل، في المستقبل، سيمنحك البيان مزيدًا من التحكم في تطبيقك، ولكن في الوقت الحالي فنحن نركّز فقط على كيفية إطلاق تطبيقك. وهذه القيود تحديدًا هي كالآتي:

  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 إلى تجاوز هذا الإعداد، وهو أمر مزعج المستخدم. لتفادي ذلك، عليك تخزين الموضع الأخير في التخزين المحلي، والتعامل مع الحالات الهامشية (على سبيل المثال، إذا كان لدى المستخدم صفحة مفتوحة في نوافذ متعددة).

إرشادات تجربة المستخدم

عندما تنشئ موقعًا إلكترونيًا يستفيد من وضع ملء الشاشة، هناك عدد التغييرات المحتملة في تجربة المستخدم التي يجب أن تكون على دراية بها والقدرة على إنشاء خدمة سيحبها المستخدمون.

لا تعتمد على عناصر التحكم في التنقل

لا يحتوي iOS على زر الرجوع في الجهاز أو إيماءة إعادة التحميل. لذلك يجب عليك ضمان قدرة المستخدمين على التنقل في أنحاء التطبيق بدون الانغلاق.

يمكنك معرفة ما إذا كان الجهاز مشغَّلاً في وضع ملء الشاشة أو في وضع مثبَّت. بسهولة على جميع المنصات الرئيسية.

iOS

على نظام التشغيل iOS، يمكنك استخدام القيمة المنطقية navigator.standalone لمعرفة ما إذا كان المستخدم قد من الشاشة الرئيسية أم لا.

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

بيان تطبيق الويب (Chrome وOpera وSamsung)

عند بدء تشغيل Chrome كتطبيق مثبَّت، لا يتم تشغيل Chrome في وضع ملء الشاشة الفعلي تجربة بحيث تعرض document.fullscreenElement قيمة فارغة وأدوات اختيار لغة CSS لا تعمل.

عندما يطلب المستخدم وضع ملء الشاشة عبر إيماءة على موقعك، فإن تتوفر واجهات برمجة التطبيقات بملء الشاشة، بما في ذلك أداة اختيار 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
}

إبقاء المستخدم في وضع ملء الشاشة

قد تكون واجهة برمجة التطبيقات بملء الشاشة صعبة بعض الشيء. لا يريد مورّدو المتصفحات لقفل المستخدمين في صفحة ملء الشاشة حتى يطوّروا آليات لكسر خارج وضع ملء الشاشة في أقرب وقت ممكن. هذا يعني أنه لا يمكنك إنشاء موقع إلكتروني بملء الشاشة يضم عدة صفحات للأسباب التالية:

  • يؤدي تغيير عنوان URL آليًا باستخدام window.location = "http://example.com" إلى الخروج من وضع ملء الشاشة.
  • سيؤدي نقر المستخدم على رابط خارجي في صفحتك إلى الخروج من وضع ملء الشاشة.
  • إنّ تغيير عنوان URL عبر واجهة برمجة تطبيقات navigator.pushState سيؤدي أيضًا إلى انفصال عن تجربة ملء الشاشة

لديك خياران إذا كنت تريد إبقاء المستخدم في وضع ملء الشاشة:

  1. استخدِم آليات تطبيق الويب القابل للتثبيت للانتقال إلى وضع ملء الشاشة.
  2. يمكنك إدارة واجهة المستخدم وحالة التطبيق باستخدام الجزء #.

باستخدام #yntax لتحديث عنوان URL (window.location = "#somestate") و الاستماع إلى حدث window.onhashchange، يمكنك استخدام المتصفّح السجلّ لإدارة التغييرات في حالة التطبيق، والسماح للمستخدم باستخدام أو تقديم أزرار الرجوع إلى الجهاز، أو تقديم زر رجوع آلي بسيط المستخدم باستخدام واجهة برمجة تطبيقات السجلّ على النحو التالي:

window.history.go(-1);

السماح للمستخدم باختيار وقت الانتقال إلى وضع ملء الشاشة

فليس هناك ما يزعج المستخدمين أكثر من المواقع الإلكترونية التي تنفّذ نشاطًا معيّنًا غير متوقع. عند انتقال المستخدم إلى موقعك، لا تحاول خداعه ملء الشاشة.

لا تعترض حدث اللمس الأول وتطلب requestFullscreen().

  1. إنه مزعج.
  2. ربما قررت المتصفحات مطالبة المستخدم في وقت ما في المستقبل بشأن ما يلي: السماح للتطبيق بملء الشاشة.

إذا كنت تريد تشغيل التطبيقات بملء الشاشة، ففكر في استخدام زر التثبيت وخبرات مختلفة لكل منصة.

عدم إرسال رسائل غير مرغوب فيها إلى المستخدم لتثبيت تطبيقك على الشاشة الرئيسية

في حال التخطيط لتوفير تجربة بملء الشاشة من خلال آليات التطبيقات المثبّتة مراعاة المستخدم.

  • كن متصفًا. استخدِم بانر أو تذييلاً لإعلامهم بأنّه يمكنهم تثبيت التطبيق.
  • إذا رفض المستخدم الطلب، لا تعرضه مرة أخرى.
  • عندما يزور المستخدمون لأول مرة، من غير المحتمل أن يرغبوا في تثبيت التطبيق ما لم بأنها سعيدة بخدمتك. يمكنك مطالبتهم بالتثبيت بعد إيجابيًا على موقعك.
  • إذا كان المستخدم يزور موقعك بانتظام ولم يثبِّت التطبيق، من غير المرجح أن يثبّت تطبيقك في المستقبل. لا تستمر في إرسال محتوى غير مرغوب فيه.

الخاتمة

وعلى الرغم من عدم وجود واجهة برمجة تطبيقات موحدة ومنفذة بالكامل، إلا أن استخدام بعض الواردة في هذه المقالة، يمكنك بسهولة إنشاء تجارب الاستفادة من الشاشة الكاملة للمستخدم، بغض النظر عن العميل.

ملاحظات