Breaking Change: No Longer Reloading Pages on Network Change
MetaMask has come a long way since we first launched two years ago. Back then, it took a lot of our energy just to convince web developers to even try developing for a browser-provided web API, let alone to stop storing user keys in their own site storage.
Back then, there were few tutorials, and very little developer expertise about how this platform operated, and so MetaMask did some things to make it easier for developers to make sites that wouldn’t mess up. One of these features has been the way that MetaMask would reload any page that had touched the web3 API whenever the user changed the network.
However, times have changed: Web3 apps have matured significantly, and have begun providing increasingly beautiful user experiences. This also caused extra network activity for inactive tabs, and also was incompatible with our eventual plans for allowing different tabs to connect to different networks. You can read more about our reasoning here. Forcing a reload on these carefully crafted websites is an insult to their competence, and so at MetaMask, we’re finally removing those training wheels, and we will no longer be reloading apps when the user changes the current network.
What This Means for Dapps
This means that if your web3-enabled website requires a certain network, you should continuously monitor the user’s network to ensure it’s the network you require, or inform the user to change the network.
To monitor the user’s current selected network, for now you’ll have to poll, the way you do for selected accounts. We absolutely plan to support subscribing to these updates in the near future, please forgive us for the need to poll again. We do cache this value locally, so rest assured this is not making any network round trips:
var desiredNetwork = "1"setInterval(function () { web3.version.getNetwork(checkNetwork)
}, 1000)function checkNetwork (err, currentNetwork) { if (err) throw err // Please handle errors responsibly.
if (currentNetwork !== desiredNetwork) {
notifyUserToSwitchNetwork()
} else {
// Go about your business!
}
}
By including a snippet like this in your project, you’ll be able to curate your user’s experience much more seamlessly within your site.
As always, if you have any feedback or questions, you can leave them on this article, open a Github issue, or contact our support team.
Happy developing!
