标签: browser-cache

我正在研究一个反应项目（网络），它在页面上有许多静态图像。问题是图像很少更改，但是每次对图像的请求都会检查图像是否已更改并获得 304 状态代码。每个请求大约需要不到 1 秒，但是由于图像很多，这很烦人，也不利于用户体验。如何缓存图像以防止不发送对特定图像的请求？如果有多种解决方案，哪个是好的解决方案？

我无法让我的 angular5 Service Worker 工作。我有两个主要问题：

1. Service Worker 不会缓存用作背景图像的资产图像
2. 在模拟网络断开连接后，Service Worker 最初从缓存中提取文件（上述非缓存文件除外），但在第二次刷新后遇到错误。

下面是我的问题的更详细的报告。您可以通过克隆我为突出显示位于此处的问题而制作的存储库来跟进。

我使用提供的 --service-worker 标签创建了应用程序。然后我确保遵循此处Angular 文档中列出的 5 个步骤，即：

1. 添加了 Service Worker 包。
2. angular-cli.json 将 service-worker 设置为 true
3. Service Worker 在 app.module.ts 中导入并注册
4. ngsw-config.json 是按照文档中的描述生成和配置的。
5. 运行 ng build --prod 以在应用程序的 dist 文件夹中生成包。

我使用 node/express 和 server.js 文档为我的应用程序提供服务。当我在隐身窗口中打开应用程序时（如文档所建议的那样），我看到我的服务工作者已注册，并且缓存存储了我的包和索引文件。它还缓存在 img 标签中使用的图像，但它不缓存在我的 css background-image 中指定的图像。当我通过选中 Service Worker 上的离线框来模拟网络问题然后刷新我的页面时，除了需要背景图像的部分之外，该页面会正确显示所有内容。

但是当我第二次刷新应用程序或打开另一个选项卡（在同一个隐身窗口上，因此服务工作者仍然注册并且缓存仍然处于活动状态时）会出现最终/主要问题。在这一点上，我什么也没有显示。控制台给了我三个错误：

1. 获取http://localhost:3000/favicon.ico net::ERR_INTERNET_DISCONNECTED
2. 获取脚本时发生未知错误。
3. 无法加载资源：net::ERR_INTERNET_DISCONNECTED

最后一个错误来自 ngsw-worker.js。我不太确定如何处理这些错误。我想也许一个新的 service worker 正在尝试注册，但我不确定为什么会发生这种情况......

这是我要求的 ng-config.json 文件：

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app", …

我们遇到了显示主页的先前版本的问题。即使从那时起发生了变化，网页将始终显示旧版本。

这个问题源于我们使用 WordPress 插件 Last-Modified: Tue, 19 Apr 2016 15:18:40 GMT 向响应添加了 标头。

找到解决此问题的唯一方法是在浏览器上强制刷新。有没有办法远程使所有客户端的缓存无效？

请求-响应头

我正在尝试启用Gzip 压缩并利用 Laravel 中的浏览器缓存进行网站优化。我不知道如何在 Laravel 中启用它们。

任何帮助/建议将不胜感激。

提前致谢。

我有网络应用程序，并且有可以刷新商店徽标的界面。当我刷新徽标时，我会使用新last-modified标题创建新文件：

Nginx 返回更正的更新文件。

之后，我再次更新徽标。但是我用 old 得到了旧徽标last-modified，尽管徽标 url 文件已更改（您可以在 url 末尾看到查询时间戳）：

如果我通过浏览器执行直接请求，那么我会得到更新的文件：

这可以通过内容长度在文件大小中看到。

我的 nginx 图像配置是：

location ~* ^.+\.(jpg|jpeg|svg|gif|png)$ {
       expires 10d;     
       try_files $uri @app;
}

我不明白我做错了什么。请帮我。提前致谢

这是其中之一，“我需要一种解决方法，以便在项目启动后不必忍受用户 1000 年的争​​吵”类型的问题：

我有一种情况，每当有人启动 Chrome 时，我都需要重新加载我的网站，而上次关闭浏览器时却没有关闭标签页。我们正在现代、MEAN 堆栈环境中重建一个古老的站点，我只知道当它启动时我会收到投诉。

换句话说（危险：伪代码）-

if client closed chrome with site open
  reauthenticate user
  redirect to home page

我可以通过快速路由和护照身份验证完成最后两位，但是我如何检测客户端是否从他们的末端加载缓存页面？

我正在运行 angular 6。当使用 --prod 构建时，脚本会使用诸如 main.547a75c48dc342a8e291.js 之类的名称生成。我认为这是每次生成的唯一名称，但它似乎是相同的。

angular CLI 如何生成这个名字？我是否应该提供另一种选择以确保每次我们进行生产构建时它都是独一无二的？

有时我的 angular 应用程序会更新。该应用程序已经上线，一些常见的使用场景是当用户根本没有关闭带有应用程序的浏览器选项卡时，因此可以永远使用没有检查的过时版本。

我已经实现了一种机制来检查后端端的应用程序版本，因此所有来自过时版本的调用都会被拒绝。

下一步是向用户显示一些“需要更新”对话框，以防出现此类后端拒绝和确认的情况，最好不要强制用户手动按“Ctrl + F5”，而是从应用程序自动执行.

是否可以？

情况：

在 mywebsite.com/game 上，我注册了一个 service-worker

navigator.serviceWorker.register('/service-worker.js', {scope: "/"});

在我的服务器上，'/service-worker.js'maxAge 为1d.

问题：

service-worker.js有一个重大错误。它总是显示一个空页面并且无法获取任何内容。service-worker.js必须改变。

问题是每当用户转到 时mywebsite.com/game，它会显示空页面并且什么也不做。我无法让客户端获取新的service-worker.js.

我怎样才能让客户端获取新的service-worker.js？

有什么作用HashedModuleIdsPlugin？

来自Webpack 文档：

该插件将根据模块的相对路径生成哈希值，生成一个四字符的字符串作为模块 id。建议在生产中使用。

在阅读了几次之后，我仍然无法理解为什么以及何时使用它，以及它与我在output部分中为每个包定义名称的方式有什么关系：

filename: '[contenthash].[name].js',