कैसे काम करते हैं Telegram संदेशों में विजेट्स Android, iOS और macOS पर

Telegram संदेशों में विजेट्स — HTML, CSS और JavaScript से बने मिनी‑प्रोग्राम हैं जो सीधे चैट बबल में चलते हैं: खेल, कैलकुलेटर, पोल या बॉट का जवाब अलग विंडो या Mini App के बिना खुलते हैं। Telegram क्लाइंट्स में इन्हें अलग‑अलग नामों से बुलाते हैं — message widgets, HTML bubbles (macOS बेटा में HTMLBubbles मॉड्यूल), rich‑message में tgwidget ब्लॉक — पर बात एक ही मैकेनिज़्म की है। यह मैकेनिज़्म Android, iOS और macOS के बेटा संस्करणों में पहले से काम कर रहा है, और कोड‑लेस विजेट बिल्डर की वेटलिस्ट @catalogue_app पर खुली है।

विजेट वेटलिस्ट में शामिल हों

संदेश में विजेट क्या है

सामान्य संदेश में टेक्स्ट और मीडिया दिखता है। विजेट एक अलग प्रकार का मीडिया है, messageMediaWidget: इसमें संकुचित HTML‑डॉक्यूमेंट अपने स्टाइल और स्क्रिप्ट्स के साथ रहता है, साथ ही उसका आकार और दो डेटा सेट होते हैं। क्लाइंट बबल में डॉक्यूमेंट रेंडर करता है और JavaScript को सैंडबॉक्स में चलाता है, जबकि विजेट टैप पर प्रतिक्रिया देता है, एनीमेट होता है, स्टेट रखता है और चैट की थीम को समझता है।

जहाँ विजेट्स अभी काम कर रहे हैं

बेटा Android बेटा‑टेस्टर्स चैनल से मिलता है और सीधे लिंक से। क्लाइंट प्रोटोकॉल लेयर 233 है, सार्वजनिक लेयर से एक लेवल नया: इसमें विजेट डिलीवरी, इनलाइन बॉट‑रिप्लाई और डेटा अपडेट के टाइप पहले से मौजूद हैं।

Android पर विजेट कैसे काम करता है

विजेट के लिए कोई ब्राउज़र नहीं होता। लेआउट को नेटीव litehtml‑रेंडरर बनाता है, और JavaScript को अलग QuickJS इंटरप्रेटर अपने थ्रेड में चलाता है। स्क्रिप्ट के लिए DOM एमीुलेटेड है: बदलाव बंडल में रेंडरर को भेजे जाते हैं, और हर बंडल रेंडर से पहले वैलिडेटर चेक करता है। असली टैप का फैसला नेटीव टच‑जज करता है, इसलिए सिंथेटिक क्लिक को यूज़र टैप नहीं माना जाता।

विस्तृत बिल्ड‑एनालिसिस — Android और iOS बेटा पर लेख में।

iOS और macOS पर विजेट कैसे काम करता है

Apple प्लेटफ़ॉर्म पर डॉक्यूमेंट को WidgetSandbox मॉड्यूल में WebKit रेंडर करता है, जो नेटवर्क से तीन लेयर से अलग है: कंटेंट‑सिक्योरिटी‑पॉलिसी, नियम‑सूची (http, https, ws ब्लॉक) और कोड चलने से पहले विंडो से नेटवर्क‑क्लासेज़ हटाना। macOS बेटा में HTMLBubbles मॉड्यूल के साथ three.js लाइब्रेरी आती है, जिसे संदेश app:three लिंक से जोड़ता है: 3D‑सीन को ऐप का Metal‑रेंडरर ड्रॉ करता है। पहली बिल्ड्स की झलक — macOS बेटा पर लेख में।

विजेट क्या‑क्या कर सकता है

• लेआउट और एनीमेशन — flex, ग्रेडिएंट, बॉर्डर‑रैडियस, transform, CSS‑एनीमेशन और ट्रांज़िशन।
• ग्राफ़िक्स — SVG और 2D canvas: पाथ, ग्रेडिएंट, पैटर्न, पिक्सेल‑मैनीपुलेशन।
• फ़ॉर्म — टेक्स्ट‑फ़ील्ड, ड्रॉप‑डाउन, स्लाइडर, बटन, एक्सपैंडेबल ब्लॉक।
• स्टेट — प्रत्येक विजेट का अपना localStorage संदेश के साथ स्टोर होता है; गेम स्कोर या यूज़र इनपुट रीस्टार्ट पर भी बचा रहता है।
• थीम — चैट के रंग CSS वेरिएबल --tg-theme-* से आते हैं, और विजेट खुद को लाइट/डार्क मोड में री‑कलर करता है।
• फ़ीडबैक — HapticFeedback से वाइब्रेशन, टैप पर लिंक, टेक्स्ट कॉपी।
• बॉट — टैप पर बॉट को ≤ 64 बाइट भेजता है, जवाब ≤ 1 024 बाइट मिलते हैं; बॉट मौजूदा विजेट का डेटा अपडेट कर सकता है।
• विचुअलाइज़र — विजेट जानता है कौन खोल रहा है (id, नाम, Premium) और किस चैट में है।

विजेट में क्या नहीं है और क्यों

विजेट में नेटवर्क नहीं है: fetch, XMLHttpRequest, WebSocket और वर्कर सभी स्टब्स से बदल दिए गए हैं। यह बग नहीं, बल्कि डिज़ाइन है—विजेट IP नहीं लेता और बिना इंटरनेट चलेगा। लाइव डेटा बॉट के ज़रिए आता है—टैप‑रिक्वेस्ट या संदेश‑डेटा अपडेट।

JavaScript कोटा — 500 ms CPU, 64 MB मेमोरी। बबल की ऊँचाई — Android पर 50‑600 dp, iOS पर 24‑900 pt। स्क्रीन से बाहर की एनीमेशन पॉज़ हो जाती हैं।

कोटा में कैसे फिट रहें

भारी काम को 500 ms से छोटे टुकड़ों में requestAnimationFrame या setTimeout से बाँटें। फिक्स्ड‑स्टेप फिज़िक्स लूप कोटा में आराम से फिट हो जाता है: Geometry Dash‑स्टाइल रनर 30 ms CPU में 3 289 फ्रेम में पूरा लेवल रेंडर करता है, प्रति फ्रेम ≤ 109 canvas कमांड।

विजेट से क्या‑क्या बनाया जा सकता है

• गेम्स — canvas‑आधारित आर्केड, पज़ल, क्लिकर, टेक्स्ट‑क्वेस्ट, चैट में स्कोर‑टूर्नामेंट।
• AI‑विजेट्स — बटन‑टैप पर सवाल, बॉट के माध्यम से मॉडल का जवाब उसी बबल में।
• कैल्कुलेटर और कन्वर्टर — करंसी, प्रतिशत, यूनिट, बिल‑स्प्लिट।
• पोल और क्विज़ — कस्टम डिज़ाइन, रियल‑टाइम स्कोर और रिजल्ट।
• कार्ड और चार्ट — प्रोफ़ाइल, प्रेडिक्शन, स्टैट्स, संदेश डेटा से ड्रॉ किए गए ग्राफ़।
• Intelligent UI — बॉट द्वारा विशिष्ट रिक्वेस्ट के लिए जनरेटेड UI: बुकिंग फ़ॉर्म, टाइम‑सेलेक्ट, शॉपिंग‑कार्ट।

और भी बहुत कुछ: विजेट सिर्फ एक HTML‑डॉक्यूमेंट है, सैंडबॉक्स में जो भी फिट हो, उसे संदेश में भेजा जा सकता है।

🎮 चैट‑गेम्स — वेटलिस्ट में

🤖 AI‑विजेट्स — वेटलिस्ट में

🧮 कैलकुलेटर और कन्वर्टर — वेटलिस्ट में

कोड‑लेस अपना विजेट बनाएं

विजेट एक संदेश है जिसमें डॉक्यूमेंट एम्बेडेड होता है, इसलिए इसे तैयार ब्लॉक्स से बिना कोडिंग के बनाया जा सकता है। @catalogue_app पर कोड‑लेस विजेट बिल्डर उपलब्ध है: गेम, क्विज़ या कैल्कुलेटर टेम्पलेट, अपना टेक्स्ट और रंग सेट करें — और तैयार विजेट किसी भी चैट में भेजें। अपना इंस्टेंस अपने बॉट से भी भेज सकते हैं, जो उसी @catalogue_app में बनाया गया है, और टेम्पलेट शेयर करके दूसरों को फ़ोर्क करने दे सकते हैं।

वेटलिस्ट उन लोगों को इकट्ठा करती है जो अपना विजेट चाहते हैं: जब सभी Telegram ऐप्स में विजेट्स रिलीज़ होंगे, @catalogue_app पहले उन्हें सूचित करेगा।

🧩 कोड‑लेस अपना विजेट — वेटलिस्ट में

Android‑बेटा में काम कर रहा गेम‑विजेट /game कमांड से @catalogue_app में भेजा जा सकता है।

🎮 गेम‑विजेट आज़माएँ

सवाल‑जवाब

Telegram में HTML bubbles क्या हैं?

यह macOS बेटा में विजेट मॉड्यूल का नाम है: HTML, CSS और इनबिल्ट JavaScript से बना संदेश, जो सीधे चैट बबल में रहता है। Android और iOS में इसे “संदेश में विजेट” कहा जाता है।

क्या अभी विजेट भेजा जा सकता है?

विजेट Android, iOS और macOS बेटा में रेंडर होते हैं। Bot API में अभी तक भेजने का तरीका नहीं है; बेटा प्रोटोकॉल में पहले से ही विजेट डिलीवरी और इनलाइन बॉट‑रिप्लाई के टाइप मौजूद हैं।

विजेट और Mini App में क्या अंतर है?

Mini App अलग विंडो में खुलता है और सर्वर से पेज लोड करता है, जबकि विजेट चैट फ़ीड में रहता है और पूरा कोड संदेश में ही होता है। विजेट में नेटवर्क नहीं, बाहरी कनेक्शन बॉट के ज़रिए होता है।

क्या प्रोग्रामिंग जानना ज़रूरी है?

शुरू से विजेट बनाना — हाँ, HTML, CSS, JavaScript चाहिए। टेम्पलेट से अपना विजेट बनाना — नहीं, इसके लिए @catalogue_app पर कोड‑लेस बिल्डर है।

विजेट्स स्थिर संस्करणों में कब आएँगे?

Telegram ने अभी तक तारीख नहीं बताई। मैकेनिज़्म सभी तीन प्लेटफ़ॉर्म के बेटा में है, और Android बेटा में इसके लिए सर्वर‑साइड प्रोटोकॉल टाइप भी मौजूद हैं।