I have a React app https://codesandbox.io/p/sandbox/q6l8jp that uses the react-use-is-online npm package to check online and offline status. The package works perfectly, displaying appropriate messages for online and offline states. However, when I try to reload my browser while offline, my app fails to render and shows the browser’s default “no internet” page instead.
I would like to load my app and display a custom error message even when there is no internet connection. For example, YouTube continues to render its app even when offline. How can I achieve this?
2
enter image description here
[1]: https://i.sstatic.net/AJPlEDe8.png
I tried to load https://www.youtube.com/ in an offline state, and saw that it was a static resource returned via service worker, which means that offline caching was done, I guess, to give the user a better experience, which should belong to the pwa level.
Your website is able to display customized information during normal use with the network turned off, because the required resources have already been downloaded and the logic is executing normally.
If you try to refresh your website with the network closed, and request resources without offline caching and disconnected from the network, it’s impossible to request any content, let alone execute your judgment logic!