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

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

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

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

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

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

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

  • يعرض element.requestFullscreen() (الذي يسبقه حاليًا Chrome وFirefox وIE) العنصر في وضع ملء الشاشة.
  • document.exitFullscreen() (يبدأ حاليًا في Chrome وFirefox وIE. يستخدم Firefox cancelFullScreen() بدلاً من ذلك) يلغي وضع ملء الشاشة.
  • تعرض علامة document.fullscreenElement (بادئة حاليًا في Chrome وFirefox وIE) صحيحًا إذا كان أي من العناصر في وضع ملء الشاشة.

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

عرض المستند في وضع ملء الشاشة
وضع ملء الشاشة في العنصر الأساسي
الشكل 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.Standalone للقراءة فقط المنطقية في JavaScript.

تفاح

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" />

منذ إطلاق إصدار Manifest 38 لنظام Android (تشرين الأول/أكتوبر 2014)، يتيح Chrome التحكم في طريقة ظهور تطبيق الويب عند تثبيته على الشاشة الرئيسية (عبر خصائص 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"
الألعاب

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

إذا كنت تطور لعبة تمرير عمودية أو لعبة مثل فلابي بيرد، ستحتاج على الأرجح إلى أن تكون لعبتك في الوضع الرأسي دائمًا.

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

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

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

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

لا يتضمن 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 (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

في 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. يمكنك إدارة حالة واجهة المستخدم والتطبيق باستخدام الجزء #.

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

window.history.go(-1);

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

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

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

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

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

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

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

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

الخاتمة

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

إضافة ملاحظات