I am testing my Gatsby site and I have found a series of actions that cause it to hang in the browser. By "hang up" I mean the browser is trying to load the site, the screen is blank, and the progress bar reaches about 75% and stops.
I am using gatsby-plugin-offline and I suspect that it is a problem with the service worker, however, it is difficult to know for sure.
I've only been able to play this blocking behavior on Android using Chrome. Chrome on the desktop has no problem or Firefox on Android. I think it has something to do with the way Chrome is resumed.
steps to play
- Open chrome
- Navigate to the site directly by typing url
- Kill chrome
- Reopen chrome
When I re-open Chrome, try to reload the site since it was open when I deleted the application and this is where it hangs.
If I wait long enough (about 5 minutes), the site stops trying to load but the screen is still blank. It seems that it reaches some kind of time outside. At this point, I can see the console through the remote debugging tools in Chrome on my desktop. Before this point, while it is still hanging, I can connect to the phone with the remote debugger, but no browser has been detected, which partly explains why this has been so difficult. When I look at the console in the remote debugger, it shows that some resources could not be loaded. They are not always the same ones that fail, however, some common ones include the following:
All four of these elements are in the cache, as well as present in their respective host. The first three elements are configured as pre-boot elements for WorkBox.
Final notes: There is nothing in the network tab of the debugger, only what I mentioned earlier from the console. If I update the site while it is uploaded, or at any time, it works. Update always works, only when Chrome opens for the first time, the site crashes.
Really strange things.