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:

Notice on line 7 and 8 I even go so far as to “unregister()” to make sure to kill the beast.

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!

Image for post
Image for post

Sign up for Coinmonks

By Coinmonks

A newsletter that brings you week's best crypto and blockchain stories and trending news directly in your inbox, by CoinCodeCap.com Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Austin Thomas Griffith

Written by

http://austingriffith.com

Coinmonks

Coinmonks

Coinmonks is a non-profit Crypto educational publication. Follow us on Twitter @coinmonks Our other project — https://coincodecap.com

Austin Thomas Griffith

Written by

http://austingriffith.com

Coinmonks

Coinmonks

Coinmonks is a non-profit Crypto educational publication. Follow us on Twitter @coinmonks Our other project — https://coincodecap.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store