feat: code by Trae

Author: dfface

epub_browser/assets/library.js

@@ -312,6 +312,41 @@ function initScript() {
         });
     }
 
+    // PWA 安装提示
+    let deferredPrompt;
+    const installBtn = document.createElement('button');
+    installBtn.id = 'pwa-install-btn';
+    installBtn.innerHTML = '<i class="fas fa-download"></i> Install App';
+    installBtn.style.cssText = 'position:fixed;bottom:20px;right:20px;padding:12px 20px;background:#4a90d9;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;box-shadow:0 2px 10px rgba(0,0,0,0.2);z-index:9999;display:none;';
+    document.body.appendChild(installBtn);
+
+    window.addEventListener('beforeinstallprompt', function(e) {
+        e.preventDefault();
+        deferredPrompt = e;
+        installBtn.style.display = 'block';
+        console.log('PWA install prompt captured');
+    });
+
+    installBtn.addEventListener('click', function() {
+        if (deferredPrompt) {
+            installBtn.style.display = 'none';
+            deferredPrompt.prompt();
+            deferredPrompt.userChoice.then(function(choiceResult) {
+                if (choiceResult.outcome === 'accepted') {
+                    console.log('User accepted the install prompt');
+                } else {
+                    console.log('User dismissed the install prompt');
+                }
+                deferredPrompt = null;
+            });
+        }
+    });
+
+    window.addEventListener('appinstalled', function() {
+        installBtn.style.display = 'none';
+        console.log('PWA installed successfully');
+    });
+
 };
 
 // 如果DOM已经加载完成，立即初始化

epub_browser/assets/manifest.json

@@ -12,13 +12,29 @@
             "src": "/assets/icon-192.png",
             "sizes": "192x192",
             "type": "image/png",
-            "purpose": "any maskable"
+            "purpose": "any"
         },
         {
             "src": "/assets/icon-512.png",
             "sizes": "512x512",
             "type": "image/png",
-            "purpose": "any maskable"
+            "purpose": "any"
+        }
+    ],
+    "screenshots": [
+        {
+            "src": "/assets/screenshot-wide.png",
+            "sizes": "1280x720",
+            "type": "image/png",
+            "form_factor": "wide",
+            "label": "EPUB Browser Desktop View"
+        },
+        {
+            "src": "/assets/screenshot-narrow.png",
+            "sizes": "750x1334",
+            "type": "image/png",
+            "form_factor": "narrow",
+            "label": "EPUB Browser Mobile View"
         }
     ],
     "categories": ["books", "education", "productivity"],

epub_browser/assets/screenshot-narrow.png

@@ -1,4 +1,5 @@
-const CACHE_NAME = 'epub-browser-v3';
+const CACHE_NAME = 'epub-browser-v5';
+
 const STATIC_ASSETS = [
     '/',
     '/index.html',
@@ -11,10 +12,14 @@ const STATIC_ASSETS = [
     '/assets/fa.all.min.css',
     '/assets/sortable.min.js',
     '/assets/medium-zoom.min.js',
-    '/assets/manifest.json'
+    '/assets/manifest.json',
+    '/assets/icon-192.png',
+    '/assets/icon-512.png',
+    '/assets/screenshot-wide.png',
+    '/assets/screenshot-narrow.png'
 ];
 
-// 安装事件 - 只缓存静态资源
+// 安装事件 - 预缓存静态资源
 self.addEventListener('install', (event) => {
     event.waitUntil(
         caches.open(CACHE_NAME)
@@ -46,22 +51,18 @@ self.addEventListener('activate', (event) => {
     self.clients.claim();
 });
 
-// 判断是否应该缓存该请求
+// 判断是否应该缓存该请求（只缓存静态资源）
 function shouldCache(url) {
     const urlObj = new URL(url);
-    
-    // 缓存书籍页面
-    if (urlObj.pathname.startsWith('/book/')) {
-        return true;
-    }
+    const pathname = urlObj.pathname;
 
     // 缓存静态资源
-    if (urlObj.pathname.startsWith('/assets/')) {
+    if (pathname.startsWith('/assets/')) {
         return true;
     }
 
-    // 缓存根页面
-    if (urlObj.pathname === '/' || urlObj.pathname === '/index.html') {
+    // 只缓存根页面
+    if (pathname === '/' || pathname === '/index.html') {
         return true;
     }
 
@@ -80,29 +81,8 @@ self.addEventListener('fetch', (event) => {
         return;
     }
 
-    // 对于导航请求（页面跳转），使用网络优先策略
+    // 导航请求（页面跳转）- 直接从网络获取，不经过 Service Worker
     if (event.request.mode === 'navigate') {
-        event.respondWith(
-            fetch(event.request, { redirect: 'follow' })
-                .then((response) => {
-                    // 缓存响应（包括重定向后的最终响应）
-                    if (response) {
-                        const responseToCache = response.clone();
-                        caches.open(CACHE_NAME)
-                            .then((cache) => {
-                                cache.put(event.request, responseToCache);
-                            });
-                    }
-                    return response;
-                })
-                .catch(() => {
-                    // 网络失败时，返回缓存
-                    return caches.match(event.request)
-                        .then((cachedResponse) => {
-                            return cachedResponse || caches.match('/index.html');
-                        });
-                })
-        );
         return;
     }
 
@@ -112,18 +92,19 @@ self.addEventListener('fetch', (event) => {
             .then((cachedResponse) => {
                 // 如果有缓存，返回缓存
                 if (cachedResponse) {
-                    // 同时在后台更新缓存
-                    if (shouldCache(event.request.url)) {
-                        fetchAndCache(event.request);
-                    }
                     return cachedResponse;
                 }
 
                 // 否则从网络获取
-                return fetch(event.request, { redirect: 'follow' })
+                return fetch(event.request)
                     .then((response) => {
-                        // 缓存响应
-                        if (response && shouldCache(event.request.url)) {
+                        // 检查是否是有效的响应
+                        if (!response || response.status !== 200) {
+                            return response;
+                        }
+
+                        // 如果应该缓存，则缓存响应
+                        if (shouldCache(event.request.url)) {
                             const responseToCache = response.clone();
                             caches.open(CACHE_NAME)
                                 .then((cache) => {
@@ -134,27 +115,11 @@ self.addEventListener('fetch', (event) => {
                         return response;
                     })
                     .catch(() => {
-                        // 如果网络请求失败，尝试返回缓存的首页
-                        if (event.request.destination === 'document') {
-                            return caches.match('/index.html');
+                        // 如果网络请求失败，返回备用响应
+                        if (event.request.destination === 'image') {
+                            return new Response('', { status: 404 });
                         }
                     });
             })
     );
 });
-
-// 后台更新缓存
-function fetchAndCache(request) {
-    fetch(request, { redirect: 'follow' })
-        .then((response) => {
-            if (response) {
-                caches.open(CACHE_NAME)
-                    .then((cache) => {
-                        cache.put(request, response);
-                    });
-            }
-        })
-        .catch(() => {
-            // 忽略错误
-        });
-}