JavaScript ब्रिज API
विंडो
फ़ुल-स्क्रीन, picture-in-picture, सिस्टम बार के रंग, स्क्रीनशॉट रोकना, बिल्ड में कॉपी सुरक्षा चालू है या नहीं (AppMint.copyProtection), स्प्लैश स्क्रीन और विंडो बंद करना।
AppMint.copyProtection हेल्पर#
AppMint.copyProtection
उदाहरण
true जब ऐप कॉपी सुरक्षा चालू करके बना हो; वरना अनुपस्थित (undefined)। सिर्फ़ पढ़ने के लिए - पेज सुरक्षा चालू या बंद नहीं कर सकता, सिर्फ़ पूछ सकता है कि वह चालू है या नहीं।
लौटाता है: true, या सुरक्षा बंद होने पर (और ब्राउज़र में) undefined। ज़रूरत: बिल्ड करते समय चरण 3 (इंटीग्रेट) में डिस्प्ले विकल्प के अंदर कॉपी सुरक्षा चालू हो। डिफ़ॉल्ट रूप से बंद।
सुरक्षा चालू होने पर ऐप का टेक्स्ट चुना, कॉपी या कट नहीं किया जा सकता; कॉपी / कट, contextmenu इवेंट और Ctrl/Cmd + C, X और A एडिट होने वाले फ़ील्ड के बाहर रद्द हो जाते हैं; और कोई लॉन्ग-प्रेस मेन्यू नहीं आता। इनपुट, टेक्स्टएरिया, सेलेक्ट और contenteditable क्षेत्र पूरी तरह एडिट होने लायक रहते हैं, इसलिए फ़ॉर्म चलते रहते हैं।
सुरक्षा चालू होने पर अपने "कॉपी करें" बटन छिपा दें - वे कुछ कॉपी नहीं करेंगे और टूटे हुए दिखेंगे:
const protectedApp = !!(window.AppMint && window.AppMint.copyProtection === true);
document.querySelectorAll('[data-copy-button]').forEach((btn) => {
btn.hidden = protectedApp;
});या स्टार्ट-अप पर एक बार संकेत के शब्द चुनें:
const hint = document.getElementById('share-hint');
hint.textContent = (window.AppMint && window.AppMint.copyProtection === true)
? 'Tap Share to send this lesson to a friend.'
: 'Select any text to copy it, or tap Share.';जिस पेज को ऐप से बाहर नहीं जाना चाहिए, उसके लिए इसे स्क्रीनशॉट लॉक के साथ जोड़ें:
if (window.AppMint && AppMint.copyProtection === true && window.WebToApk && WebToApk.setSecureScreen) {
WebToApk.setSecureScreen(true); // also blocks screenshots and recents thumbnails
document.body.classList.add('protected');
}ध्यान दें: लिंक और इमेज पर लॉन्ग-प्रेस मेन्यू (खोलें, कॉपी करें, शेयर करें या डाउनलोड करें) एक अलग बिल्ड स्विच है, लिंक और इमेज पर लॉन्ग-प्रेस मेन्यू, उसी जगह। यह डिफ़ॉल्ट रूप से बंद है, इसलिए जब तक आप इसे चालू न करें लिंक पर लॉन्ग-प्रेस कुछ नहीं करता; कॉपी सुरक्षा इसे हमेशा बंद रखती है। पेज किसी एक एलिमेंट पर contextmenu रद्द करके (el.addEventListener('contextmenu', (e) => e.preventDefault())) मेन्यू को फिर भी मना कर सकता है। सुरक्षा ऐप के अंदर कॉपी करना रोकती है; यह स्क्रीनशॉट नहीं रोकती - उसके लिए देखें WebToApk.setSecureScreen(true).
screen.orientation वेब स्टैंडर्ड#
screen.orientation.lock(type) / unlock()
उदाहरण
स्टैंडर्ड Screen Orientation लॉक, जिसे सादा WebView मना कर देता है: वीडियो या गेम के लिए ऐप को लैंडस्केप में घुमाता है और फिर वापस।
लौटाता है: lock(type) → एक Promise जो ओरिएंटेशन माँगे जाने पर पूरा होता है; अनजान प्रकार पर TypeError और Android TV पर NotSupportedError के साथ रिजेक्ट होता है। unlock() ऐप को उस ओरिएंटेशन पर लौटाता है जिससे वह बना था। ज़रूरत: कुछ नहीं।
const player = document.getElementById('player');
document.getElementById('fullscreen').addEventListener('click', async () => {
try {
await screen.orientation.lock('landscape'); // either landscape, follows the sensor
} catch (e) {
console.log('Could not rotate:', e.name);
}
player.classList.add('wide');
});
document.getElementById('done').addEventListener('click', () => {
screen.orientation.unlock();
player.classList.remove('wide');
});
screen.orientation.addEventListener('change', () => console.log(screen.orientation.type));शुरू होते ही गेम को लैंडस्केप में घुमाएँ; Android TV पर स्क्रीन पहले से लैंडस्केप होती है, इसलिए आगे बढ़ें:
async function startGame() {
try {
await screen.orientation.lock('landscape');
} catch (e) {
if (e.name !== 'NotSupportedError') console.log('Could not rotate:', e.name);
}
runGame();
}
function quitGame() {
screen.orientation.unlock(); // back to the orientation the app was built with
showMenu();
}चल रहे वीडियो के आकार के हिसाब से चलें, और ख़त्म होने पर लौट आएँ:
const video = document.getElementById('clip');
video.addEventListener('play', () => {
const wide = video.videoWidth >= video.videoHeight;
screen.orientation.lock(wide ? 'landscape' : 'portrait').catch((e) => console.log(e.name));
});
video.addEventListener('ended', () => screen.orientation.unlock());ध्यान दें: प्रकार: any, natural, portrait, portrait-primary, portrait-secondary, landscape, landscape-primary, landscape-secondary। Chrome के उलट, पेज का पहले फ़ुल-स्क्रीन होना ज़रूरी नहीं। AI से बने ऐप lockOrientation() इस्तेमाल करते हैं @/lib/appmintNative.
window.close वेब स्टैंडर्ड#
window.close()
उदाहरण
ऐप की मुख्य स्क्रीन बंद करता है। शेल window.close() को बदल देता है, ताकि आपके पेज का "बंद करें" या "बाहर निकलें" बटन ऐप के अंदर काम करे।
लौटाता है: कुछ नहीं। ज़रूरत: कुछ नहीं।
document.getElementById('exit-btn').onclick = function () {
saveDraft(); // anything unsaved — the screen closes at once
window.close(); // in the app: WebToApk.closeWindow(); in a browser: normal behaviour
};ब्राउज़र में बटन छिपा दें, जहाँ यूज़र के खोले टैब पर window.close() आम तौर पर कुछ नहीं करता:
if (!window.WebToApk) document.getElementById('exit-btn').hidden = true;पहले पूछें, क्योंकि window.close() चलते ही ऐप बंद हो जाता है:
document.getElementById('quit').addEventListener('click', function () {
if (hasUnsavedChanges() && !confirm('You have unsaved changes. Close the app anyway?')) {
return;
}
window.close();
});ध्यान दें: बदली हुई कॉल हर पेज के लोड होने के बाद लगाई जाती है, इसलिए पेज की बिल्कुल पहली स्क्रिप्ट चलने के दौरान की गई कॉल WebView के अपने window.close() का इस्तेमाल करती है (जो कुछ नहीं करता)। इस रास्ते पर बाहर निकलने की कोई पुष्टि नहीं है। साइन-इन पॉप-अप जो window.close() कॉल करता है, उसे अलग से सँभाला जाता है: वह पॉप-अप बंद करता है, ऐप नहीं।
__lockOrientation ब्रिज#
window.WebToApk.__lockOrientation(type: String): String
screen.orientation.lock(type): "ok", ऐसी स्ट्रिंग के लिए "type" जो OrientationLockType नहीं है, या "unsupported" (Android TV हमेशा लैंडस्केप होता है)।
उदाहरण
screen.orientation.lock(type) के पीछे का आंतरिक ट्रांसपोर्ट। पेज स्टैंडर्ड API इस्तेमाल करते हैं; इसे कभी सीधे कॉल न करें - __ मेथड बिना सूचना के बदल सकते हैं।
लौटाता है: 'ok', ऐसी स्ट्रिंग के लिए 'type' जो ओरिएंटेशन लॉक प्रकार नहीं है, या 'unsupported' (Android TV)। ज़रूरत: कुछ चालू करने की ज़रूरत नहीं।
पब्लिक API इस्तेमाल करें:
document.getElementById('play').addEventListener('click', async () => {
try { await screen.orientation.lock('landscape'); } catch (e) { /* NotSupportedError on TV */ }
});
document.getElementById('exit').addEventListener('click', () => screen.orientation.unlock());ग़लत लॉक प्रकार को ऐसे डिवाइस से अलग पहचानें जो घूम नहीं सकता:
async function lockTo(type) {
if (!screen.orientation || typeof screen.orientation.lock !== 'function') return 'unsupported';
try {
await screen.orientation.lock(type);
return 'ok';
} catch (e) {
if (e instanceof TypeError) return 'bad-type'; // not an OrientationLockType string
return 'unsupported'; // NotSupportedError (Android TV)
}
}
lockTo('portrait-primary').then((r) => console.log('orientation lock:', r));यूज़र के साइन करने के दौरान स्क्रीन को वैसे ही जमा दें जैसे वह उसे पकड़े है, फिर रोटेशन वापस दें:
async function startSigning() {
const current = screen.orientation.type; // e.g. 'landscape-primary'
try { await screen.orientation.lock(current); } catch (e) { /* keep going unlocked */ }
showSignaturePad();
}
function finishSigning() {
hideSignaturePad();
screen.orientation.unlock();
}नोट्स: ऐप शेल (WebApiPolyfills.kt) में लागू। वही पेज कोड Chrome में बिना बदलाव के काम करता है।
__unlockOrientation ब्रिज#
window.WebToApk.__unlockOrientation()
screen.orientation.unlock(): क्रिएटर ने जिस ओरिएंटेशन के साथ बनाया था उस पर लौटता है।
उदाहरण
screen.orientation.unlock() के पीछे का आंतरिक ट्रांसपोर्ट। पेज स्टैंडर्ड API इस्तेमाल करते हैं; इसे कभी सीधे कॉल न करें - __ मेथड बिना सूचना के बदल सकते हैं।
लौटाता है: कुछ नहीं; ऐप बिल्ड के समय चुने ओरिएंटेशन पर लौट जाता है। ज़रूरत: कुछ चालू करने की ज़रूरत नहीं।
पब्लिक API इस्तेमाल करें:
document.getElementById('play').addEventListener('click', async () => {
try { await screen.orientation.lock('landscape'); } catch (e) { /* NotSupportedError on TV */ }
});
document.getElementById('exit').addEventListener('click', () => screen.orientation.unlock());सिर्फ़ गेम वाला रूट लैंडस्केप है; बाकी हर रूट ऐप के अपने ओरिएंटेशन पर लौट जाता है:
function onRouteChange(path) {
if (path.startsWith('/play')) {
screen.orientation.lock('landscape').catch(() => {});
} else if (screen.orientation && typeof screen.orientation.unlock === 'function') {
screen.orientation.unlock(); // menus, settings and the store
}
}
window.addEventListener('popstate', () => onRouteChange(location.pathname));
onRouteChange(location.pathname);ऑनबोर्डिंग स्लाइड सीधी रखें, और पूरी होने पर अनलॉक करें:
async function showOnboarding() {
try { await screen.orientation.lock('portrait'); } catch (e) { /* TV: no lock */ }
await runOnboardingSlides(); // your own flow
screen.orientation.unlock(); // back to the orientation the app was built with
}नोट्स: ऐप शेल (WebApiPolyfills.kt) में लागू। वही पेज कोड Chrome में बिना बदलाव के काम करता है।
__wakeLock ब्रिज#
window.WebToApk.__wakeLock(docId: String, held: Boolean): Boolean
Screen Wake Lock: [held] true होने पर स्क्रीन तब तक चालू रहती है जब तक दस्तावेज़ [docId] के पास सेंटिनल है। लॉक न लिया जा सका तो false लौटाता है।
उदाहरण
navigator.wakeLock.request('screen') और WakeLockSentinel.release() के पीछे का आंतरिक ट्रांसपोर्ट। पेज स्टैंडर्ड API इस्तेमाल करते हैं; इसे कभी सीधे कॉल न करें - __ वाले मेथड बिना सूचना बदल सकते हैं।
लौटाता है: उस दस्तावेज़ के लिए स्क्रीन-ऑन फ़्लैग लागू होने पर true। ज़रूरत: कुछ चालू करने की ज़रूरत नहीं।
पब्लिक API इस्तेमाल करें:
let lock = null;
async function keepScreenOn() {
if (!('wakeLock' in navigator)) return;
lock = await navigator.wakeLock.request('screen');
lock.addEventListener('release', () => { lock = null; });
}जब यूज़र ऐप में लौटे तो लॉक फिर से लें, क्योंकि बैकग्राउंड में हर लॉक छूट जाता है:
let lock = null;
let wantLock = false;
async function acquire() {
if (!('wakeLock' in navigator)) return;
try {
lock = await navigator.wakeLock.request('screen');
lock.addEventListener('release', () => { lock = null; });
} catch (e) {
lock = null; // NotAllowedError: the page was not visible
}
}
function startRecipeMode() { wantLock = true; acquire(); }
function stopRecipeMode() { wantLock = false; if (lock) lock.release(); }
document.addEventListener('visibilitychange', () => {
if (wantLock && !lock && document.visibilityState === 'visible') acquire();
});स्क्रीन सिर्फ़ तब चालू रखें जब वर्कआउट टाइमर चले, और टाइमर ख़त्म होने पर उसे फिर सोने दें:
async function runTimer(seconds) {
const lock = ('wakeLock' in navigator)
? await navigator.wakeLock.request('screen').catch(() => null)
: null;
try {
for (let left = seconds; left > 0; left--) {
showRemaining(left);
await new Promise((r) => setTimeout(r, 1000));
}
} finally {
if (lock && !lock.released) await lock.release();
}
}ध्यान दें: ऐप बैकग्राउंड में जाते ही हर लॉक छोड़ देता है और appmint:wakelock-lost चलाता है, जो सेंटिनल रिलीज़ कर देता है (उनका release इवेंट चलता है)।
closeWindow ब्रिज#
window.WebToApk.closeWindow()
promise रैपर इस्तेमाल करें: const r = await AppMint.requestReview(); // {result, openedStore} const r = await AppMint.requestReview({ openStore: true }); // listing if no sheet r.result: 'shown' | 'not_from_play' | 'quota' | 'error'। RatePrompt देखें।
इसे अलग से नहीं, बल्कि इसके समूह Google Play की इन-ऐप रिव्यू शीट में समझाया गया है।
उदाहरण
ऐप की मुख्य स्क्रीन बंद करता है (आख़िरी पेज पर Back दबाने जैसा)। पेज आम तौर पर स्टैंडर्ड window.close() कॉल करते हैं, जिसे शेल यहाँ भेज देता है।
लौटाता है: कुछ नहीं। ज़रूरत: कुछ नहीं।
document.getElementById('quit').onclick = function () {
if (confirm('Close the app?')) window.close(); // in the app: the screen closes
};सीधी कॉल भी यही काम करती है:
if (window.WebToApk && typeof window.WebToApk.closeWindow === 'function') {
window.WebToApk.closeWindow();
}"बाहर निकलें" बटन जो पहले सेव करता है, और ब्राउज़र में छिपा रहता है जहाँ बंद करने के लिए कोई ऐप स्क्रीन नहीं होती:
var exitBtn = document.getElementById('exit-btn');
if (!(window.WebToApk && typeof window.WebToApk.closeWindow === 'function')) {
exitBtn.hidden = true;
} else {
exitBtn.onclick = async function () {
exitBtn.disabled = true;
await saveDraft(); // your own save; closing does not wait for anything
window.WebToApk.closeWindow();
};
}ध्यान दें: यह ऐप की स्क्रीन तुरंत बंद कर देता है - बिल्ड में हो तब भी बाहर निकलने की पुष्टि नहीं माँगता। जो सेव नहीं है उसे पहले सेव कर लें। ब्राउज़र में window.close() सिर्फ़ वही टैब बंद करता है जिसे स्क्रिप्ट ने ख़ुद खोला हो।
enterPip ब्रिज#
window.WebToApk.enterPip(): Boolean
पूरे ऐप को अभी एक तैरती picture-in-picture विंडो में समेट देता है - ऐसा वीडियो या कॉल जिसे यूज़र बाहर जाते हुए भी देखते रहना चाहता है। Android 8+ और सिर्फ़ तब जब बिल्ड ने PiP चालू किया हो (उसे ज़रूरी मैनिफ़ेस्ट फ़्लैग); बताता है कि विंडो खुली या नहीं। PiP चालू होने पर ऐप से बाहर जाना यही अपने आप कर देता है; यह साफ़ "छोटा करें" बटन है।
उदाहरण
पूरे ऐप को अभी एक छोटी तैरती picture-in-picture विंडो में समेट देता है - वीडियो या कॉल के लिए "छोटा करें" बटन।
लौटाता है: तैरती विंडो खुली तो true, वरना false (तुरंत)। ज़रूरत: बिल्ड करते समय चरण 3 (इंटीग्रेट) में डिस्प्ले विकल्प के अंदर Picture-in-Picture (PiP) चालू हो। Android 8+।
var pipBtn = document.getElementById('pip-btn');
pipBtn.onclick = function () {
if (!(window.WebToApk && typeof window.WebToApk.enterPip === 'function')) return;
var ok = window.WebToApk.enterPip();
if (!ok) pipBtn.hidden = true; // PiP not enabled in this build, or Android 7 and older
};पेज को छोटी विंडो में फ़िट करें: विंडो बहुत पतली हो जाती है, इसलिए resize लिसनर वीडियो के अलावा सब कुछ छिपा सकता है।
window.addEventListener('resize', function () {
var small = window.innerWidth < 300;
document.querySelector('nav').style.display = small ? 'none' : '';
});तैरती विंडो के खुलने और बंद होने को appmint:pip इवेंट (detail.inPip) से फ़ॉलो करें, जैसे किसी कॉल के कंट्रोल छिपाने के लिए:
window.addEventListener('appmint:pip', function (e) {
var inPip = !!(e.detail && e.detail.inPip);
document.body.classList.toggle('pip', inPip); // CSS: .pip .call-controls { display: none; }
if (!inPip) {
document.getElementById('chat-panel').hidden = false; // back to the full-size screen
}
});
document.getElementById('minimise').onclick = function () {
if (window.WebToApk && typeof window.WebToApk.enterPip === 'function') {
document.getElementById('chat-panel').hidden = true;
window.WebToApk.enterPip();
}
};ध्यान दें: PiP चालू होने पर Home दबाने से ही ऐप अपने आप तैरती विंडो में चला जाता है; यह तरीका सिर्फ़ साफ़ बटन के लिए है। PiP स्विच के बिना बने बिल्ड में यह false लौटाता है, क्योंकि जिस मैनिफ़ेस्ट फ़्लैग की ज़रूरत है वह नहीं है। PiP विंडो का साइज़ Android चुनता है। AI से बने ऐप pip इस्तेमाल कर सकते हैं @/lib/appmintNative.
isFullscreen ब्रिज#
window.WebToApk.isFullscreen(): Boolean
पेज को ख़ुद स्टेटस बार (घड़ी/बैटरी) और नेविगेशन बार छिपाने देता है - जैसे कोई गेम अपनी प्ले स्क्रीन में जाए: WebToApk.setFullscreen(true) // hide the system bars WebToApk.setFullscreen(false) // bring them back WebToApk.toggleFullscreen() WebToApk.isFullscreen() चुनाव लॉन्च के बीच याद रखा जाता है। जिन ऐप को क्रिएटर पहले ही फ़ुल-स्क्रीन/कियोस्क पर लॉक कर चुका है उनमें यह बेअसर है - वहाँ लौटने को कुछ नहीं है। साइड-मेन्यू का "Fullscreen" आइटम अंतिम यूज़र के लिए इसी का रूप है और क्रिएटर के enableFullscreenToggle विकल्प से तय होता है; यह ब्रिज ऐप के अपने पेज को हमेशा उपलब्ध है।
इसे अलग से नहीं, बल्कि इसके समूह फ़ुल-स्क्रीन ब्रिज में समझाया गया है।
उदाहरण
बताता है कि Android की स्टेटस और नेविगेशन बार अभी छिपी हैं या नहीं।
लौटाता है: true / false, तुरंत। ज़रूरत: कुछ नहीं।
function barsHidden() {
if (window.WebToApk && typeof window.WebToApk.isFullscreen === 'function') {
return window.WebToApk.isFullscreen();
}
return false; // in a browser
}
if (barsHidden()) {
document.getElementById('fs-btn').textContent = 'Exit fullscreen';
}शुरू में याद रखे गए चुनाव के हिसाब से पेज बनाएँ, क्योंकि वह रीस्टार्ट के बाद भी रहता है:
document.addEventListener('DOMContentLoaded', function () {
var hidden = !!(window.WebToApk && typeof window.WebToApk.isFullscreen === 'function' &&
window.WebToApk.isFullscreen());
document.documentElement.classList.toggle('bars-hidden', hidden);
// CSS: .bars-hidden header { padding-top: env(safe-area-inset-top); }
});जब ऐप फ़ुल-स्क्रीन बना हो और बार वापस न आ सकें, तब "बार दिखाएँ" बटन दें:
function showBars() {
var W = window.WebToApk;
if (!(W && typeof W.isFullscreen === 'function')) return;
W.setFullscreen(false);
setTimeout(function () { // the change is applied on the UI thread
if (W.isFullscreen()) {
document.getElementById('bars-btn').hidden = true;
}
}, 100);
}ध्यान दें: यह true लौटाता है जब क्रिएटर ने ऐप फ़ुल-स्क्रीन या इमर्सिव कियोस्क मोड के साथ बनाया हो, या जब पेज ने setFullscreen(true) / toggleFullscreen() कॉल किया हो। पहली स्थिति में setFullscreen(false) बार को वापस नहीं ला सकता।
isSecureScreen ब्रिज#
window.WebToApk.isSecureScreen(): Boolean
WebToApk.setSecureScreen(true) // block screenshots on THIS page WebToApk.setSecureScreen(false) // release it early WebToApk.isSecureScreen() // -> boolean सुरक्षा उसी पेज की होती है जिसने उसे माँगा। ऐप के कहीं और जाते ही यह हट जाती है - नया दस्तावेज़, pushState रूट, #hash रूट - ताकि सुरक्षित स्क्रीन बाकी ऐप को लॉक न छोड़ दे, और जो पेज रीलोड के बाद सुरक्षा वापस चाहता है वह बस फिर से माँग ले। यह क्या करता है: चालू रहने पर स्क्रीनशॉट, स्क्रीन रिकॉर्डिंग, कास्टिंग और रीसेंट्स-स्क्रीन थंबनेल सब रुक जाते हैं। यह क्या नहीं कर सकता: स्क्रीन की ओर तानी गई कैमरा को रोकना। Android पर कुछ भी नहीं रोक सकता, और यहाँ का कोई ब्रिज दिखावा नहीं करेगा।
इसे अलग से नहीं, बल्कि इसके समूह स्क्रीन-कैप्चर सुरक्षा में समझाया गया है।
उदाहरण
बताता है कि स्क्रीनशॉट सुरक्षा (setSecureScreen) अभी चालू है या नहीं।
लौटाता है: एक boolean, तुरंत। ज़रूरत: कुछ नहीं।
function updateLockIcon() {
var on = !!window.WebToApk &&
typeof window.WebToApk.isSecureScreen === 'function' &&
window.WebToApk.isSecureScreen();
document.getElementById('shield').hidden = !on;
}कार्ड नंबर दिखाने से पहले जाँचें, और अगर इस पेज ने अभी तक सुरक्षा नहीं माँगी तो पहले उसे चालू करें:
function revealCardNumber(full) {
var W = window.WebToApk;
if (W && typeof W.isSecureScreen === 'function' && !W.isSecureScreen()) {
W.setSecureScreen(true); // the new state is committed when this returns
}
document.getElementById('card-number').textContent = full;
}"स्क्रीनशॉट से छिपाएँ" स्विच जो असली स्थिति से शुरू होता है और उसे पलटता है:
var toggle = document.getElementById('privacy-toggle');
var W = window.WebToApk;
if (!W || typeof W.isSecureScreen !== 'function') {
toggle.hidden = true;
} else {
toggle.checked = W.isSecureScreen();
toggle.addEventListener('change', function () {
toggle.checked = W.setSecureScreen(!W.isSecureScreen());
});
}ध्यान दें: जब ऐप किसी दूसरे पेज या रूट पर जाता है तो यह अपने आप false पर लौट जाता है, क्योंकि सुरक्षा उसी पेज की होती है जिसने उसे माँगा था।
setFullscreen ब्रिज#
window.WebToApk.setFullscreen(enabled: Boolean)
पेज को ख़ुद स्टेटस बार (घड़ी/बैटरी) और नेविगेशन बार छिपाने देता है - जैसे कोई गेम अपनी प्ले स्क्रीन में जाए: WebToApk.setFullscreen(true) // hide the system bars WebToApk.setFullscreen(false) // bring them back WebToApk.toggleFullscreen() WebToApk.isFullscreen() चुनाव लॉन्च के बीच याद रखा जाता है। जिन ऐप को क्रिएटर पहले ही फ़ुल-स्क्रीन/कियोस्क पर लॉक कर चुका है उनमें यह बेअसर है - वहाँ लौटने को कुछ नहीं है। साइड-मेन्यू का "Fullscreen" आइटम अंतिम यूज़र के लिए इसी का रूप है और क्रिएटर के enableFullscreenToggle विकल्प से तय होता है; यह ब्रिज ऐप के अपने पेज को हमेशा उपलब्ध है।
इसे अलग से नहीं, बल्कि इसके समूह फ़ुल-स्क्रीन ब्रिज में समझाया गया है।
उदाहरण
Android की स्टेटस बार और नेविगेशन बार को छिपाता (true) या दिखाता (false) है, जैसे जब कोई गेम अपनी प्ले स्क्रीन में जाए।
लौटाता है: कुछ नहीं। ज़रूरत: कुछ नहीं - यह आपके पेज को हमेशा उपलब्ध है। चुनाव लॉन्च के बीच याद रखा जाता है।
function enterPlayScreen() {
if (window.WebToApk && typeof window.WebToApk.setFullscreen === 'function') {
window.WebToApk.setFullscreen(true); // hide clock/battery and the nav bar
}
}
function leavePlayScreen() {
if (window.WebToApk && window.WebToApk.setFullscreen) {
window.WebToApk.setFullscreen(false); // bring the bars back
}
}बार छिपे होने पर अपनी सामग्री को कैमरा कट-आउट के नीचे जाने से बचाएँ:
document.body.style.paddingTop = 'env(safe-area-inset-top)';
document.body.style.paddingBottom = 'env(safe-area-inset-bottom)';वीडियो चलने के दौरान बार छिपाएँ और उसके रुकने या ख़त्म होने पर वापस लाएँ:
var video = document.getElementById('movie');
function hideBars(hidden) {
if (window.WebToApk && typeof window.WebToApk.setFullscreen === 'function') {
window.WebToApk.setFullscreen(hidden);
}
}
video.addEventListener('play', function () { hideBars(true); });
video.addEventListener('pause', function () { hideBars(false); });
video.addEventListener('ended', function () { hideBars(false); });ध्यान दें: चरण 3 (इंटीग्रेट) में फ़ुल-स्क्रीन (या इमर्सिव कियोस्क मोड) चालू करके बने ऐप में यह कुछ नहीं करता - क्रिएटर ने वह चुनाव लॉक कर दिया है। यह सिर्फ़ Android के बार छिपाता है; ऐप का अपना टॉप बार (साइड-मेन्यू बटन वाला) टॉप बार दिखाएँ स्विच है। चालू होने पर शेल आपके viewport मेटा में viewport-fit=cover जोड़ देता है ताकि पेज पूरी स्क्रीन में फैल सके। toggleFullscreen और isFullscreen देखें। AI से बने ऐप fullscreen इस्तेमाल कर सकते हैं @/lib/appmintNative.
setSecureScreen ब्रिज#
window.WebToApk.setSecureScreen(enabled: Boolean): Boolean
मौजूदा पेज के लिए सुरक्षा सेट करता है और अभी लागू स्थिति लौटाता है। विंडो फ़्लैग UI थ्रेड पर लागू होता है, लेकिन जो स्थिति यह लौटाता है वह पहले ही तय हो चुकी है, इसलिए पेज इसे कॉल करके कॉलबैक का इंतज़ार किए बिना तुरंत अपनी संवेदनशील सामग्री दिखा सकता है।
उदाहरण
जब मौजूदा पेज कुछ निजी दिखा रहा हो, तब स्क्रीनशॉट, स्क्रीन रिकॉर्डिंग, कास्टिंग और रीसेंट्स-स्क्रीन प्रीव्यू को रोकता है।
लौटाता है: तुरंत एक boolean - अभी लागू स्थिति (जो वैल्यू आपने दी)। कॉल के तुरंत बाद आप निजी सामग्री दिखा सकते हैं। ज़रूरत: कुछ नहीं।
function showStatement() {
if (window.WebToApk && typeof window.WebToApk.setSecureScreen === 'function') {
window.WebToApk.setSecureScreen(true);
}
render(statementView);
}इसे ख़ुद तभी छोड़ें जब आप निजी सामग्री को नेविगेट किए बिना छिपाएँ (मोडल बंद होना, एक पेज के अंदर टैब बदलना):
function closeCardDetails() {
hide(cardDetailsModal);
if (window.WebToApk && typeof window.WebToApk.setSecureScreen === 'function') {
window.WebToApk.setSecureScreen(false);
}
}एकबारगी रिकवरी कोड तभी दिखाएँ जब कैप्चर रुक चुका हो, क्योंकि कॉल लागू स्थिति के साथ जवाब देती है:
function revealRecoveryCode(code) {
var W = window.WebToApk;
if (!(W && typeof W.setSecureScreen === 'function')) {
alert('Open the app to see your recovery code.');
return;
}
if (W.setSecureScreen(true)) {
document.getElementById('recovery-code').textContent = code;
}
}ध्यान दें: सुरक्षा उसी पेज की होती है जिसने माँगी। ऐप के कहीं और जाते ही यह हट जाती है - नया पेज, pushState रूट या #hash रूट - इसलिए बाहर निकलते समय कुछ साफ़ करने की ज़रूरत नहीं, और रीलोड के बाद पेज को फिर माँगना होगा। इसे टाइमर पर दोबारा लागू न करें: यूज़र के स्क्रीनशॉट बटन दबाने के समय फ़्लैग पहले से चालू होना चाहिए। स्क्रीन की ओर ताने गए कैमरे को कुछ नहीं रोक सकता।
setStatusBarColor ब्रिज#
window.WebToApk.setStatusBarColor(color: String, style: String): Boolean
स्टेटस और नेविगेशन बार को [color] में रंगता है और आइकन का रंग चुनता है: [style] 'light' का मतलब गहरे बार पर हल्के आइकन, 'dark' इसका उलटा, '' चमक को तय करने देता है। [color] है `#RGB`, `#RGBA`, `#RRGGBB`, `#AARRGGBB` (alpha पहले - CSS का `#RRGGBBAA` क्रम भी alpha-पहले पढ़ा जाता है) या कोई सादा रंग नाम ('black', 'navy'…); `rgb()`/`hsl()` नहीं पढ़े जाते। रंग पार्स न होने पर false लौटाता है।
उदाहरण
Android की स्टेटस बार को एक रंग देता है और उस पर हल्के या गहरे आइकन चुनता है।
लौटाता है: true, या रंग पार्स न होने पर false (तुरंत)। ज़रूरत: कुछ नहीं।
style 'light' (गहरे बार के लिए हल्के आइकन), 'dark' (हल्के बार के लिए गहरे आइकन), या '' (शेल रंग की चमक से चुनता है) होता है:
function paintBar(color, style) {
if (window.WebToApk && typeof window.WebToApk.setStatusBarColor === 'function') {
return window.WebToApk.setStatusBarColor(color, style);
}
return false; // in a browser
}
paintBar('#0B0F1A', 'light'); // dark bar, light icons
paintBar('#FFFFFF', 'dark'); // white bar, dark icons
paintBar('#0E7C86', ''); // icons chosen automaticallyबार को हर स्क्रीन से मिलाएँ:
function showScreen(name) {
var colors = { home: '#0B0F1A', settings: '#FFFFFF' };
paintBar(colors[name] || '#0B0F1A', name === 'settings' ? 'dark' : 'light');
}फ़ोन की लाइट या डार्क थीम को फ़ॉलो करें, ऐप खुला होने के दौरान स्विच को भी:
var darkTheme = window.matchMedia('(prefers-color-scheme: dark)');
function matchTheme() {
if (!(window.WebToApk && typeof window.WebToApk.setStatusBarColor === 'function')) return;
if (darkTheme.matches) {
window.WebToApk.setStatusBarColor('#121212', 'light');
} else {
window.WebToApk.setStatusBarColor('#F5F5F5', 'dark');
}
}
matchTheme();
darkTheme.addEventListener('change', matchTheme);ध्यान दें: रंग Android के रंग स्ट्रिंग हैं: #RRGGBB या #AARRGGBB (और red जैसे नाम)। rgb(...) या #RGB जैसे CSS रूप false लौटाते हैं। यह Android 15+ पर भी काम करता है, जहाँ Capacitor का StatusBar प्लगइन बार को रंग नहीं सकता। बार छिपे होने (फ़ुल-स्क्रीन) के दौरान रंग तब के लिए रखा जाता है जब वे लौटें। AI से बने ऐप setStatusBar इस्तेमाल कर सकते हैं @/lib/appmintNative.
splashHold ब्रिज#
window.WebToApk.splashHold()
ब्रांडेड लॉन्च स्प्लैश को तब तक रखता है जब तक [splashReady] कॉल न हो। डिफ़ॉल्ट रूप से स्प्लैश तब छिप जाता है जब बॉडी में लेआउट हुए चाइल्ड आ जाते हैं, जिसका मतलब उस ऐप के लिए जो स्केलेटन बनाकर फिर पहली स्क्रीन लाता है, "स्प्लैश, फिर स्केलेटन" होता है। जो ऐप पूरी बनी पहली स्क्रीन दिखाना चाहता है, वह इसे इम्पोर्ट पर और स्क्रीन आने पर [splashReady] कॉल करता है। पेंट पोल जितने ही 6 सेकंड के बैकस्टॉप तक सीमित है, इसलिए जो पेज कभी तैयार नहीं बताता वह भी खुल जाता है।
उदाहरण
ऐप का लॉन्च स्प्लैश तब तक स्क्रीन पर रखता है जब तक आप splashReady() कॉल न करें - ताकि यूज़र को आपकी पूरी बनी पहली स्क्रीन दिखे, "स्प्लैश, फिर लोडिंग स्केलेटन" नहीं।
लौटाता है: कुछ नहीं। ज़रूरत: कुछ नहीं।
इसे जितना जल्दी हो सके कॉल करें (अपनी पहली स्क्रिप्ट के सबसे ऊपर), फिर पहली स्क्रीन बनते ही splashReady() कॉल करें:
if (window.WebToApk && typeof window.WebToApk.splashHold === 'function') {
window.WebToApk.splashHold();
}
loadFirstScreen() // your own async start-up (fetch data, render)
.catch(function (err) { showError(err); })
.then(function () {
if (window.WebToApk && window.WebToApk.splashReady) window.WebToApk.splashReady();
});स्प्लैश तब तक रोके रखें जब तक पहली स्क्रीन की हीरो इमेज लोड न हो जाए, ताकि ऐप पूरी बनी तस्वीर के साथ खुले:
if (window.WebToApk && typeof window.WebToApk.splashHold === 'function') {
window.WebToApk.splashHold();
}
function releaseSplash() {
if (window.WebToApk && window.WebToApk.splashReady) window.WebToApk.splashReady();
}
var hero = document.getElementById('hero');
if (hero.complete) {
releaseSplash();
} else {
hero.addEventListener('load', releaseSplash);
hero.addEventListener('error', releaseSplash); // a broken image must not keep the splash up
}होल्ड तभी करें जब पहली स्क्रीन को डेटा चाहिए, और जो स्क्रीन तुरंत बन जाती है उसे सामान्य रूप से खुलने दें:
var signedIn = !!localStorage.getItem('session');
if (signedIn && window.WebToApk && typeof window.WebToApk.splashHold === 'function') {
window.WebToApk.splashHold(); // the dashboard needs its data before it looks right
}
if (signedIn) {
loadDashboard().finally(function () {
if (window.WebToApk && window.WebToApk.splashReady) window.WebToApk.splashReady();
});
} else {
showLoginScreen(); // paints at once; the splash hides by itself
}ध्यान दें: splashHold() के बिना स्प्लैश तब छिप जाता है जब पेज बॉडी में दिखने वाले चाइल्ड आ जाते हैं। रोका हुआ स्प्लैश भी कुछ सेकंड बाद अपने आप छिप जाता है (सामान्य पेंट-जाँच जैसा ही बैकस्टॉप), इसलिए जो पेज कभी splashReady() कॉल नहीं करता वह भी खुल जाता है। त्रुटि वाले रास्ते पर भी हमेशा splashReady() कॉल करें। क्रिएटर का न्यूनतम स्प्लैश समय फिर भी लागू रहता है। AI से बने ऐप splash इस्तेमाल कर सकते हैं, @/lib/appmintNative.
splashReady ब्रिज#
window.WebToApk.splashReady()
पहली स्क्रीन आ गई है - लॉन्च स्प्लैश अभी छिपा दें (क्रिएटर की न्यूनतम स्प्लैश अवधि के अधीन)। बार-बार कॉल करना सुरक्षित है; कुछ रुका न हो तो बेअसर।
उदाहरण
शेल को बताता है कि आपकी पहली स्क्रीन आ गई है, ताकि लॉन्च स्प्लैश अभी छिप जाए।
लौटाता है: कुछ नहीं। ज़रूरत: कुछ नहीं। एक से ज़्यादा बार कॉल करना सुरक्षित है, और कुछ रुका न हो तब भी बेअसर है।
यह इसके साथ जुड़ता है splashHold():
if (window.WebToApk && window.WebToApk.splashHold) window.WebToApk.splashHold();
async function start() {
try {
var res = await fetch('/api/today');
renderToday(await res.json());
} catch (e) {
renderOfflineMessage();
} finally {
if (window.WebToApk && typeof window.WebToApk.splashReady === 'function') {
window.WebToApk.splashReady(); // hide the splash in every case
}
}
}
start();स्क्रीन तभी दिखाएँ जब ब्राउज़र ने वह पेंट कर दिया हो जो आपने अभी रेंडर किया (दो एनिमेशन फ़्रेम):
renderApp(document.getElementById('root'));
requestAnimationFrame(function () {
requestAnimationFrame(function () {
if (window.WebToApk && typeof window.WebToApk.splashReady === 'function') {
window.WebToApk.splashReady();
}
});
});कई स्टार्ट-अप काम पूरे होने का इंतज़ार करें, और उनमें से एक के विफल होने पर भी स्प्लैश छिपा दें:
if (window.WebToApk && window.WebToApk.splashHold) window.WebToApk.splashHold();
Promise.allSettled([
loadProfile(), // your own start-up requests
loadFeed(),
document.fonts.ready // no flash of the wrong font
]).then(function (results) {
results.forEach(function (r) { if (r.status === 'rejected') console.warn(r.reason); });
if (window.WebToApk && typeof window.WebToApk.splashReady === 'function') {
window.WebToApk.splashReady();
}
});ध्यान दें: क्रिएटर की न्यूनतम स्प्लैश अवधि अब भी मानी जाती है। अगर आप कभी splashHold() कॉल नहीं करते, तो पेज पेंट होने पर स्प्लैश अपने आप छिप जाता है, और splashReady() अलग से कुछ नहीं करता।
toggleFullscreen ब्रिज#
window.WebToApk.toggleFullscreen()
पेज को ख़ुद स्टेटस बार (घड़ी/बैटरी) और नेविगेशन बार छिपाने देता है - जैसे कोई गेम अपनी प्ले स्क्रीन में जाए: WebToApk.setFullscreen(true) // hide the system bars WebToApk.setFullscreen(false) // bring them back WebToApk.toggleFullscreen() WebToApk.isFullscreen() चुनाव लॉन्च के बीच याद रखा जाता है। जिन ऐप को क्रिएटर पहले ही फ़ुल-स्क्रीन/कियोस्क पर लॉक कर चुका है उनमें यह बेअसर है - वहाँ लौटने को कुछ नहीं है। साइड-मेन्यू का "Fullscreen" आइटम अंतिम यूज़र के लिए इसी का रूप है और क्रिएटर के enableFullscreenToggle विकल्प से तय होता है; यह ब्रिज ऐप के अपने पेज को हमेशा उपलब्ध है।
इसे अलग से नहीं, बल्कि इसके समूह फ़ुल-स्क्रीन ब्रिज में समझाया गया है।
उदाहरण
Android की स्टेटस और नेविगेशन बार को छिपे और दिखे के बीच बदलता है।
लौटाता है: कुछ नहीं। ज़रूरत: कुछ नहीं। नई स्थिति लॉन्च के बीच याद रखी जाती है।
"फ़ुल-स्क्रीन" बटन जो अपना लेबल भी ख़ुद अपडेट करता है:
var btn = document.getElementById('fs-btn');
if (window.WebToApk && typeof window.WebToApk.toggleFullscreen === 'function') {
btn.onclick = function () {
window.WebToApk.toggleFullscreen();
// The change is applied on the UI thread; read the state a moment later.
setTimeout(function () {
btn.textContent = window.WebToApk.isFullscreen() ? 'Exit fullscreen' : 'Fullscreen';
}, 100);
};
} else {
btn.hidden = true; // in a browser
}बार छिपाने या दिखाने के लिए किसी फ़ोटो या पढ़ने वाले व्यू पर डबल-टैप करें:
var viewer = document.getElementById('photo-viewer');
viewer.addEventListener('dblclick', function () {
if (window.WebToApk && typeof window.WebToApk.toggleFullscreen === 'function') {
window.WebToApk.toggleFullscreen();
}
});हार्डवेयर कीबोर्ड पर F कुंजी से टॉगल करें, पर तब नहीं जब यूज़र किसी फ़ील्ड में टाइप कर रहा हो:
document.addEventListener('keydown', function (e) {
if (e.key !== 'f' || e.target.closest('input, textarea, [contenteditable]')) return;
if (window.WebToApk && typeof window.WebToApk.toggleFullscreen === 'function') {
e.preventDefault();
window.WebToApk.toggleFullscreen();
}
});ध्यान दें: फ़ुल-स्क्रीन या इमर्सिव कियोस्क मोड चालू वाले ऐप में यह कुछ नहीं करता (बार छिपे रहते हैं)। अंतिम यूज़र के लिए साइड-मेन्यू का "Fullscreen" आइटम अलग बिल्ड स्विच है (चरण 3 में डिस्प्ले विकल्प के अंदर फ़ुल-स्क्रीन बटन); यह ब्रिज तरीका उसके बिना भी काम करता है।