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

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

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

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

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

طلب تشغيل المتصفّح في وضع ملء الشاشة استجابةً لإيماءة المستخدِم

ليست جميع الأنظمة الأساسية متماثلة: لا يتوفّر واجهة برمجة تطبيقات لعرض ملء الشاشة في متصفّح Safari على نظام التشغيل iOS، ولكن تتوفّر واجهة برمجة تطبيقات في متصفّح Chrome على Android وFirefox وInternet Explorer 11 والإصدارات الأحدث. ستستخدم معظم التطبيقات التي تنشئها مجموعة من واجهة برمجة التطبيقات لـ JavaScript وأدوات اختيار 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 نصًا برمجيًا مفيدًا جدًا يمكنك استخدامه لتفعيل وضع ملء الشاشة أو إيقافه. كما يمكنك أن ترى، فإنّ حالة بادئة المورّد معقّدة ومزعجة مقارنةً بواجهة برمجة التطبيقات المحدّدة. وحتى مع استخدام الرمز البرمجي المبسّط قليلاً أدناه، لا يزال الأمر معقّدًا.

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 من Sindre Sorhus، والتي تدمج واجهتَي برمجة تطبيقات JS API مختلفتَين قليلاً وبادئات المورّدين في واجهة برمجة تطبيقات واحدة متّسقة.

نصائح حول واجهة برمجة التطبيقات Fullscreen 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 لعرض محتوى الويب. يمكنك تحديد ما إذا كانت صفحة الويب معروضة في وضع ملء الشاشة باستخدام خاصية 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 بسيط يمنحك، كمطوّر، إمكانية التحكّم في كيفية ظهور تطبيقك للمستخدم في المناطق التي يتوقع فيها ظهور التطبيقات (مثل الشاشة الرئيسية للأجهزة الجوّالة)، وتوجيهه بشأن التطبيقات التي يمكنه تشغيلها، والأهم من ذلك، كيفية تشغيلها. في المستقبل، سيصبح بإمكانك التحكّم بشكل أكبر في تطبيقك من خلال البيان، ولكن في الوقت الحالي، لن نركز إلا على كيفية إطلاق تطبيقك. وهذه القيود تحديدًا هي كالآتي:

  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"

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

@media (display-mode: fullscreen) {
}

إذا بدأ المستخدم التطبيق في الوضع المستقل، سيكون display-mode طلب البحث عن الوسائط standalone:

@media (display-mode: standalone) {
}

Firefox

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

في 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
}

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

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

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

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

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

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

window.history.go(-1);

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

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

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

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

إذا كنت تريد تشغيل التطبيقات على ملء الشاشة، ننصحك باستخدام تجارب التثبيت لكل منصة.

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

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

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

الخاتمة

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

ملاحظات