如何在Electron中预取图片并保存至本地实现离线访问

首先你当前使用的Service Worker方案存在几个已知问题：

• 代码中dynamicCache变量未定义，会直接触发运行报错
• Electron环境下file://协议对Service Worker的支持存在较多限制，用Node的path.join拼接的绝对路径不符合Service Worker注册的路径规范
• 浏览器原生缓存容量有上限，且用户手动清理浏览器缓存会导致所有缓存丢失，可控性极差

方案1：Electron主进程本地缓存（最稳定，优先推荐） #

利用Electron主进程的文件系统权限，把图片下载到用户本地的应用私有数据目录，再拦截渲染进程的图片请求直接返回本地文件，完全不受浏览器缓存限制，可控性最高。

实现步骤 #

1. 主进程初始化时创建专用缓存目录，注册自定义协议拦截图片请求

// 主进程 main.js
const { app, net, protocol, ipcMain } = require('electron')
const fs = require('fs-extra')
const path = require('path')

// 创建本地图片专属缓存目录，路径在应用私有数据目录下，不会被用户误删
const IMAGE_CACHE_DIR = path.join(app.getPath('userData'), 'article_images')
fs.ensureDirSync(IMAGE_CACHE_DIR)

// 注册自定义协议权限
protocol.registerSchemesAsPrivileged([
  { scheme: 'app-img', privileges: { supportFetchAPI: true, secure: true } }
])

app.whenReady().then(() => {
  // 拦截所有app-img://协议的请求
  protocol.handle('app-img', async (request) => {
    // 解析出原始图片url
    const imgUrl = decodeURIComponent(request.url.slice('app-img:///'.length))
    // 用原始url生成哈希作为本地文件名，避免重名
    const imgHash = Buffer.from(imgUrl).toString('hex')
    const localPath = path.join(IMAGE_CACHE_DIR, imgHash)
    
    // 本地已存在缓存直接返回本地文件
    if (await fs.pathExists(localPath)) {
      return new Response(fs.createReadStream(localPath))
    }
    
    // 无缓存则先下载到本地再返回
    const response = await net.fetch(imgUrl)
    if (response.ok) {
      const body = await response.arrayBuffer()
      await fs.writeFile(localPath, Buffer.from(body))
      return new Response(fs.createReadStream(localPath))
    }
    return response
  })
})

2. 渲染层改造图片链接：把所有文章里的图片url替换为app-img:///${encodeURIComponent(原图片url)}格式即可，自动走本地缓存逻辑
3. 可选添加预下载能力，用户打开文章列表时就提前把所有关联图片下载到本地，完全实现离线可用

// 主进程暴露预下载接口给渲染层调用
ipcMain.handle('preload-images', async (event, imgUrls) => {
  const tasks = imgUrls.map(async imgUrl => {
    const imgHash = Buffer.from(imgUrl).toString('hex')
    const localPath = path.join(IMAGE_CACHE_DIR, imgHash)
    if (await fs.pathExists(localPath)) return
    const res = await net.fetch(imgUrl)
    if (res.ok) {
      const buf = await res.arrayBuffer()
      await fs.writeFile(localPath, Buffer.from(buf))
    }
  })
  await Promise.allSettled(tasks)
  return true
})

方案2：优化现有Service Worker方案 #

如果坚持使用Service Worker，先修复现有问题，再适配Electron环境：

1. 把sw_cache.js放到Vue项目的public目录，注册路径直接写/sw_cache.js，不要用path.join拼接路径
2. 修复代码中未定义的变量，增加缓存规则限制，只缓存图片避免不必要的资源占用

// 修复后的sw_cache.js
const CACHE_NAME = `static-cache-v1`
const DYNAMIC_CACHE_NAME = `image-cache-v1`
// 只缓存图片类型
const IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif', 'image/webp']

const filesToCache = [
  'index.html',
  'as-nova.ttf'
];

self.addEventListener('install', function (event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
    .then(function (cache) {
      return cache.addAll(filesToCache);
    })
    .then(() => self.skipWaiting())
    .catch(err => console.log('缓存静态资源失败: ', err))
  );
});

self.addEventListener('fetch', event => {
  // 非图片请求走正常逻辑
  const isImage = event.request.destination === 'image' || IMAGE_TYPES.some(type => event.request.headers.get('accept')?.includes(type))
  if (!isImage) {
    event.respondWith(fetch(event.request).catch(() => caches.match(event.request)))
    return
  }
  // 图片请求优先走缓存
  event.respondWith(
    caches.match(event.request).then(cacheRes => {
      return cacheRes || fetch(event.request).then(fetchRes => {
        return caches.open(DYNAMIC_CACHE_NAME).then(cache => {
          cache.put(event.request.url, fetchRes.clone());
          return fetchRes
        })
      })
    })
  )
})
self.addEventListener('activate', event => {
  // 清理旧版本缓存避免冗余
  event.waitUntil(
    caches.keys().then(keys => {
      return Promise.all(keys.filter(key => key !== CACHE_NAME && key !== DYNAMIC_CACHE_NAME).map(key => caches.delete(key)))
    }).then(() => clients.claim())
  );
});

内容的提问来源于stack exchange，提问作者Abhishek Matta