Search code examples
reactjsgoogle-chrome-devtoolsservice-workercreate-react-appprogressive-web-apps

React PWA fails to reload in Chrome Dev Tools


I try to create PWA via create-react-app.

React: 16.8.4

React-Scripts: 2.1.8

Chrome: 72.0.3626.121

The minimum setup to reproduce this is:

Edit src/index.jsand change serviceWorker.unRegister() to serviceWorker.register().

Create a production build and serve the app

npm run build && serve -s build

Browse to http://localhost:5000 and see my app.

When I enter offline mode (stop the server or select offline in the Network tab) and hit reload, the browser loads the app, obviously via the service worker.

When I open Chrome dev tools and hit reload while being offline, the browser shows me ERR_INTERNET_DISCONNECTED, the service worker is not doing anything in debug mode.

In Firefox, the app works offline both normal and in the Firefox debugger.

What can I do to debug a service worker in Chrome?


Solution

  • Turns out that I had checked Bypass for Network in the Application tab. In that case any request goes directly to the network which renders the service worker useless.