localhost:3000 不呈现应用程序,旧的 PWA 名称仍然可见

问题描述

几周前,我使用 React 和一些 PWA 配置制作了一个 PWA(渐进式 Web 应用程序)。从那一刻起,当我尝试在 localhost:3000 上运行任何其他应用程序时,我为应用程序提供的名称仍然显示在顶部栏中。

PWA name

除此之外,在 localhost:3000 上运行应用程序很长时间没有问题,所以我没有打扰。但是从上周开始,当我尝试在端口 3000 上启动我的 React 应用程序 (yarn start) 时,我的应用程序将不再呈现。

我认为这可能与浏览器的缓存设置有关,所以我尝试在另一个浏览器中打开该应用程序,它突然起作用了。

edge

请注意,名称现在已改回“React App”而不是 PWA 名称。由于它适用于其他浏览器,我开始测试一些路由并尝试删除我通常使用的浏览器中的缓存。

我尝试向路由添加一些内容(例如:localhost:3000/test),这也将我重定向到正确的页面(来自正确的应用程序)。

other route

我的 PWA 是否在后台某处运行并导致问题,或者是否存在我设置不正确的浏览器配置?

解决方法

可能是缓存,不可能同时在同一个端口下运行两个应用程序(至少在默认情况下)。

您应该设置缓存不应在开发环境中工作以防止发生这种情况。

您可以在 Chrome 中尝试隐身或打开开发工具 => 右键单击​​刷新图标并选择“清空缓存和硬重新加载”。

还可以尝试在您的应用或浏览器开发工具中取消注册 Service Worker。

enter image description here