I'm currently learning different building blocks of blockchain and the different services, applications that currently exist. In a lot of wallet applications, I've seen them implement a DApp Browser, which lets their mobile app directly communicate with the DApp without the need to leave their application.
I understand how they show DApps on their homepage, but the main doubts I have are surrounding how the application communicates with the browser.
I've been going through Metamask's mobile application github repository to understand the flow. They included a diagram too on how the architecture but it has been overwhelming to jump into for the most part. Although I've got a bit of an idea of the flow, the main question of how the browser and application interacts is still not clear.
If there's any article, or if you have an idea I'd appreciate the help.
The Metamask documentation can be found here: https://docs.metamask.io/
Frequently, a wrapper is used, such as onboard.js (https://docs.blocknative.com/onboard) or web3modal (https://web3modal.com/), which allows for non-injected wallets to be connected. Personally, I prefer the UI of onboard.js, but plenty of people use both. I highly recommend you use one of them.
Finally, typically one doesn't interact with the
window.ethereumprovider directly. A library such as ethers.js (https://docs.ethers.io/v5/) or web3.js (https://web3js.readthedocs.io/en/v1.7.4/) makes writing DApps a lot easier. I personally prefer ethers.js as it is more strongly typed, but again, both are very commonly used.