Telegramdagi xabarlar ichidagi vidjettlar qanday ishlaydi: Android, iOS va macOS uchun

Telegram xabarlar ichidagi vidjettlar — bu HTML, CSS va JavaScriptdan tashkil topgan miniprogrammalar, ular to'g'ridan-to'g'ri suhbat oqimida joylashadi: o'yin, kalkulyator, so'rov yoki bot javobi alohida oynada ochilmaydi va Mini App sifatida ham ishlatilmaydi. Telegram mijozlarida ular turli nomlar bilan ataladi — message widgets, HTML bubbles (macOS uchun betada HTMLBubbles moduli), rich xabarlar ichidagi tgwidget bloki — lekin barchasi bir xil mexanizmni anglatadi. Bu mexanizm hozir Android, iOS va macOS uchun Telegram betasida ishlayotgan holda, kod yozish kerak bo'lmaydigan vidjett konstruktori uchun kutish ro'yxati @catalogue_app da ochiq.

Vidjettlar uchun kutish ro'yxatiga qo'shilish

Xabar ichidagi vidjett nima?

Oddiy xabar matn va media ko'rinishida ko'rinadi. Vidjett — bu alohida media turi, messageMediaWidget: ichida o'z stili va skriptlari bilan siqilgan HTML hujjati, uning o'lchami hamda ikkita ma'lumot to'plami mavjud. Mijoz hujjatni suhbat balonchig'ida chizadi va uning JavaScript kodini izolyatsiya qilinadigan muhitda bajaradi, shu bilan birga vidjett boshqa narsalarga reaksiya beradi, animatsiya qiladi, holatni saqlaydi va suhbat mavzusiga moslashadi.

Vidjettlar hozir qayerda ishlayotgan?

Android betasi beta-tester kanalidan va Telegram veb-saytidan to'g'ridan-to'g'ri havoladan tarqatiladi. Ushbu yig'ishda mijoz protokoli 233-sloyni qo'llaydi, nashr etilgan versiyaga qaraganda bitta yuqori: vidjett uchun server tomonidan yetkazib berish, botlarning inline javoblari va yuborilgandan keyin ma'lumotlarni yangilash uchun turlar allaqachon mavjud.

Vidjett Androidda qanday ishlaydi

Vidjett ostida brauzer mavjud emas. Struktura litehtml asosidagi natsional renderer tomonidan tuziladi va chiziladi, JavaScript esa alohida QuickJS interpretatori o'zining potokida bajariladi. Skript uchun DOM emulyatsiyalangan: o'zgarishlar rendererga pachkalar sifatida jo'natiladi va har bir pachkani chizishdan oldin validator tekshiradi. Haqiqiy bosingni aniqlash natsional qo'rqinch qarash muhiti, skript emas — shuning uchun sintetik bosing foydalanuvchi bosingi sifatida tan olinmaydi.

Batafsil tahlil — Android va iOS betalari haqida maqola.

Vidjett iOS va macOS da qanday ishlaydi

Apple platformalarida hujjat WebKit tomonidan alohida WidgetSandbox modulida chiziladi, tarmoqdan uchta qavat bilan himoyalangan: xavfsizlik siyosati, HTTP, HTTPS va WS ni bloklaydigan qoidalar ro'yxati, shuningdek, kodni ishga tushirishdan oldin oynadan tarmoq klasslarini o'chirish. macOS betasida HTMLBubbles moduli bilan birga three.js kutubxonasini ham topish mumkin, xabar ichida app:three ichki havolasi orqali ulanadi: 3D-senalar ilovaning Metal rendereri tomonidan chiziladi. Birinchi yig'ishlarda qanday ko'rinayotganini — macOS betasi haqida maqola.

Vidjett qanday qiladi

• Verstka va animatsiya — flex, gradiente, bo'g'iq burchaklar, transform, CSS animatsiyasi va transitions.
• Grafika — SVG va canvas 2D: yo'nalishlar, gradiente, patternlar, piksel bilan ishlash.
• Formalar — matn maydonlari, ro'yxatlar, sur'atlar, tugmalar, ochiladigan bloklar.
• Holat — har bir vidjett uchun o'ziga xos localStorage mavjud va xabarga birga saqlanadi: o'yin hisobi va kiritilgan ma'lumotlar ilovani qayta ishga tushirishdan keyin ham saqlanadi.
• Mavzu — suhbat ranglari CSS o'zgaruvchilari --tg-theme-* orqali keladi va vidjett o'zini yorug' va qorong'ulik mavzusiga moslashtiradi.
• Reaksiya — HapticFeedback orqali vibratsiya, bosingda havola, matnni nusxalash.
• Bot — bosingda vidjett o'z botiga 64 bayt gacha so'rov yuboradi va 1 024 bayt gacha javob oladi; bot yuborilgan vidjett ma'lumotlarini yangilashi mumkin.
• Ko'rish — vidjett kim uning ochilganini (ID, ism, Premium) va qaysi suhbatda joylashganini biladi.

Vidjettda nima yo'q va nima uchun

Vidjettga hech qanday tarmoq aloqasi yo'q: fetch, XMLHttpRequest, WebSocket va vorkerlar o'rniga yozuvlar mavjud. Bu xususiyat, xato emas: olingan vidjett foydalanuvchining IP manzilini ochib berishga harakat qilmasligi va internetga bog'lanmagan holda ishlashi mumkin. Haqiqiy ma'lumotlar bot orqali — bosingda so'rov yoki xabarga ma'lumotlarni yangilash orqali keladi.

Bitta JavaScript vazifasi uchun kvota — 500 ms protsessor va 64 MB xotira. Balonchining balandligi Androidda 50 dan 600 dp gacha, iOS da 24 dan 900 pt gacha. Ekranning tashqarisidagi animatsiyalar pauza qilinadi.

Kvotaga sig'ish usuli

Kuchli ishlar requestAnimationFrame yoki setTimeout orqali 500 ms dan kam bo'lgan qismlarga bo'linadi. Fizikani doimiy bosimli o'yin tsikli kvotaga o'zini qo'yishga qodir: Geometry Dash uslubidagi runner 3 289 kadrda 30 ms protsessor va 1 kadrda 109 ta canvas buyruq bilan butun darajani o'tadi.

Vidjett bilan qanday narsa qilish mumkin

• O'yinlar — canvasda arkaadalar, mazmuni, klikler, matnli qizishlar, to'g'ridan-to'g'ri suhbatda ballar bo'yicha turnirlar.
• AI vidjettlar — bosingda savol, modelning javobi bot orqali o'z balonchig'ida.
• Kalkulyatorlar va konverterlar — valyuta, foiz, birliklar, kompaniyaga bo'linish hisobi.
• So'rovlar va kvizlar — o'z dizayni, hisobi va natijasi suhbatda.
• Kartochkalar va grafikalar — profil, prognoz, statistika, xabarga asoslangan ma'lumotlar bilan chizilgan.
• Intellektual interfeys — botning aniq so'rovga moslashtirilgan interfeysi: bron qilish formasi, vaqt tanlash, savat.

Boshqalari ham: vidjett — bu HTML hujjati, shuning uchun izolyatsiya muhiti ichiga sig'adigan barcha narsa xabarga yuborilishi mumkin.

🎮 Xabarlarda o'yinlar — kutish ro'yxatiga qo'shilish

🤖 AI vidjettlar — kutish ro'yxatiga qo'shilish

🧮 Kalkulyatorlar va konverterlar — kutish ro'yxatiga qo'shilish

Kod yozish kerak bo'lmaydigan o'z vidjett

Vidjett — bu ichida hujjat bo'lgan bitta xabar, shuning uchun uni dasturlash bilan emas, tayyor bloklardan yasash mumkin. Kod yozish kerak bo'lmaydigan vidjett konstruktori @catalogue_app da tayyor: o'yin, kviz yoki kalkulyator shabloni, o'z matn va ranglari — va tayyor vidjett istalgan suhbatga yuboriladi. O'z egasi o'z botidan yuborish mumkin, u ham @catalogue_app da yaratilgan, shuningdek, shablonni boshqalarga taklif qilish orqali ularning forki yaratishiga imkon beradi.

Kutish ro'yxati o'z vidjettini xohlovchilarni jamlash uchun: Telegram barcha ilovalarda vidjettlar chiqqanda, @catalogue_app ularni birinchi bo'lib xabar beradi.

🧩 Kod yozish kerak bo'lmaydigan o'z vidjett — kutish ro'yxatiga qo'shilish

Telegram Android betasida hozir ishlayotgan o'yin vidjetti @catalogue_app da /game buyrug'ini yuborish orqali yuboriladi.

🎮 O'yin vidjettini sinab ko'rish

Savollar

Telegramda HTML bubbles nima?

Bu macOS uchun Telegram betasida vidjett moduli deb ataladi: HTML va CSS orqali yaslangan xabar, ichida JavaScript, to'g'ridan-to'g'ri suhbat balonchig'ida yashaydi. Android va iOS da esa shu mexanizm xabar ichidagi vidjett deb ataladi.

Hozir vidjett yuborish mumkinmi?

Vidjettlar Android, iOS va macOS betasida chiziladi. Bot API da hozircha yuborish usuli mavjud emas; beta protokolida server tomonidan vidjett yetkazib berish va botlarning inline javoblari uchun turlar allaqachon mavjud.

Vidjett Mini App dan qanday farq qiladi?

Mini App alohida oynada ochiladi va serverdan sahifani yuklaydi, vidjett esa suhbat oqimida yashaydi va barcha kodni o'zida saqlaydi. Vidjettga hech qanday tarmoq aloqasi yo'q, tashqi dunyoga aloqasi bot orqali amalga oshiriladi.

Dasturlashni bilish kerakmi?

Vidjettni nol dan yozish uchun — ha, bu HTML, CSS va JavaScript. Shablonlardan o'zini yasash uchun — yo'q: bu uchun @catalogue_app da kod yozish kerak bo'lmaydigan konstruktor tayyorlanayotgan.

Vidjettlar qachon stabil versiyalarda chiqadi?

Telegram sanani aytishmadi. Bu mexanizm hozir uchta platforma betasida ishlayotgan, Android betasida esa server turlari mavjud.