Why does chrome detect a react app and ask to download it

Question

I didn't notice it before but recently when working on react apps and testing, my chrome browser just recently started asking me if i wanted to download the site normally it does the same for web apps like youtube, spotify etc but it never did it for my react app before so i'm curious to know whether something changed in react that made it app, and what makes it different from other websites.

i always wanted to make something like that but the only resources i saw of web apps are using electron. but this worked without me using any electron so i just wanted to know exactly why it just started happening

Answer 1

Modern browsers offer the installation option for PWAs (Progressive Web Applications). PWAs are web apps that follow a set of guidelines that allow the browser to treat them like installable apps, and have some nice extra features, like offline-mode etc.

To convert a web app into a installable PWA, the app needs to fulfill some requirements, like having a manifest with the icons and display mode, a service worker and so on. You can learn more about making a PWA installable here. Most modern UI frameworks like React (and their metaframeworks, like Next) try to have the installable functionality out of the box; That's why if you start a new project with a modern version of a modern framework, you're most likely to have this behavior.

Its still useful to read the files involved on the process so you can customize the experience and get the best out of the available functionalities.

If you want to know how well your app is scoring as a PWA (or want to know what requirements is missing if you want to add this to an old project), you can use Googles Lighthouse which is built into Chrome. Just open the developer tools with F12, go to the Lighthouse tab and click on "analyse"

You will see a report like this, which will tell you, among other things, how your app scores as a PWA, and wether is installable (and optimized for) or not

Example of site that does not fullfil the requirements Example of site that does