三端自适应布局与 PWA 可安装支持

新增响应式样式、手机侧滑导航、manifest 与 Service Worker；补充根路径重定向与安装 App 入口。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-15 16:58:13 +08:00
parent e8b4dbbaca
commit 28875078f1
11 changed files with 785 additions and 17 deletions
@@ -0,0 +1,76 @@
+(function () {
+    var deferredPrompt = null;
+    var installBtn = document.getElementById('pwa-install-btn');
+    var iosHint = document.getElementById('pwa-ios-hint');
+
+    function isStandalone() {
+        return window.matchMedia('(display-mode: standalone)').matches
+            || window.navigator.standalone === true;
+    }
+
+    function isIOS() {
+        return /iPad|iPhone|iPod/.test(navigator.userAgent)
+            && !window.MSStream;
+    }
+
+    function updateThemeColor() {
+        var meta = document.getElementById('meta-theme-color');
+        if (!meta) return;
+        var theme = document.documentElement.getAttribute('data-theme');
+        meta.setAttribute('content', theme === 'light' ? '#e8eef8' : '#050508');
+    }
+
+    function showInstallBtn() {
+        if (installBtn && !isStandalone()) {
+            installBtn.hidden = false;
+        }
+    }
+
+    function showIosHint() {
+        if (iosHint && isIOS() && !isStandalone()) {
+            iosHint.classList.add('show');
+        }
+    }
+
+    if ('serviceWorker' in navigator) {
+        window.addEventListener('load', function () {
+            navigator.serviceWorker.register('/sw.js', { scope: '/' }).catch(function () { /* ignore */ });
+        });
+    }
+
+    window.addEventListener('beforeinstallprompt', function (e) {
+        e.preventDefault();
+        deferredPrompt = e;
+        showInstallBtn();
+    });
+
+    if (installBtn) {
+        installBtn.addEventListener('click', function () {
+            if (!deferredPrompt) return;
+            deferredPrompt.prompt();
+            deferredPrompt.userChoice.then(function () {
+                deferredPrompt = null;
+                installBtn.hidden = true;
+            });
+        });
+    }
+
+    window.addEventListener('appinstalled', function () {
+        deferredPrompt = null;
+        if (installBtn) installBtn.hidden = true;
+        if (iosHint) iosHint.classList.remove('show');
+    });
+
+    document.addEventListener('DOMContentLoaded', function () {
+        updateThemeColor();
+        showIosHint();
+        if (!isStandalone() && !deferredPrompt && installBtn) {
+            installBtn.hidden = true;
+        }
+    });
+
+    document.addEventListener('click', function (e) {
+        var pick = e.target.closest('[data-theme-pick]');
+        if (pick) setTimeout(updateThemeColor, 80);
+    });
+})();