Telegram Bot游戏Android端白屏问题技术求助

问题概述 #

开发Telegram Bot游戏，已配置HTTPS域名和主机，iPhone、桌面端可正常加载游戏链接，但Android端打开后显示白屏。将链接替换为https://www.google.com可在Android端正常显示，但主机上的简单HTML页面无法加载。已通过@BotFather完成Bot创建并设置/setinline。

Bot代码（node-telegram-bot-api） #

const TelegramBot = require("node-telegram-bot-api");
const bot = new TelegramBot(TOKEN, {
     polling: true
});

const gameName = "backgammon2";

bot.onText(/start/, (msg) => {
     bot.sendGame(msg.from.id, gameName, {
       game_short_name: gameName
     })
});


bot.on("callback_query", function (query) {
     if (query.game_short_name !== gameName) {
         bot.answerCallbackQuery(query.id, "Sorry, '" + query.game_short_name + "' is not available.");
     } else {
         let gameurl = 'https://backgammon.by/api/test2';
         bot.answerCallbackQuery(query.id, {
             url: gameurl,
         });
     }
});

Server与HTML代码 #

// Express路由
app.get('/api/test2', (req, res) => {
     res.sendFile(__dirname + "/test.html")
})

<!doctype html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;900&display=swap" rel="stylesheet">
     <title>Das Pensionssystem in Österreich</title>
     <script src="https://telegram.org/js/games.js"></script>
</head>
<body>
     <h1>hello</h1>
</body>
</html>

排查与解决方向 #

1. 修正Bot API参数错误 #

Telegram Bot API中，answerCallbackQuery用于游戏跳转的参数是game_url，而非代码里的url，这是Android端无法正确跳转的常见原因：

bot.answerCallbackQuery(query.id, {
    game_url: gameurl, // 替换原有的url字段
});

2. 检查HTTPS证书兼容性 #

Android对HTTPS证书的验证更严格：

• 确保证书由受信任的CA颁发，避免自签名证书
• 检查证书链是否完整，部分旧Android设备无法识别不完整的证书链
• 确认证书支持TLS 1.2及以上版本，禁用过时的TLS 1.0/1.1加密套件

3. 调整WebView安全响应头 #

Telegram Android端WebView有特殊的嵌入限制：

• 在HTTP响应头中添加Content-Security-Policy: frame-ancestors telegram.org;，允许Telegram嵌入你的页面
• 移除或调整X-Frame-Options头，避免阻止Telegram的iframe嵌入

4. 优化移动端页面配置 #

• 移除viewport中的user-scalable=no，部分Android WebView对该属性存在兼容性问题，可改为user-scalable=yes或直接删除该限制
• 添加Telegram Web App规范的meta标签：

  <meta name="theme-color" content="#0088cc">
  <meta name="apple-mobile-web-app-capable" content="yes">
  

5. 直接调试Android端加载情况 #

• 在Android自带浏览器中直接打开你的HTTPS链接，确认是否能正常加载：如果浏览器也无法加载，说明是主机/域名的网络问题；如果浏览器能加载，再排查Telegram WebView的特殊限制
• 在HTML中添加console.log输出加载状态，通过BotFather开启Web App调试模式查看日志

内容的提问来源于stack exchange，提问作者Andrew Luzkovky