标签: browser-cache

我正在我的应用程序中加载一些缩略图图像，这些缩略图存储在谷歌云上，我已将缩略图对象公开并设置cache-control: public, max-age:2628000，这似乎在 chrome 上工作，我看到图像正在从缓存加载，但在 mozilla firefox 上这是不起作用，每当我重新加载页面时，我总是看到图像是从服务器请求的。我还检查了我没有disable cache签入开发人员工具，这是一个屏幕截图

每次我看到字节传输并且图像没有从缓存加载。

对此的任何帮助将不胜感激。谢谢。

我有一个 React 应用程序，其中我正在向后端 API 执行提取请求。\n我正在尝试在 UI 端实现大量请求的缓存。

我能够在 Mozilla Firefox 中成功完成此操作，并且运行得非常好。\n但是 chrome 给我带来了困难。\n这是我试图实现的代码片段 -

        fetch(URL, {\n            signal: this.abortController.signal,\n            cache: "default",\n            headers: {\n                "Cache-Control": "max-age=120"\n            }\n        })\n            .then(response => return response.json())\n            .catch(error => {\n                if (error.name === "AbortError") {\n                    return;\n                }\n                this.setError(error);\n            });\n

我正在跟踪检查缓存的过程-

\n
1. 首先打开正在执行获取请求的选项卡。
\n
2. 将选项卡更改为不同的选项卡。
\n
3. 在超时期限（120 秒）内返回步骤 1 中提到的选项卡
\n

在检查 Firefox 的网络选项卡时，我可以看到“已传输”为“已缓存”，并且页面加载和一切都按预期工作有显着改进。

然而，在 Chrome 中，我仍然可以看到“大小”为“3.9 KB”，时间为“毫秒”。

我尝试了 - Chrome 是否忽略 Cache-Control: max-age?中提到的步骤 没有任何成功。

我还发现 - https://www.mnot.net/blog/2017/03/16/browser-caching …

如果用户第一次拒绝，我想重新提示相机许可。

代码：

navigator.mediaDevices.getUserMedia({video: true, audio: false}).then(function(){
      document.getElementById("submitbutton").style.display="inline"; 
  }).catch(function(err){alert("Please provide consent.");location.reload();});

上面的代码在我第一次拒绝权限后重新加载页面。但重新加载后，它不会提示许可，而是再次进入 .catch 块

我相信发生这种情况是因为浏览器第一次存储被拒绝的承诺，并在页面重新加载时检查相同的承诺。

有什么办法可以强制再次出现权限提示吗？

在服务器迁移期间，新的 nginx 配置缺少缓存控制指令。因此，我们最终得到了一个缓存index.html，这对于我们的 SPA 来说非常糟糕，如果我们部署新代码，它就不再刷新。我们需要不缓存index.html。

这是我们几天前上线的（错误的）nginx 配置：

server {
  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

我们修复了我们的配置：

server {
  listen 80;

  root /usr/share/nginx/html;

  location / {
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
    add_header Cache-Control "no-store, no-cache, must-revalidate";
  }

  location ~* \.(js|jpg|jpeg|gif|png|svg|css)$ {
    add_header Cache-Control "max-age=31536000, public";
  }

  error_page   500 502 503 504  /50x.html;

  location = …

我正在开发一个主要处理文档（PDF）的 Angular 应用程序。

为了让用户体验更顺畅，我们实现了以下服务工作线程缓存设置，这些设置缓存处理这些 PDF 及其缩略图的某些端点，以减少加载时间：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "imageStoreCache",
      "urls": ["/api/the-image-store/*/*"],
      "cacheConfig": {
        "maxSize": 100,
        "maxAge": "7d",
        "timeout": "10s",
        "strategy": "performance"
      }
    },
    {
      "name": "imageStoreCache",
      "urls": ["/api/the-image-store/*"],
      "cacheConfig": {
        "maxSize": 100,
        "maxAge": "7d",
        "timeout": "10s",
        "strategy": …

当缓存与HTML页面must-revalidate,这意味着浏览器必须检查被定义的任何更新Last-Modified或Etag.然而,问题是,之前max-age,浏览器不会与该网站进行任何连接读取HTTP标头(分析Last-Modified和Etag)？

如何强制浏览器做一个简单的连接到阅读(至少)HTTP读者从缓存中加载页面的？

我不明白的用法must-revalidate!以前检查更新是否有责任max-age？因为在到达之后max-age,浏览器将从网站读取并且从不使用本地缓存.

我在与$ cacheFactory应用程序添加缓存,但是当用户关闭浏览器,然后重新打开,有关浏览产品的缓存数据已过期.

有没有办法让它更长？把到期日期或类似的东西？

谢谢.

编辑:我可能不得不使用Breeze.js,但在此之前我想知道你是否有人知道是否可以使用angularjs(我读了API并且没有关于它的信息:S).

编辑2:帮助,我使用$ cacheFactory的方式就像这个JSFiddle代码.

factory('SomeCache', function($cacheFactory) {
    return $cacheFactory('someCache', {
        capacity: 3 // optional - turns the cache into LRU cache
    });
}).

编辑3: Lawnchair不是一个选项,它存储在一个javascript数组中,并且在关闭浏览器后不会保留数据.

现在我已升级到IE10,很难让我的javascript更改文件得到识别.

在IE9中,您只需使用develepor面板中的"清除缓存"按钮,就可以看到您的javascript更改.

这显然不再有效 - 是否有其他方法可以让IE10转储缓存？这是残酷的!

在Windows 7上,使用VS2010并刚刚升级到IE10.

我正试图通过点击后退按钮获取一个页面,以便在客户端到达时从服务器加载新副本.默认情况下,它从浏览器内存加载旧的缓存副本.

有没有办法做到这一点？(在node.js中)

window.unload 如上所述添加空函数对我不起作用.

你有没有经验可以在Sitecore 8.1中配置Etags？我没有看到来自媒体库的所有图像都有响应缓存标头ETag.

我已经在大多数现代浏览器中验证了chrome和Firefox Network Tab.

谢谢马拉