Search code examples
reactjscachingbrowserlocalhostprogressive-web-apps

localhost:3000 not rendering app, old PWA name still visible

I made a PWA (progressive web app) a few weeks ago with React and some PWA configuration. From that moment, the name I gave the app still displays in the top bar when I try to run any other app on localhost:3000.

PWA name

Apart from this, there were no issues with running applications on localhost:3000 for a long time, so it didn't bother me. But since last week, when I tried starting my React app (yarn start) on port 3000, my app won't render anymore.

I figured it might have something to do with the browser's cache settings, so I tried opening the app in another browser and it suddenly worked.

edge

Notice that the name has now changed back to "React App" instead of the PWA name. Since it worked on the other browser I started testing some routes and tried to delete my cache in the browsers I normally use.

I tried adding something to the route (for example: localhost:3000/test) and this also redirected me to the right page (from the right application).

other route

Is my PWA running somewhere in the background and causing issues or is there some browser configuration I am not setting right?

Solution

  • It is probably cache, it's not possible to run two apps under same port at the same time (at least by default).

    You should have set that cache shouldn't work on dev environment to prevent that happening.

    You can try incognito or open dev tools in Chrome => right click on refresh icon and select "Empty cache and hard reload".

    Also try unregistering service worker in your app or in browser dev tools.

    enter image description here