Add HTTPS reverse proxy guide and PNG icons for real PWA install.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-12 15:00:15 +08:00
parent 1d00c36cd3
commit 21400700c5
8 changed files with 192 additions and 11 deletions
+25 -5
View File
@@ -232,15 +232,25 @@ PWA_HEAD = """
document.body.appendChild(overlay);
}
function isSecure() {
return location.protocol === "https:" || location.hostname === "localhost" || location.hostname === "127.0.0.1";
}
function manualInstallGuide() {
var httpWarn = "";
if (!isSecure()) {
httpWarn = "<div class='pwa-modal-warn'><strong>⚠️ 当前为 HTTP 访问</strong><br>浏览器只能创建<strong>快捷方式</strong>,无法弹出系统级「安装 App」。<br>要一键安装,请配置 <strong>HTTPS 反向代理</strong>(见服务器 DEPLOY.md)。</div>";
}
var steps = isIOS()
? "<ol><li>点击 Safari 底部分享按钮 <strong>□↑</strong></li><li>选择 <strong>「添加到主屏幕」</strong></li><li>点击 <strong>添加</strong> 即可</li></ol>"
: "<ol><li>点击浏览器右上角 <strong>⋮</strong> 菜单</li><li>选择 <strong>「安装应用」</strong> 或 <strong>「添加到主屏幕」</strong></li><li>确认安装即可</li></ol>";
? "<ol><li>点击 Safari 底部分享按钮 <strong>□↑</strong></li><li>选择 <strong>「添加到主屏幕」</strong></li><li>点击 <strong>添加</strong></li></ol>"
: (isSecure()
? "<ol><li>Chrome/Edge 地址栏点击 <strong>安装</strong> 图标</li><li>或菜单 → <strong>安装 Trading Studio</strong></li></ol>"
: "<ol><li>Chrome 菜单 → <strong>添加到主屏幕</strong> 或 <strong>创建快捷方式</strong></li><li>配置 HTTPS 后可真正「安装应用」</li></ol>");
showModal(
'<button class="pwa-modal-close" type="button">✕</button>' +
'<h3>📲 安装 Trading Studio</h3>' +
'<p>当前环境需手动安装,按以下步骤操作:</p>' + steps +
'<p class="pwa-modal-tip">安装后可像原生 App 一样从桌面/icon 启动。</p>'
'<h3>📲 安装 Trading Studio</h3>' + httpWarn +
'<p>按以下步骤操作:</p>' + steps +
'<p class="pwa-modal-tip">HTTPS 安装后可独立窗口运行,体验接近原生 App。</p>'
);
}
@@ -583,6 +593,16 @@ gradio-app,
.pwa-modal p { color: #cbd5e1 !important; line-height: 1.6 !important; }
.pwa-modal ol { color: #e2e8f0 !important; padding-left: 20px !important; line-height: 1.8 !important; }
.pwa-modal-tip { font-size: 0.85rem !important; color: #93c5fd !important; margin-top: 16px !important; }
.pwa-modal-warn {
background: #422006 !important;
border: 1px solid #f59e0b !important;
border-radius: 8px !important;
padding: 12px 14px !important;
margin-bottom: 14px !important;
color: #fde68a !important;
font-size: 0.9rem !important;
line-height: 1.6 !important;
}
.pwa-modal-close {
position: absolute;
top: 12px;