PWA 应用、移动 Chrome、强制重新加载 js 缓存文件答案

【问题标题】：PWA app, mobile Chrome, force reload js cached filesPWA 应用、移动 Chrome、强制重新加载 js 缓存文件
【发布时间】：2018-07-28 10:10:38
【问题描述】：

我有 PWA 应用程序，我在其中使用 Webpack 呈现 js 文件：

{% render_bundle 'app' 'js' %}

在移动 Chrome 中启动 PWA 应用程序后，文件未更新。 Chrome 很可能使用缓存版本。

我尝试删除 PWA 应用并重新安装，但没有帮助。

之后我手动清除了移动 Chrome 缓存并刷新了文件，但是，大多数用户不会这样做，所以我需要另一个不需要最终用户执行任何操作的解决方案。

类似question的回答建议在js文件中添加参数或版本号。

<script type="text/javascript" src="myfile.js?REVISION"></script>

但是，我不清楚如何使用 Webpack 做到这一点？

一位更受欢迎的answer 解释说我可以使用hash 或chunhash 来使用Webpack 生成文件名：

output: {
    path: '/',
    filename: '[hash].js',
    chunkFilename: '[chunkhash].js',
},

此解决方案对我不起作用，因为每次文件中有一些更改时，我都无法更改文件名。文件名应该保持不变，因为我使用的是 django 的 collectfast 应用程序。它检查静态文件的 md5sum 并仅更新那些已更改的文件。

静态 js 文件的名称应该保持不变。同时，我需要强制移动 Chrome 更新更改文件的机制。

【问题讨论】：

你遇到了什么错误？
@abielita 错误是当我将新的 js 文件上传到服务器时，该文件未在移动设备的 PWA 应用程序中更新。
如果您的应用程序由于多个公共模块而确实使用了多个块如果它们的内容发生变化，您不希望它们在每次构建时都更新（应该确保通过使用块哈希）？请确认chunkhash 在构建期间不会（不）更改。我不熟悉这些配置，但我的印象是 chunkhash 不应该在没有代码更改的情况下更改。如果它在没有代码更改的情况下发生更改，则可能表明另一个问题。请在您的问题中添加此类意见。更多的配置也可能会有所帮助。
类似的问答你可能会从中获得灵感（不确定是否重复）：stackoverflow.com/questions/42829865/…
@try-catch-终于是的，好点。当它们被更改时，我真的在更新它们，但同时我不想更新它们的名称。原因是我使用的是内部解决方案（没有 webpack），它为每个文件计算 md5sum。然后将文件的名称用作标识符，并且应保持不变。

标签： javascript google-chrome webpack progressive-web-apps

【解决方案1】：

我在这里尝试用 Svelte PWA 代码做同样的事情： https://github.com/kuhlaid/svelte2/releases/tag/v0.1.6

我求助于运行应用程序构建过程，然后使用“replace-in-file”插件（请参阅 rollup.config.js 脚本）。如果您在源代码中搜索“__cVersion__”，您将看到我在哪里添加文件修订字符串以尝试强制更新文件缓存（不是本地存储）。

PWA 需要做的另一件事是确保我们清除用户浏览器中的 CacheStorage，如果您正在构建您的服务，使用 Workbox 之类的东西在服务工作者中预缓存文件。这是您在构建过程中无法执行的操作，因为清除 CacheStorage 的代码需要在浏览器中访问应用程序时运行。要清除此缓存，您可以在应用程序的 javascript 中插入以下内容：

const l = console.log    
if ('caches' in window) {
  l('CacheStorage is present for this app');
  caches.keys().then(function(cacheArray) {
    l(cacheArray); // just print the list of CacheStorage names to the console
    // for each cache, try and delete it
    cacheArray.forEach(function(cache) {
      caches.delete(cache).then((bool) => {
        l('deleted cache: '+cache); // print the successful deletion to console
      }).catch((err) => {l(err)});
    });
  });
}

这一切都很好，但这引出了下一个问题，即如何只为新的代码构建/更新执行一次？好吧，可能一个“代码版本”变量可以添加到您的 javascript 中，例如：

const codeVersion = __cVersion__;

然后在构建/汇总代码期间，您可以将 __cVersion__ 动态替换为新版本字符串（例如 v0.112），并将此 codeVersion 值存储到应用程序的 localStorage。然后每次构建时，您将首先检查 localStorage 是否有版本字符串的更改，如果它已更改，则运行代码以删除应用程序的 CacheStorage（如上所述）。我的 PWA 代码的这个版本处理了这些情况： https://github.com/kuhlaid/svelte2/releases/tag/v0.1.7

为最终用户自动清除缓存是 PWA（或任何应用程序）的复杂性之一，开发人员应事先了解这一点。没有人喜欢开发人员告诉您每次推送代码更新时您都需要手动清除浏览器缓存的应用程序。

【讨论】：

【解决方案2】：

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js')
        .then(reg => {
            reg.onupdatefound = () => {
                const installingWorker = reg.installing;
                installingWorker.onstatechange = () => {
                    switch (installingWorker.state) {
                        case 'installed':
                            if (navigator.serviceWorker.controller) {
                                // new update available
                                setTimeout(() => document.location.reload(true), 1000);
                                caches.keys().then(keys => {
                                    keys.forEach(key => caches.delete(key));
                                })
                            }
                            break;
                    }
                };
            };
        })
}

【讨论】：

【解决方案3】：

您可以尝试将其中之一放入您的 html 中，这将强制缓存过期。

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

【讨论】：