fix: harden discover artwork caching

web/public/artwork-cache-sw.js

@@ -1,4 +1,6 @@
-const ARTWORK_CACHE = 'mediastationgo-artwork-v1'
+const ARTWORK_CACHE_PREFIX = 'mediastationgo-artwork-'
+const ARTWORK_CACHE = `${ARTWORK_CACHE_PREFIX}v2`
+const MIN_CACHEABLE_ARTWORK_BYTES = 128
 const STRIP_QUERY_KEYS = ['token', 'profile_id', 'profile_pin_token']
 
 function isArtworkRequest(url) {
@@ -33,6 +35,14 @@ self.addEventListener('fetch', (event) => {
   event.respondWith(cacheArtwork(request))
 })
 
+self.addEventListener('install', (event) => {
+  event.waitUntil(self.skipWaiting())
+})
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(deleteOldArtworkCaches().then(() => self.clients.claim()))
+})
+
 async function cacheArtwork(request) {
   const cache = await caches.open(ARTWORK_CACHE)
   const cacheKey = normalizedArtworkRequest(request)
@@ -40,14 +50,43 @@ async function cacheArtwork(request) {
   if (cached) return cached
 
   const response = await fetch(request)
-  const contentType = response.headers.get('Content-Type') || ''
-  if (response.ok && contentType.toLowerCase().startsWith('image/')) {
-    await cache.put(cacheKey, response.clone())
+  const cacheResponse = await cloneCacheableArtworkResponse(response)
+  if (cacheResponse) {
+    await cache.put(cacheKey, cacheResponse)
     await deleteOldArtworkVariants(cache, cacheKey)
   }
   return response
 }
 
+async function cloneCacheableArtworkResponse(response) {
+  if (!response.ok) return null
+  const contentType = response.headers.get('Content-Type') || ''
+  if (!contentType.toLowerCase().startsWith('image/')) return null
+  const cacheControl = response.headers.get('Cache-Control') || ''
+  if (/\bno-store\b/i.test(cacheControl)) return null
+
+  const contentLength = Number(response.headers.get('Content-Length') || '0')
+  if (Number.isFinite(contentLength) && contentLength > 0 && contentLength <= MIN_CACHEABLE_ARTWORK_BYTES) {
+    return null
+  }
+
+  const buffer = await response.clone().arrayBuffer()
+  if (buffer.byteLength <= MIN_CACHEABLE_ARTWORK_BYTES) return null
+  return new Response(buffer, {
+    status: response.status,
+    statusText: response.statusText,
+    headers: new Headers(response.headers),
+  })
+}
+
+async function deleteOldArtworkCaches() {
+  const names = await caches.keys()
+  await Promise.all(names.map((name) => {
+    if (!name.startsWith(ARTWORK_CACHE_PREFIX) || name === ARTWORK_CACHE) return undefined
+    return caches.delete(name)
+  }))
+}
+
 async function deleteOldArtworkVariants(cache, currentRequest) {
   const currentURL = new URL(currentRequest.url)
   const currentIdentity = artworkIdentity(currentURL)

web/src/api/client.ts

@@ -151,11 +151,21 @@ export function hlsURL(mediaId: string): string {
 
 // imageURL converts a remote poster URL into a same-origin proxy URL so it
 // can never be blocked by CORS / GFW. Empty strings pass through unchanged.
-export function imageURL(remote?: string, version?: string, retryFailed = false): string {
+export type ImageURLOptions =
+  | boolean
+  | {
+      refreshCache?: boolean
+      retryFailed?: boolean
+    }
+
+export function imageURL(remote?: string, version?: string, options: ImageURLOptions = false): string {
   if (!remote) return ''
   const versionQuery = version ? `v=${encodeURIComponent(version)}` : ''
+  const retryFailed = typeof options === 'boolean' ? options : Boolean(options.retryFailed)
+  const refreshCache = typeof options === 'boolean' ? false : Boolean(options.refreshCache)
   const retryQuery = retryFailed ? 'retry=1' : ''
-  const imageQuery = [versionQuery, retryQuery].filter(Boolean).join('&')
+  const refreshQuery = refreshCache ? 'refresh=1' : ''
+  const imageQuery = [versionQuery, retryQuery, refreshQuery].filter(Boolean).join('&')
   if (remote.startsWith('/api/img')) return withQuery(withoutAuthQuery(remote), imageQuery)
   if (remote.startsWith('/api/cloud/play/')) return withQuery(withoutAuthQuery(remote), imageQuery)
   if (remote.startsWith('/api/')) return withQuery(withQuery(remote, tokenQuery()), imageQuery)

web/src/pages/DiscoverContentRow.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react'
-import { ImageOff, Info } from 'lucide-react'
+import { Info } from 'lucide-react'
 
 import type { DiscoverItem } from '../api/discover'
 import { imageURL } from '../api/client'
@@ -9,11 +9,13 @@ export function ContentRow({
   title,
   items,
   imageVersion,
+  refreshImageVersion,
   onSelect,
 }: {
   title: string
   items: DiscoverItem[]
   imageVersion?: string
+  refreshImageVersion?: string
   onSelect: (item: DiscoverItem) => void
 }) {
   return (
@@ -21,7 +23,13 @@ export function ContentRow({
       <h2 className="pl-1 font-display text-2xl font-semibold text-ink-600">{title}</h2>
       <div className="grid grid-cols-3 gap-4 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-7 xl:grid-cols-8">
         {items.map((item, index) => (
-          <DiscoverCard key={discoverKey(item, index)} item={item} imageVersion={imageVersion} onSelect={onSelect} />
+          <DiscoverCard
+            key={discoverKey(item, index)}
+            item={item}
+            imageVersion={imageVersion}
+            refreshImageVersion={refreshImageVersion}
+            onSelect={onSelect}
+          />
         ))}
       </div>
     </section>
@@ -48,24 +56,47 @@ export function DiscoverSkeleton() {
 function DiscoverCard({
   item,
   imageVersion,
+  refreshImageVersion,
   onSelect,
 }: {
   item: DiscoverItem
   imageVersion?: string
+  refreshImageVersion?: string
   onSelect: (item: DiscoverItem) => void
 }) {
   const source = discoverItemSource(item)
-  const [posterFailed, setPosterFailed] = useState(false)
+  const [posterRetry, setPosterRetry] = useState(0)
+  const [posterUnavailable, setPosterUnavailable] = useState(false)
+  const posterVersion = [imageVersion, posterRetry > 0 ? `r${posterRetry}` : ''].filter(Boolean).join('-')
+  const shouldRefreshCache = Boolean(
+    (imageVersion && refreshImageVersion === imageVersion) || posterRetry > 0,
+  )
   const posterSrc = useMemo(
-    () => imageURL(item.poster_url, imageVersion, true),
-    [imageVersion, item.poster_url],
+    () =>
+      imageURL(item.poster_url, posterVersion, {
+        refreshCache: shouldRefreshCache,
+        retryFailed: true,
+      }),
+    [item.poster_url, posterVersion, shouldRefreshCache],
   )
 
   useEffect(() => {
-    setPosterFailed(false)
-  }, [posterSrc])
+    setPosterRetry(0)
+    setPosterUnavailable(false)
+  }, [item.poster_url])
 
-  const showFallback = !posterSrc || posterFailed
+  useEffect(() => {
+    if (!posterUnavailable || posterRetry >= 3) return
+    const timer = window.setTimeout(() => {
+      setPosterRetry((current) => current + 1)
+      setPosterUnavailable(false)
+    }, 1200 * (posterRetry + 1))
+    return () => window.clearTimeout(timer)
+  }, [posterRetry, posterUnavailable])
+
+  const markPosterUnavailable = () => setPosterUnavailable(true)
+
+  if (!posterSrc || posterUnavailable) return null
 
   return (
     <button
@@ -80,24 +111,16 @@ function DiscoverCard({
             alt={item.title}
             loading="lazy"
             referrerPolicy="no-referrer"
-            onError={() => setPosterFailed(true)}
+            onError={markPosterUnavailable}
             onLoad={(event) => {
               const img = event.currentTarget
-              setPosterFailed(img.naturalWidth <= 1 && img.naturalHeight <= 1)
+              if (img.naturalWidth <= 1 && img.naturalHeight <= 1) {
+                markPosterUnavailable()
+              }
             }}
-            className={
-              'h-full w-full object-cover transition-transform duration-500 group-hover:scale-105 ' +
-              (posterFailed ? 'opacity-0' : 'opacity-100')
-            }
+            className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
           />
         )}
-        {showFallback && (
-          <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-gray-100 px-3 text-center text-gray-500">
-            <ImageOff size={22} className="text-gray-400" />
-            <span className="line-clamp-2 text-xs font-medium text-gray-600">{item.title}</span>
-            <span className="text-[10px] text-gray-400">{posterSrc ? '海报待刷新' : '无海报'}</span>
-          </div>
-        )}
         <div className="absolute left-1.5 top-1.5 rounded-xl border border-white/20 bg-black/65 px-1.5 py-0.5 text-[10px] font-semibold uppercase text-white backdrop-blur-sm">
           {source}
         </div>

web/src/pages/DiscoverPage.tsx

@@ -21,6 +21,7 @@ export function DiscoverPage() {
   const [activeItem, setActiveItem] = useState<DiscoverItem | null>(null)
   const [reloadSeq, setReloadSeq] = useState(0)
   const [imageVersion, setImageVersion] = useState(() => String(Date.now()))
+  const [refreshImageVersion, setRefreshImageVersion] = useState<string>()
 
   useEffect(() => {
     let cancelled = false
@@ -122,7 +123,9 @@ export function DiscoverPage() {
   }
 
   const refreshDiscover = () => {
-    setImageVersion(String(Date.now()))
+    const nextImageVersion = String(Date.now())
+    setImageVersion(nextImageVersion)
+    setRefreshImageVersion(nextImageVersion)
     setReloadSeq((current) => current + 1)
   }
 
@@ -200,6 +203,7 @@ export function DiscoverPage() {
                 title={sectionMap.get(key)?.label ?? key}
                 items={items}
                 imageVersion={imageVersion}
+                refreshImageVersion={refreshImageVersion}
                 onSelect={setActiveItem}
               />
             )