Question

我们目前正在使用Webpack和HtmlWebpackPlugin为我们的网页生成我们的javascript构建。

new HtmlPlugin({
    template: 'www/index-template.html',                //source path - relative to project root
    filename: 'index.html',                             //output path - relative to outpath above
    hash: true,
    cache: true                                         //only emit new bundle if changed
}),

这会导致将哈希添加到捆绑的javascript文件的查询字符串中。

<script type="text/javascript" src="/build/vendor.min.js?4aacccd01b71c61e598c"></script><script type="text/javascript" src="/build/client.min.js?4aacccd01b71c61e598c"></script>

使用任何标准桌面或移动浏览器时，新版本会正确缓存，并且无需用户付出任何努力即可加载新版本的网站。但是，我们还有一个chrome web app实现，我们称之为：

chrome.exe --app = http://localhost:65000 --disable-extensions

在这个应用程序中，由于某种原因，javascript构建结束时的哈希不会破坏缓存。我们必须手动右键单击页面上的某个位置，然后单击重新加载（或按F5）。由于某种原因，缓存不会在Web应用程序中被破坏。

我在考虑可能是在缓存index.html文件吗？这可能导致应用程序永远不会在构建上收到更新的哈希值。如果是这种情况，我不知道如何解决这个问题。

我还注意到，如果我们的localhost服务器关闭，页面仍会加载，就像服务器正在运行一样。这向我指示某种离线缓存。我检查了manifest.json parameters并且无法找到任何强制重新加载的内容。

我也试过这些镀铬命令行开关，它们都没有帮助： - disk-cache-size = 0， - aggressive-cache-discard， - disable-offline-auto-reload。

另一个警告是我们需要保留localStorage数据及其cookie。在标准浏览器窗口或任何浏览器中，它可以正常工作，但不适用于Chrome网络应用程序中。

Answer 1

由于您的网页无法在localhost运行服务器，我怀疑您的应用首先处于离线状态。这完全是通过服务工作者（由@Chad H 指出）完成的，Chrome正式支持并在其他浏览器中具有实验性。因此，在其他浏览器中期望不同的行为。要破坏缓存，

生产中

对于永久解决方案，您可以查找和修改服务工作者（SW）代码。删除旧缓存仅在SW的activate事件中发生。

您还可以阅读有关Service worker的更多信息，并使用更新后的SW代码提出问题。另外，请查看解决了类似于您的问题的已解决issue。

对于开发设置

您可以使用Chrome DevTools中Disable Cache标签下的Network选项（仅在DevTools打开时工作）或使用名为 Cache的更强大的Chrome扩展程序杀手。

Answer 2

您是否正在与服务人员谈论“Progressive Web App”？如果是这样，那么html文件可以（并且应该）在首次下载时缓存。您需要在客户端上进行某种积极的更新过程，以确保正确加载新文件。

也许有一个api调用检查服务器上的某种脏标志可以工作，如果它返回true，它应该重新加载模板文件。或者更复杂的东西，它从服务器获取一组脏文件，因此它知道哪些重新加载而不是加载所有内容。只是一些想法。

脱机第一Web应用程序中的缓存清除

2 个答案:

生产中

对于开发设置