javascript - PWA 应用程序，移动 Chrome，强制重新加载 js 缓存文件

Question

我有 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 或 chunkhash 来使用 Webpack 生成文件名:

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

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

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

Answer 1

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;
                    }
                };
            };
        })
}