React Service Worker + Web3 + Android = (╯°□°)╯︵ ┻━┻
Developers beware: If you are building out your DApp using Create React App watch out for the React Service Worker!
Two months after #ETHDenver, Cryptogs was ready for a full production launch. I tested it on every device I could get my hands on and it was working great. Metamask, Cipher, Toshi, and Trust all looked good… it was time to reach out and get listed.
I got a quick response from Sid at Toshi with feedback: My app wasn’t picking up the injected web3 on his phone. :(
I quickly went through all my devices on all my platforms and it was looking great. Then, I pulled out an old Android phone from a friend and sure enough. No web3. WTF!
To add to my confusion, the game worked fine on stage. At first I thought it was a problem with CloudFront, SSL, Web3, and Android. But after securing my stage environment, it still worked. I had to dig deeper…
I wanted to simplify the problem down to the bare essentials. Starting with the production environment: Cloudfront, SSL, webserver, bundled js, etc…
I decided to create a little open source repo and host it at: https://web3.wtf
Sure enough, this site will reproduce the problem; visit it with an iphone or from the desktop and you will see web3 connectivity. If you hit it from an old android phone it might work for the first load, but after a reload or two, poof.
After a ton of troubleshooting, what I found was my backend never received any requests from the frontend on the old Android phone. Something was causing it to run in “offline” mode and not detect to the injected web3. In fact, I could shutdown the machine hosting my frontend and the game would still come up in Toshi, Cipher, or Trust Wallet… but without web3.
I love CRA but the React Service Worker is a total Jabronie for DApps!
If you are using Create React App and you have problems with detecting the injected web3, try commenting out your ServiceWorker stuff in the index.js:
After I deployed the above code to production, it was smooth sailing and now people from all over the world are throwing Slammers and collecting decentralized pogs!
