Favicons尽管缓存它们仍然取得进展

Question

我有一个favicons列表

使用服务工作者缓存所有文件，即其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 bug report

2018年11月26日的更新已解决

Service worker: FetchEvents for requests for same-origin favicons

Answer 2

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

在检查服务工作者的一般调试中，

1）确保chrome dev工具下的“service worker” - ＆gt;应用程序随您的域名以绿色显示。

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

3）SW无法通过HTTP工作。确保您的URL通过HTTPS提供有效证书。

4）确保您的Web服务器支持服务工作者。某些服务器（如angular（ng服务）中使用的服务器）不支持服务工作者。一个不错的选择是使用http-server。

Install ->  npm install http-server -g

在构建文件夹中运行此命令 - ＆gt;

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

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