Question

我正在尝试创建一个缓存要下载图像的Web应用程序。

假设你有以下html：

<a href="http://example.com/image.jpg" download="">
    <img src="http://example.com/image.jpg" alt="Image"/>
</a>

右键单击图像并单击“保存”后，将直接保存图像。但是，当您单击链接（或使用javascript触发它）时，它必须重新下载整个图像，即使它已经在缓存中。

有没有办法保存图像而无需重新下载？（或者以另一种方式缓存它，可能是通过创建blob或数据URL？）

谢谢！

Answer 1

尝试服务工作者缓存请求：

类似的东西：

的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <a href="https://upload.wikimedia.org/wikipedia/commons/f/f1/Pencil-ruler_icon.png" download="">
        <img src="https://upload.wikimedia.org/wikipedia/commons/f/f1/Pencil-ruler_icon.png" alt="Image"/>
    </a>
    <script src="test.js"></script>
</body>
</html>

脚本文件（test.js）：

caches
    .open('assets')
    .then(cache => cache.addAll([
        'https://upload.wikimedia.org/wikipedia/commons/f/f1/Pencil-ruler_icon.png'
    ]))
    .then(() => 
        navigator.serviceWorker.register('cache-image.js', { scope: './' })
            .then(navigator.serviceWorker.ready)
    )

服务工作者本身（cache-image.js）：

// this is the service worker which intercepts all http requests
self.addEventListener('fetch', function fetcher (event) {
  var request = event.request;
  // check if request 
  if (request.url.indexOf(
      'Pencil-ruler_icon.png'
    ) > -1) {
    // contentful asset detected
    event.respondWith(
      caches.match(event.request).then(function(response) {
        // return from cache, otherwise fetch from network
        return response || fetch(request);
      })
    );
  }
});

下载已缓存的图像

1 个答案: