جاوا اسکرپٹ سے فل سکرین API کا استعمال کیسے کریں (اور ویک لاک API کا استعمال کرتے ہوئے اسکرین کو کیسے بیدار رکھا جائے)

. Chrome and Firefox on iOS inherit the same limitation because they're required to use Safari's engine.

You have two realistic options:

1. A "pseudo-fullscreen" fallback: Position your element with position: fixed; inset: 0 اپنا کروم چھپائیں۔ آپ سفاری کے ایڈریس بار کو نہیں ہٹا سکتے ہیں، لیکن جب آپ اسکرول کرتے ہیں تو یہ سکڑ جاتا ہے، اور زیادہ تر ٹولز کے لیے یہ کافی ہے۔

2. "ہوم اسکرین میں شامل کریں" کی تجاویز: ہوم اسکرین پر چلنے والی ویب ایپ "display": "standalone" مینی فیسٹ براؤزر UI کے بغیر چلتا ہے۔ آج آپ کے آئی فون پر حقیقی ایج ٹو ایج مواد حاصل کرنے کا یہ واحد طریقہ ہے۔

آپ جو بھی انتخاب کریں، مکمل طور پر خصوصیت کا پتہ لگانے پر انحصار نہ کریں۔ document.fullscreenEnabled یہ آپ کو بتاتا ہے کہ آیا یہ API ہے یا نہیں۔ موجود ہےتاہم، درخواست پھر بھی رن ٹائم پر مسترد ہو سکتی ہے ( allowfullscreen خواص، یہ اس لیے ہو سکتا ہے کہ براؤزر کی پالیسی صفحہ پر مقفل ہے، یا محض اس لیے کہ ہم نے جن براؤزرز کا تجربہ نہیں کیا ہے ان کی اپنی رائے ہے)۔

میرے لیے جو پیٹرن برقرار رہتا ہے وہ ہے اصل API کو آزمانا اور مسترد ہونے کو CSS فال بیک کے لیے محرک سمجھنا۔

function enterFullscreen(el) {
  if (fs.enabled) {
    return fs.request(el).catch(() => {
      // The API exists but refused – degrade to a fixed overlay.
      document.body.classList.add('pseudo-fullscreen');
    });
  }
  document.body.classList.add('pseudo-fullscreen');
  return Promise.resolve();
}

فونز پر، ہم ایک قدم آگے بڑھتے ہیں اور API کو بالکل بھی کال نہیں کرتے، یہاں تک کہ Android پر بھی، جو تکنیکی طور پر کام کرتا ہے۔ اسکرولنگ کے دوران ایڈریس بار کے دوبارہ ظاہر ہونے اور سسٹم کے سوائپ اشاروں کے درمیان، چپچپا اوورلے ایک حقیقی فل سکرین کے مقابلے ایک چھوٹی ٹچ اسکرین پر زیادہ متوقع طور پر برتاؤ کرتا ہے۔ ویسے بھی، یہ وہی کوڈ پاتھ ہے جسے آئی فون سفاری چلانے پر مجبور کرتا ہے۔ ٹیسٹ کرنے کے لیے ایک کم برانچ۔

آپ کو یہ فیصلہ کرنے سے پہلے کہ آپ کو کتنی ضرورت ہے یہ دیکھنے کے لیے آپ ہمارے موجودہ سپورٹ ٹیبل کو دیکھ سکتے ہیں۔

ویک لاک API کا استعمال کرتے ہوئے اسکرین کو جگائیں۔

آپ نے ایک خوبصورت فل سکرین تجربہ بنایا ہے۔ صارفین پیچھے جھک کر دیکھتے ہیں۔ اور 90 سیکنڈ کے بعد، سکرین سیاہ ہو جاتی ہے اور لاک ہو جاتی ہے۔ اس کی وجہ یہ ہے کہ آپریٹنگ سسٹم نے ان پٹ کو نہیں پہچانا اور فرض کیا کہ وہاں کوئی نہیں ہے۔

ویڈیو عناصر کے لیے، براؤزر اسے آپ کے لیے ہینڈل کرتا ہے۔ دیگر آپریشنز (کاؤنٹ ڈاؤن، سلائیڈ شو، کینوس اینیمیشن، ترکیبیں، اسکور پیجز، وغیرہ) کے لیے اسکرین ویک لاک API کی ضرورت ہوتی ہے۔ یہ 2024 میں تمام بڑے براؤزرز (Chrome 84+, Safari 16.4+, Firefox 126+) میں بھیجے گا اور 2025 میں بیس لائن کا حصہ بن جائے گا، اس لیے اسے فی الحال پولی فل کے بغیر استعمال کیا جا سکتا ہے۔

API ایک واحد کال ہے اور وعدے پر مبنی ہے۔

let wakeLock = null;

async function requestWakeLock() {
  if (!('wakeLock' in navigator)) return; // unsupported – fail silently

  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      // The OS or browser released it (tab hidden, battery saver, etc.)
      wakeLock = null;
    });
  } catch (err) {
    // Rejected – most often because the device is in a power-saving mode.
    console.warn(`Wake lock failed: ${err.name} – ${err.message}`);
  }
}

async function releaseWakeLock() {
  if (wakeLock) {
    await wakeLock.release();
    wakeLock = null;
  }
}

جاننے کے لیے تین اصول:

1. سیکورٹی سیاق و سباق کی ضرورت ہے۔ API صرف HTTPS (اور localhost)۔

2. اگر صفحہ چھپا ہوا ہے، تو براؤزر اسے خود بخود کھول دیتا ہے۔. جب صارف ٹیبز کو سوئچ کرتا ہے، ونڈو کو چھوٹا کرتا ہے، یا فون کو لاک کرتا ہے، جب صفحہ دوبارہ ظاہر ہوتا ہے تو لاکنگ اس وقت ہوتی ہے۔ ~ نہیں خود واپس آجاؤ۔ آپ کو دوبارہ درخواست کرنی ہوگی۔

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible' && shouldStayAwake()) {
    requestWakeLock();
  }
});

1. اچھے شہری بنیں۔ ویک تالے بیٹری کی طاقت استعمال کرتے ہیں۔ اسے صرف اس وقت پکڑیں ​​جب یہ واقعی مفید ہو، جیسے کہ جب کوئی چیز چل رہی ہو، چل رہی ہو یا دکھا رہی ہو۔ جس لمحے تم رک جاؤ، جانے دو۔

اچھی بات یہ ہے کہ فل سکرین API پہلے سے ہی "کچھ ظاہر ہو رہا ہے" کے لیے ایک بہترین سگنل فراہم کرتا ہے۔ fullscreenchange. جب صارف پوری اسکرین پر جاتا ہے، تو وہ لاک کی درخواست کرتا ہے۔ جب یہ پوری اسکرین سے آگے بڑھ جائے تو اسے ریلیز کریں۔

تاہم، مکمل اسکرین ہی واحد اچھا سگنل نہیں ہے، یہ یہ سوچنے میں مدد کرتا ہے کہ ویک لاک اگلے کے ساتھ کیا منسلک ہے۔ سرگرمی الٹی گنتی شروع ہونے پر غیر ڈسپلے کاؤنٹ ڈاؤن ٹائمر ایک لاک کی درخواست کرتے ہیں اور جب 0 تک پہنچ جاتا ہے یا رک جاتا ہے تو لاک کو جاری کرتے ہیں ( قطع نظر اس سے کہ صفحہ فل سکرین ہے یا نہیں)۔ کیونکہ کوئی بھی ایسا ٹائمر نہیں چاہتا جو 90 سیکنڈ کے نشان پر گہرا ہو۔ بارش کے ساؤنڈ پلیئر میں، لاکنگ آڈیو کی پیروی کرتا ہے۔ پلے بیک پر حاصل کیا جاتا ہے اور بند ہونے پر یا جب نیند کا ٹائمر آواز کو ختم کر دیتا ہے تو اسے غیر مقفل کیا جاتا ہے۔

طریقہ کار ایک ہی ہے۔ واحد ممکنہ جواب یہ ہے کہ "کیا اسکرین کو ابھی آن رہنا چاہیے؟" سوال بدل جاتا ہے۔

یہ سب ایک ساتھ ڈالنا

پورا پیٹرن ایک جگہ پر ہے، بشمول کی بورڈ شارٹ کٹس کا استعمال کرتے ہوئے فل سکرین پر سوئچ کرنا، ویک لاکس جو فل سکرین حالت کی پیروی کرتے ہیں، UI جو مطابقت پذیر رہتا ہے اس سے کوئی فرق نہیں پڑتا ہے کہ صارف کیسے باہر نکلتا ہے، اور ایسے براؤزرز کے لیے فال بیکس جو ایسا نہیں کر سکتے۔

const toggleBtn = document.getElementById('fs-toggle');
let wakeLock = null;

/* ---------- Fullscreen compatibility layer ---------- */
const fs = {
  get element() {
    return document.fullscreenElement ?? document.webkitFullscreenElement ?? null;
  },
  get enabled() {
    return Boolean(document.fullscreenEnabled ?? document.webkitFullscreenEnabled);
  },
  request(el = document.documentElement) {
    if (el.requestFullscreen) return el.requestFullscreen();
    if (el.webkitRequestFullscreen) return Promise.resolve(el.webkitRequestFullscreen());
    return Promise.reject(new Error('Fullscreen not supported'));
  },
  exit() {
    if (document.exitFullscreen) return document.exitFullscreen();
    if (document.webkitExitFullscreen) return Promise.resolve(document.webkitExitFullscreen());
    return Promise.reject(new Error('Fullscreen not supported'));
  },
};

/* ---------- Wake lock ---------- */
async function requestWakeLock() {
  if (!('wakeLock' in navigator) || wakeLock) return;
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => { wakeLock = null; });
  } catch (err) {
    console.warn(`Wake lock failed: ${err.name}`);
  }
}

async function releaseWakeLock() {
  if (!wakeLock) return;
  await wakeLock.release();
  wakeLock = null;
}

/* ---------- Toggle ---------- */
async function toggleFullscreen() {
  const pseudo = document.body.classList.contains('pseudo-fullscreen');
  try {
    if (pseudo) {
      document.body.classList.remove('pseudo-fullscreen');
      onFullscreenChange();
    } else if (!fs.element) {
      await fs.request();
    } else {
      await fs.exit();
    }
  } catch (err) {
    // The API refused (iframe policy, unsupported platform, etc.) – degrade gracefully.
    document.body.classList.add('pseudo-fullscreen');
    onFullscreenChange();
  }
}

/* ---------- Keep everything in sync ---------- */
function onFullscreenChange() {
  const active = Boolean(fs.element) || document.body.classList.contains('pseudo-fullscreen');
  toggleBtn.textContent = active ? 'Exit fullscreen' : 'Fullscreen';
  toggleBtn.setAttribute('aria-pressed', String(active));
  document.body.classList.toggle('is-fullscreen', active);

  // The screen should stay awake exactly as long as we're fullscreen.
  if (active) requestWakeLock(); else releaseWakeLock();
}

['fullscreenchange', 'webkitfullscreenchange'].forEach((evt) =>
  document.addEventListener(evt, onFullscreenChange)
);

// Re-acquire the lock if the tab was hidden and came back while fullscreen.
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible' && fs.element) requestWakeLock();
});

/* ---------- Wiring ---------- */
toggleBtn.addEventListener('click', toggleFullscreen);
document.addEventListener('keydown', (e) => {
  if (e.target.matches('input, textarea, [contenteditable]')) return;
  if (e.key === 'f' || e.key === 'F') { e.preventDefault(); toggleFullscreen(); }
});
// Unsupported platforms (iPhone Safari) simply take the catch branch above
// on the first click and land in pseudo-fullscreen – no user-agent sniffing needed.
// One more mobile quirk: rotating the device changes the viewport *after*
// the event fires, so re-measure your canvas or layout a beat later.
const resizeStage = () => { /* re-measure whatever fills the screen */ };
window.addEventListener('orientationchange', () => setTimeout(resizeStage, 100));

اور مماثل سی ایس ایس ہے:

html { background: #000; }

:fullscreen { overflow: hidden; cursor: none; }
:fullscreen::backdrop { background: #000; }

/* Fallback for browsers without element fullscreen */
body.pseudo-fullscreen .app { position: fixed; inset: 0; }
body.pseudo-fullscreen .chrome { display: none; }

یہ تقریباً 60 لائنیں ہیں اور وہی کور ہے جسے آپ پروڈکشن میں چلائیں گے۔ تمام فل سکرین آئٹمز کو اینالیٹکس ایونٹس کے بطور لاگ کرتا ہے۔ ہے یہ وہ کوڈ ہے جو تبدیلی کو انجام دیتا ہے۔

مثال کے طور پر، یہ Blankscreen.io پر بلیک اسکرین پیج کو طاقت دیتا ہے۔ اس صفحہ کا پورا کام ڈسپلے کو مکمل طور پر سیاہ کرنا اور کلک کرنے یا کلک کرنے پر پوری اسکرین پر جانا ہے۔ F ایک کلید دبائیں، پوائنٹر کو چھپائیں، اسکرین پر ہوتے وقت جاگتے رہیں، اور اسکرین سے صاف طور پر دور جائیں۔ Esc. اگر آپ اسے اپنے آئی فون پر کھولتے ہیں، تو آپ اوپر دیکھ سکتے ہیں کہ اس کے بجائے یہ ورچوئل فل سکرین فال بیک کرتا ہے۔

یہی نمونہ حقیقی زندگی کے حالات میں لاگو ہوتا ہے۔ ایک بار کلک کرنے یا F بٹن کو دبانے سے پورا ڈسپلے سیاہ ہو جائے گا اور اسکرین اس وقت تک فعال رہے گی جب تک یہ ظاہر ہے۔ Esc براؤزر کو دوبارہ لوڈ کرتا ہے۔

ایک بار جب آپ کے پاس یہ پیٹرن ہو جائے تو، اسے اپنے ٹائمر، سلائیڈ شو، یا کینوس کے تجربے میں شامل کرنا اس عنصر پر چھوڑنے کا معاملہ ہے جسے آپ اسکرین پر کرنا چاہتے ہیں۔

فوری مسئلہ چیک لسٹ

براہ کرم شپنگ سے پہلے اس لسٹنگ کا جائزہ لیں۔ تمام آئٹمز وہ ہیں جنہیں میں نے کم از کم ایک بار کاٹا ہے۔

• صارف کی کارروائی کی ضرورت ہے: فل سکرین لوڈ ہونے پر، ٹائمر پر، یا ایک خاص وقت کے بعد ظاہر نہیں ہوتی ہے۔ await اس میں کچھ وقت لگے گا۔

• خود اسٹیٹس کو ٹریک نہ کریں۔ پڑھیں document.fullscreenElement اور سنو fullscreenchange.

• آپ اسے بلاک نہیں کر سکتے۔Esc: کسی بھی وقت جانے والے صارفین کے لیے ڈیزائن کیا گیا ہے۔

• مجھے اولڈ سفاری چاہیے۔ webkit سابقہ کس طرح کے بارے میں اور واقعہ کا نام۔

• آئی فون سفاری میں کوئی فل سکرین عنصر نہیں ہے۔ خصوصیت کا پتہ لگانا document.fullscreenEnabledرن ٹائم مستردوں کو سادہ کنسول وارننگز کے بجائے فال بیک ٹرگرز سمجھیں۔

• صفحہ کی اپنی کلیدوں کے لیے شارٹ کٹ چیک کریں۔ اگر کوئی ایپ حروف استعمال کرتی ہے تو براہ کرم صرف شارٹ کٹ استعمال کریں۔ داخل کریں فل سکرین پر جائیں اور پھر چھوڑ دیں۔ Esc.

• کی بورڈ کے لیے پوری اسکرین کی سطح کو قابل رسائی بنائیں (tabindex="0", Enter/Space)۔

• ویک لاک کو HTTPS کی ضرورت ہے۔ اسے بیٹری سیور موڈ میں مسترد کیا جا سکتا ہے اور صفحہ چھپنے پر حذف ہو سکتا ہے۔ تاریخ کی دوبارہ درخواست کریں۔ visibilitychange.

• ویک لاک کو جاری کریں۔ جیسے ہی وجہ غائب ہو جاتی ہے۔

• براہ کرم ایک پس منظر انسٹال کریں۔ htmlہاں bodyصفحہ کو پوری اسکرین میں دیکھتے وقت۔

نتیجہ

فل سکرین API ان براؤزر کی خصوصیات میں سے ایک ہے جو بظاہر ایک ون لائنر کی طرح ہے، لیکن شخصیت کی حامل ہے۔

بنیادی (requestFullscreen(), exitFullscreen(), fullscreenElementاور fullscreenchange واقعہ) یہ واقعی آسان ہے۔ آرٹ صارف کے اشاروں کے اصولوں کا احترام کرنا، UI کو اس کی اصل حالت کے بارے میں ایماندار رکھنا، سفاری کی تاریخ کو ہینڈل کرنا، اور یاد رکھنا کہ "فل سکرین" صرف آدھا کام ہے جب اسکرین دو منٹ کے بعد سیاہ ہو جاتی ہے۔ ویک لاک API اس فرق کو پورا کرتا ہے اور دونوں کو جوڑتا ہے۔ fullscreenchange دونوں کو صاف ستھرا رکھتا ہے۔

مندرجہ بالا 60 لائن پیٹرن میں اپنے عناصر شامل کریں، اور آپ کو ایک مکمل اسکرین تجربہ ملے گا جو پیشکشوں سے لے کر گیمز تک ہر چیز کے لیے استعمال ہونے کے لیے تیار ہے۔

مبارک کوڈنگ!