Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to submit a reactjs PWA on Google Play?

I want to use the "Write once, run everywhere"

So I created a PWA in reactjs with create-react-app.

My app works greatly, and I can put it on the home screen of my mobile from the website. However, I want to be visible on mobile stores too (starting with Google Play).

I tried:

  • Microsoft pwaBuilder which doesn't seems to work (the downloaded bundle is not recognized by Google play)
  • Packaging my app in Cordova (by copying files of the reactjs build in www) but I'm stuck with a white screen like some other people (publishing PWA on app stores : google play and ios itunes, Reactjs with cordova)

Is there a way today to deploy a reactjs PWA app on a store? That would realize my great dream about progressive web apps :)

like image 495
user1864070 Avatar asked Sep 06 '25 13:09

user1864070


1 Answers

months ago I've developed a small ReactJS application using Cordova/Phonegap that actually works so I think you miss a couple of details in order to make your application works.

First, did you wait the deviceready event before to bootstrap ReactJS? Your entry point should be something like this ( code is quite old, I used it in an old AngularJS application and adapted it just to bootstrap ReactJS )

var appName = 'myApp';

var PhoneGapInit = function (appName) {
  this.boot = function (appName) {
    ReactDOM.render(
        <Router>
          <Route exact path="*" component={ApplicationAsync} />
        </Router>,
        document.getElementById('root')
      );
  };

  if (window.cordova !== undefined) {
    // "Found Cordova";
    var self = this;
    document.addEventListener('deviceready', function() {
      self.boot(appName);
    }, false);

    return;
  }

  // 'PhoneGap not found, booting manually';
  this.boot(appName);
};

window.addEventListener('load', () => {
  new PhoneGapInit(appName);
});

Second, using Webpack I've found necessary to use this webpack plugin to have cordova object available, https://github.com/markmarijnissen/webpack-cordova-plugin ( everything is explained there )

Moreover your index.html should contain a body tag like this

<body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <script type="text/javascript" src="cordova.js"></script>
</body>

The first step should be enough to have your application running.

Also, it is important to know that using Chrome it is possible to access the console to see what is happening in the application, just follow these steps

  1. Connect your device with the application installed ( must be DEBUG version, not release )
  2. Open the Chrome console and near the last tab you should see a three vertical dots icon, click it and select 'more tools', then 'remote devices', you should see your connected device listed. Select it
  3. Find your application in the list and click the 'inspect' button, at this point you shold have your application opened also in Chrome browser.

Hope it helps

like image 181
Sergio Rinaudo Avatar answered Sep 10 '25 00:09

Sergio Rinaudo