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

You can define chrome by adding /*global chrome*/ in the top of the file.

For Example

    /*global chrome*/
import React, { Component } from 'react';
import './App.css';

    class App extends Component {
        componentWillMount() {
            chrome.storage.local.set({ 'data' : 'Your data'}, function(result) {
                console.log(" Data saved ")
            });
        }

        render() {
            return (
              <div className="App">
              </div>
            );
        }
    }

    export default App;