服务工作者在React应用程序中刷新后导致空白页

Question

我有一个部署到Azure的Node应用程序，其中一个测试分支通向一个临时实例，一个master分支指向prod部署。我的应用程序在本地应用程序的所有实例上都能正常工作，但是生产和暂存存在以下问题：如果它们已经被缓存，则无法加载，并且在刷新后将显示为空白，最后在重置缓存后可以正常工作。

每当我在生产环境中刷新页面时，它都是空白。服务工作者正在运行（我可以在chrome serviceworkers-internal工具中看到它），但是该页面从未加载。生成的文件引用正确。您可以在此处看到发生了什么事的示例：Live Site，然后还可以看到测试站点，该站点也因部署了完全相同的代码而失败：Test Site。

整个ServiceWorker实现都是开箱即用的create-react-app。我花了几个小时试图在react-boilerplate和create-react-app存储库下的各种GitHub问题中跟踪此错误，但除了限制页面缓存外，它们都没有真正发挥作用，而我尝试这样做毫无用处与：

Index.html

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>

您可以在托管所有这些代码的存储库中找到对任何代码有疑问的任何代码。

我只是想用React / Node弄湿我的脚，所以我陷入困境，在不完全取消ServiceWorker注册的情况下，真不知道如何解决这个问题。

编辑：我从index.js文件中完全删除了ServiceWorker代码，现在重新加载视域而没有任何问题。我需要完成一个步骤来使ServiceWorker从缓存或其他内容正确地重新加载页面吗？

Answer 1

如果其他人像我一样发现这个问题，答案是禁用 Service Worker 文件（对我来说是 service-worker.js）和 index.html 上的浏览​​器缓存，并永久缓存其余部分。

当进行更改时，旧版本的应用程序将继续运行，并且在启动时它会检测到有新版本。如果像我一样，您不缓存静态资源，那么当它尝试获取旧版本时，它会收到 404 错误，导致空白页面。如果您第二次刷新，它将获取该应用程序的新版本。

我通过修改registerServiceWorker.js添加了一些代码，以便在 5 秒后自动重新加载

function registerValidSW(swUrl) {
console.debug('Registering serviceWorker URL [' + swUrl + ']');
navigator.serviceWorker
    .register(swUrl)
    .then(registration => {
        registration.onupdatefound = () => {
            const installingWorker = registration.installing;
            installingWorker.onstatechange = () => {
                if (installingWorker.state === 'installed') {
                    if (navigator.serviceWorker.controller) {
                        // At this point, the old content will have been purged and
                        // the fresh content will have been added to the cache.
                        // It's the perfect time to display a "New content is
                        // available; please refresh." message in your web app.
                        reportInfo('App has been updated. This page will refresh in 5 seconds.');
                        setInterval(()=>window.location.reload(), 5000);
                    } else {
                        // At this point, everything has been precached.
                        // It's the perfect time to display a
                        // "Content is cached for offline use." message.
                        reportInfo('App is cached for offline use.');
                    }
                }
            };
        };
    })
    .catch(error => {
        reportError('Error during service worker registration:', error);
    });

}