Service Worker 在 React 应用程序中刷新后导致空白页

Posted 2023-04-18

【中文标题】Service Worker 在 React 应用程序中刷新后导致空白页

【英文标题】：Service Worker Causing a Blank Page After Refresh in React Application

【发布时间】：2018-03-12 01:40:40

【问题描述】：

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

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

整个 ServiceWorker 实现从 create-react-app 开箱即用。我花了几个小时试图在 react-boilerplate 和 create-react-app 存储库下的各种 GitHub 问题中跟踪这个错误，但它们都没有真正超出限制页面缓存的任何地方，我试图这样做无济于事与：

索引.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"/>

您可以在the repo that hosts all of this code.找到您对任何代码有疑问的任何代码

我只是对 React/Node 有点摸不着头脑，所以我陷入了困境，不知道如何在不完全删除 ServiceWorker 注册的情况下解决这个问题。

编辑：我从 index.js 文件中完全删除了 ServiceWorker 代码，并且现在重新加载瞄准器没有任何问题。我需要完成一个步骤来让 ServiceWorker 从缓存中正确重新加载页面吗？

【问题讨论】：

您终于找到解决方案了吗？我面临着类似的问题：/

【参考方案1】：

如果其他人像我一样发现这个问题，答案是禁用服务工作者文件（对我来说是 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);
    );

【参考方案2】：

对于与我使用 react 和 react-router-dom 的单页应用程序有相同问题的任何人，在调用 window.location.reload()（在 android One Plus 上）后，我安装的应用程序上只有一个空白页，因为我是没有从我的路由 '/user' 重定向到我的服务器上的主目录 '/' 或 '/index.html'

如果您有单页应用程序，请查看此 awnser 以了解修复它的不同方法：https://***.com/a/36623117/17434198