Favicon仍在获取，尽管已将其缓存

Question

我有一个网站图标列表

我正在使用服务工作者来缓存所有文件，即其PWA，我的文件如下

"/",
"/index.html",
"/favicon/apple-touch-icon.png",
"/favicon/favicon-32x32.png",
"/favicon/favicon-16x16.png",
"/favicon/site.webmanifest",
"/favicon/safari-pinned-tab.svg",
"/favicon/favicon.ico",
"/favicon/browserconfig.xml",
"/app.css",
"/app.js",

问题是我的两个非常具体的文件，

这两个文件/favicon/favicon-32x32.png和/favicon/favicon-16x16.png。在这里的任何帮助，将不胜感激。

Answer 1

这是一个已知的Chrome错误。从2016年开始已知。由于安全问题，到目前为止没有解决方案。

Chrome错误报告

更新于2018年11月11日已解决

服务工作者：FetchEvents，用于请求相同来源的网站图标

Answer 2

从网络请求的屏幕截图中，我看不到所有其他请求的软件缓存是如何工作的。我可以看到一个 304。仅凭这一点并不意味着 SW 工作正常。如果您可以省出完整的网络选项卡屏幕截图（可能隐藏文件名？），它将有助于更好地理解问题。

在一般调试中检查 Service Worker，

1) 确保 chrome 开发工具 -> 应用程序下的“服务工作线程”与您的域呈绿色。

2) 如果它不是绿色的，您可能缺少正确配置软件或构建过程缺少所需的清单文件。

3) SW 无法通过 HTTP 运行。确保您的 URL 通过带有有效证书的 HTTPS 提供。

4) 确保您的 Web 服务器支持 Service Worker。某些服务器（例如 Angular (ngserve) 中使用的服务器）不支持 Service Worker。一个好的选择是使用 http-server。

Install ->  npm install http-server -g

在构建文件夹中运行此命令 ->

http-server -o -i 172.22.49.205 -p 8080 -S

5) 如果 URL 是带有证书的 HTTPS，并且 Service Worker 在开发工具中变为绿色，那么最后的机会可能是您要缓存的文件配置不正确，但这里的情况似乎并非如此。加载页面后，您可以断开网络连接或停止网络服务器并检查Chrome是否仍在加载页面（从缓存）。如果没有，它不仅仅是您最喜欢的图标。但谁的缓存有问题。