Fix PWA TTS highlight refresh handling

Retsomm · Retsomm · commit e5e5ac697699 · 2026-05-01T10:03:58.000+08:00
diff --git a/pwa/src/App.tsx b/pwa/src/App.tsx
@@ -32,6 +32,30 @@ const App = () => {
     setView('library')
   }
 
+  const handleApplyLatestVersion = async () => {
+    try {
+      if ('serviceWorker' in navigator) {
+        const registrations = await navigator.serviceWorker.getRegistrations()
+        await Promise.all(registrations.map((registration) => registration.unregister()))
+      }
+    } catch (err) {
+      console.warn('[PWA] Service Worker 清除失敗:', err)
+    }
+
+    try {
+      if ('caches' in window) {
+        const keys = await caches.keys()
+        await Promise.all(keys.map((key) => caches.delete(key)))
+      }
+    } catch (err) {
+      console.warn('[PWA] Cache Storage 清除失敗:', err)
+    }
+
+    const url = new URL(window.location.href)
+    url.searchParams.set('refresh', String(Date.now()))
+    window.location.replace(url.toString())
+  }
+
   return (
     <div className={darkMode ? 'dark' : ''}>
       <div className="min-h-screen bg-stone-50 dark:bg-gray-900 transition-colors">
@@ -44,6 +68,7 @@ const App = () => {
             onRemoveBook={removeBook}
             darkMode={darkMode}
             onToggleDark={() => setDarkMode(!darkMode)}
+            onApplyLatestVersion={handleApplyLatestVersion}
           />
         )}
         {view === 'reader' && activeBookUrl && (
diff --git a/pwa/src/components/Library.tsx b/pwa/src/components/Library.tsx
@@ -27,6 +27,14 @@ const IconPlus = () => (
     <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
   </svg>
 )
+const IconRefresh = () => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M21 12a9 9 0 0 1-15.5 6.2" />
+    <path d="M3 12A9 9 0 0 1 18.5 5.8" />
+    <path d="M18 2v5h-5" />
+    <path d="M6 22v-5h5" />
+  </svg>
+)
 
 // ── Cover styles ────────────────────────────────────────────────────────
 
@@ -170,23 +178,32 @@ interface Props {
   onRemoveBook: (id: string) => void
   darkMode: boolean
   onToggleDark: () => void
+  onApplyLatestVersion: () => void | Promise<void>
 }
 
 type SortKey = 'recent' | 'title' | 'progress'
 
-const Library = ({ records, getCoverDataUrl, onAddBooks, onOpenBook, onRemoveBook, darkMode, onToggleDark }: Props) => {
+const Library = ({ records, getCoverDataUrl, onAddBooks, onOpenBook, onRemoveBook, darkMode, onToggleDark, onApplyLatestVersion }: Props) => {
   const fileInputRef = useRef<HTMLInputElement>(null)
   const [loading, setLoading] = useState(false)
   const [pendingRemove, setPendingRemove] = useState<{ id: string; title: string } | null>(null)
   const [query, setQuery] = useState('')
   const [sort, setSort] = useState<SortKey>('recent')
+  const [logoMenuOpen, setLogoMenuOpen] = useState(false)
+  const [applyingUpdate, setApplyingUpdate] = useState(false)
+  const logoMenuRef = useRef<HTMLDivElement>(null)
 
   const handleRemoveRequest = (id: string) => {
     const record = records.find((r) => r.id === id)
     if (record) setPendingRemove({ id, title: record.title })
   }
   const handleConfirmRemove = () => { if (pendingRemove) { onRemoveBook(pendingRemove.id); setPendingRemove(null) } }
   const handleCancelRemove = () => setPendingRemove(null)
+  const handleApplyLatestVersion = async () => {
+    if (applyingUpdate) return
+    setApplyingUpdate(true)
+    await onApplyLatestVersion()
+  }
 
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files
@@ -263,12 +280,47 @@ const Library = ({ records, getCoverDataUrl, onAddBooks, onOpenBook, onRemoveBoo
         <div style={{ borderBottom: `1px solid ${borderCol}`, background: paperBg }}>
           {/* 第一行：Logo + 標題 + 操作按鈕 */}
           <div className="flex items-center gap-2 px-4 pt-3 pb-2">
-            <div style={{
-              width: 26, height: 26, borderRadius: 6, flexShrink: 0,
-              background: inkCol, color: paperBg,
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-              fontFamily: SERIF, fontStyle: 'italic', fontWeight: 700, fontSize: 14,
-            }}>T</div>
+            <div ref={logoMenuRef} style={{ position: 'relative', flexShrink: 0 }}>
+              <button
+                onClick={() => setLogoMenuOpen((open) => !open)}
+                style={{
+                  width: 26, height: 26, borderRadius: 6,
+                  background: logoMenuOpen ? paperBg2 : inkCol, color: logoMenuOpen ? inkCol : paperBg,
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  fontFamily: SERIF, fontStyle: 'italic', fontWeight: 700, fontSize: 14,
+                  cursor: 'pointer',
+                }}
+                aria-label="Travel in Time 選單"
+              >
+                T
+              </button>
+              {logoMenuOpen && (
+                <div
+                  style={{
+                    position: 'absolute', left: 0, top: 32, zIndex: 60,
+                    width: 178, padding: 6, borderRadius: 8,
+                    background: paperBg, border: `1px solid ${borderCol}`,
+                    boxShadow: '0 14px 32px -14px rgba(0,0,0,0.45)',
+                  }}
+                >
+                  <button
+                    onClick={handleApplyLatestVersion}
+                    disabled={applyingUpdate}
+                    style={{
+                      width: '100%', minHeight: 34, borderRadius: 6, padding: '8px 10px',
+                      display: 'flex', alignItems: 'center', gap: 8,
+                      color: applyingUpdate ? ink3Col : inkCol,
+                      fontFamily: 'inherit', fontSize: 13, textAlign: 'left',
+                      cursor: applyingUpdate ? 'default' : 'pointer',
+                      opacity: applyingUpdate ? 0.7 : 1,
+                    }}
+                  >
+                    <IconRefresh />
+                    <span>{applyingUpdate ? '更新中…' : '套用最新版'}</span>
+                  </button>
+                </div>
+              )}
+            </div>
             <span style={{ fontFamily: SERIF, fontSize: 16, fontWeight: 500, letterSpacing: '0.01em' }}>Travel in Time</span>
             <span style={{ fontFamily: MONO, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: ink3Col }}>Library</span>
 
diff --git a/pwa/src/components/Reader.tsx b/pwa/src/components/Reader.tsx
@@ -1442,6 +1442,36 @@ const Reader = ({ bookPath, bookId, bookRecord, getCoverDataUrl, onBack, darkMod
     }, 50)
   }
 
+  const getTTSRenditionViews = (): unknown[] => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const rawViews = (renditionRef.current as any)?.views?.()
+    if (!rawViews) return []
+    if (Array.isArray(rawViews)) return rawViews
+    if (typeof rawViews.toArray === 'function') return rawViews.toArray()
+    if (Array.isArray(rawViews._views)) return rawViews._views
+    if (Array.isArray(rawViews.views)) return rawViews.views
+
+    const collected: unknown[] = []
+    if (typeof rawViews.forEach === 'function') {
+      rawViews.forEach((view: unknown) => collected.push(view))
+    }
+    return collected
+  }
+
+  const getTTSViewDocument = (visibleSpineIdx?: number): Document | null => {
+    if (visibleSpineIdx === undefined) return currentDocRef.current
+
+    for (const view of getTTSRenditionViews()) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const v = view as any
+      const spineIndex = v?.index ?? v?.section?.index
+      const doc = v?.document as Document | undefined
+      if (spineIndex === visibleSpineIdx && doc?.body) return doc
+    }
+
+    return currentDocRef.current
+  }
+
   // 字體家族（獨立，不影響其他設定）
   useEffect(() => {
     if (!ready) return
@@ -1929,13 +1959,13 @@ const Reader = ({ bookPath, bookId, bookRecord, getCoverDataUrl, onBack, darkMod
 
   const updateTTSHighlight = (absoluteOffset: number, allowAutoFollow = true, source: TTSProgressSource = 'boundary') => {
     ttsLastAbsoluteOffsetRef.current = absoluteOffset
-    const doc = currentDocRef.current
+    const loc = (renditionRef.current as any)?.currentLocation?.()
+    const visibleSpineIdx = loc?.start?.index as number | undefined
+    const doc = getTTSViewDocument(visibleSpineIdx)
     if (!doc) {
       if (DEBUG_TTS_FOLLOW) console.log('[TTS:follow] skip highlight: no current doc', { absoluteOffset })
       return
     }
-    const loc = (renditionRef.current as any)?.currentLocation?.()
-    const visibleSpineIdx = loc?.start?.index as number | undefined
     if (visibleSpineIdx !== undefined && ttsVisibleSpineIndexRef.current !== visibleSpineIdx) {
       if (DEBUG_TTS_FOLLOW) console.log('[TTS:follow] skip highlight: visible spine 不符合朗讀 spine', {
         absoluteOffset,
@@ -1958,7 +1988,7 @@ const Reader = ({ bookPath, bookId, bookRecord, getCoverDataUrl, onBack, darkMod
     const highlights = (doc.defaultView as any)?.CSS?.highlights
     const HighlightCtor = (doc.defaultView as any)?.Highlight
     if (highlights && HighlightCtor) {
-      clearOtherTTSHighlights(doc)
+      clearAllTTSHighlights()
       highlights.delete(TTS_HIGHLIGHT_ID)
       highlights.set(TTS_HIGHLIGHT_ID, new HighlightCtor(range))
       ttsHighlightedDocRef.current = doc
@@ -2434,6 +2464,36 @@ const Reader = ({ bookPath, bookId, bookRecord, getCoverDataUrl, onBack, darkMod
     console.log('[TTS] handleTTSReset: 已重置朗讀進度')
   }
 
+  const handleApplyLatestVersion = async () => {
+    stopRef.current()
+    clearSleepTimer()
+    loadingAbortRef.current.aborted = true
+    cancelScheduledTTSHighlight()
+    clearAllTTSHighlights()
+
+    try {
+      if ('serviceWorker' in navigator) {
+        const registrations = await navigator.serviceWorker.getRegistrations()
+        await Promise.all(registrations.map((registration) => registration.unregister()))
+      }
+    } catch (err) {
+      console.warn('[PWA] Service Worker 清除失敗:', err)
+    }
+
+    try {
+      if ('caches' in window) {
+        const keys = await caches.keys()
+        await Promise.all(keys.map((key) => caches.delete(key)))
+      }
+    } catch (err) {
+      console.warn('[PWA] Cache Storage 清除失敗:', err)
+    }
+
+    const url = new URL(window.location.href)
+    url.searchParams.set('refresh', String(Date.now()))
+    window.location.replace(url.toString())
+  }
+
 
   return (
     <div
@@ -2459,6 +2519,7 @@ const Reader = ({ bookPath, bookId, bookRecord, getCoverDataUrl, onBack, darkMod
         isBookmarked={isBookmarked}
         onToggleBookmark={handleToggleBookmark}
         onToggleBookmarkList={() => togglePanel('bookmarks')}
+        onApplyLatestVersion={handleApplyLatestVersion}
       />
       <div className="flex flex-1 overflow-hidden">
         <div
diff --git a/pwa/src/components/Toolbar.tsx b/pwa/src/components/Toolbar.tsx
@@ -1,3 +1,14 @@
+import { useEffect, useRef, useState } from 'react'
+
+const IconRefresh = () => (
+  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M21 12a9 9 0 0 1-15.5 6.2" />
+    <path d="M3 12A9 9 0 0 1 18.5 5.8" />
+    <path d="M18 2v5h-5" />
+    <path d="M6 22v-5h5" />
+  </svg>
+)
+
 const IconSettings = () => (
   <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
     <circle cx="12" cy="12" r="3" />
@@ -107,6 +118,7 @@ interface Props {
   isBookmarked: boolean
   onToggleBookmark: () => void
   onToggleBookmarkList: () => void
+  onApplyLatestVersion: () => void | Promise<void>
 }
 
 const SERIF = '"Source Serif 4", "Noto Serif TC", Georgia, serif'
@@ -128,7 +140,12 @@ const Toolbar = ({
   isBookmarked,
   onToggleBookmark,
   onToggleBookmarkList,
+  onApplyLatestVersion,
 }: Props) => {
+  const [logoMenuOpen, setLogoMenuOpen] = useState(false)
+  const [applyingUpdate, setApplyingUpdate] = useState(false)
+  const logoMenuRef = useRef<HTMLDivElement>(null)
+
   const paperBg   = darkMode ? '#1a1816' : '#f9f7f2'
   const borderCol = darkMode ? '#3a3430' : '#e4ddd0'
   const inkCol    = darkMode ? '#e8e0d4' : '#2a2420'
@@ -141,6 +158,22 @@ const Toolbar = ({
     ? Math.round(pageInfo.page / pageInfo.total * 100)
     : null
 
+  useEffect(() => {
+    if (!logoMenuOpen) return
+    const onPointerDown = (event: PointerEvent) => {
+      if (logoMenuRef.current?.contains(event.target as Node)) return
+      setLogoMenuOpen(false)
+    }
+    document.addEventListener('pointerdown', onPointerDown)
+    return () => document.removeEventListener('pointerdown', onPointerDown)
+  }, [logoMenuOpen])
+
+  const handleApplyLatestVersion = async () => {
+    if (applyingUpdate) return
+    setApplyingUpdate(true)
+    await onApplyLatestVersion()
+  }
+
   const btn = (
     isActive: boolean,
     onClick: () => void,
@@ -177,6 +210,55 @@ const Toolbar = ({
       {/* 左：返回 + 書名作者（固定寬度區塊） */}
       <div style={{ display: 'flex', alignItems: 'center', gap: 4, flexShrink: 0 }}>
         {btn(false, onBack, <IconBack />, '返回書庫', { color: inkCol })}
+        <div ref={logoMenuRef} style={{ position: 'relative', flexShrink: 0 }}>
+          <button
+            onClick={(e) => { e.stopPropagation(); setLogoMenuOpen((open) => !open) }}
+            onTouchEnd={(e) => { e.preventDefault(); e.stopPropagation(); setLogoMenuOpen((open) => !open) }}
+            aria-label="Travel in Time 選單"
+            title="Travel in Time"
+            style={{
+              width: 34, height: 34, borderRadius: 8,
+              background: logoMenuOpen ? accentBg : inkCol,
+              color: logoMenuOpen ? accentCol : paperBg,
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              fontFamily: SERIF, fontStyle: 'italic', fontWeight: 700, fontSize: 17,
+              cursor: 'pointer', touchAction: 'manipulation',
+            }}
+          >
+            T
+          </button>
+          {logoMenuOpen && (
+            <div
+              style={{
+                position: 'absolute', left: 0, top: 40, zIndex: 60,
+                width: 178, padding: 6, borderRadius: 8,
+                background: paperBg, border: `1px solid ${borderCol}`,
+                boxShadow: '0 14px 32px -14px rgba(0,0,0,0.45)',
+              }}
+              onClick={(e) => e.stopPropagation()}
+              onTouchStart={(e) => e.stopPropagation()}
+            >
+              <button
+                onClick={handleApplyLatestVersion}
+                disabled={applyingUpdate}
+                style={{
+                  width: '100%', minHeight: 34, borderRadius: 6, padding: '8px 10px',
+                  display: 'flex', alignItems: 'center', gap: 8,
+                  color: applyingUpdate ? ink3Col : inkCol,
+                  background: 'transparent',
+                  fontFamily: 'inherit', fontSize: 13, textAlign: 'left',
+                  cursor: applyingUpdate ? 'default' : 'pointer',
+                  opacity: applyingUpdate ? 0.7 : 1,
+                }}
+                onMouseEnter={(e) => { if (!applyingUpdate) e.currentTarget.style.background = hoverBg }}
+                onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent' }}
+              >
+                <IconRefresh />
+                <span>{applyingUpdate ? '更新中…' : '套用最新版'}</span>
+              </button>
+            </div>
+          )}
+        </div>
         {bookTitle && (
           <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', width: 150 }}>
             <div style={{ fontFamily: SERIF, fontSize: 13, color: inkCol, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.3 }}>
diff --git a/pwa/src/main.tsx b/pwa/src/main.tsx
@@ -3,6 +3,20 @@ import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
 
+if ((import.meta as any).env?.DEV) {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.getRegistrations()
+      .then((registrations) => registrations.forEach((registration) => registration.unregister()))
+      .catch(() => {})
+  }
+
+  if ('caches' in window) {
+    caches.keys()
+      .then((keys) => Promise.all(keys.map((key) => caches.delete(key))))
+      .catch(() => {})
+  }
+}
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
