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

Question

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

2.9k Views Asked by user1864070 At 21 October 2024 at 08:21

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 :)

Original Q&A

There are 4 best solutions below

Sergio Rinaudo On 01 January 2019 at 22:11

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

Connect your device with the application installed ( must be DEBUG version, not release )
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
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

Kalle On 03 January 2019 at 08:39

The simple answer is there's currently no way to directly add your PWA to the Google Play Store, Apple's iTunes or Microsoft's App Store. You can, however add your PWA directly to Amazon's App Store. For the rest of them, you have to first create a wrapper for it, then deploy the wrapper package to the store. Since you specifically asked about Google Play Store, you basically need two files (see below), plus a few supporting files, which will be automatically created for you when you create a new Android project in Android Studio (or similar environment). You need a main activity that launches your PWA starting URL, something like:

public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    WebView webView = (WebView) findViewById(R.id.webview);
    WebSettings webSettings = webView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webSettings.setDomStorageEnabled(true);
    webSettings.setDatabaseEnabled(true);
    webView.setWebViewClient(new WebViewClient() {
        @Override
        public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
            view.loadUrl("about:blank");
            Toast.makeText(MainActivity.this,
                    "Failed loading initial resources. Online access is needed when starting the app up for the first time. Close and try again with network connectivity", Toast.LENGTH_LONG).show();
            super.onReceivedError(view, request, error);
        }
    });
    webView.loadUrl(APPLICATION_URL);
}
}

You don't need a XML layout file (you could just create the WebView in code) but in case you prefer configuring options in xml, it'd be something like this:

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.mypackage.myapp.MainActivity"/>

Finally, you need the AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.mypackage.myapp">
<uses-permission android:name="android.permission.INTERNET"/>
<application
        android:allowBackup="true"
        android:icon="@mipmap/my_logo"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/my_logo"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
    <activity android:name=".MainActivity"
              android:configChanges="keyboardHidden|orientation|screenSize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN"/>
            <category android:name="android.intent.category.LAUNCHER"/>
        </intent-filter>
    </activity>
</application>
</manifest>

Then, you need Android build tools to create your package. If you've downloaded Android Studio, you are all set. The good thing is that, once you've published your wrapper app, you don't need to change it much but can focus on updating just your PWA.

For Microsoft App Store, the process is similar. You don't necessarily need Visual Studio. You can just use PWABuilder's package as a base, remove whatever you don't need and create an "app package upload file" with (Windows) command-line tools.

For iTunes, you need another wrapper and AFAIK, the only way to create one is with (Apple's) Xcode IDE.

prijesh bhingradiya On 06 February 2019 at 10:53

Yes there is way to publish your PWAs to PlayStore.

TWAs

Trusted Web Activities are a new way to integrate your web-app content such as your PWA with your Android app using a protocol based on Custom Tabs.

TWAs uses The Digital Asset Links protocol and API enable an app or website to make public, verifiable statements about other apps or websites. For example, a website can declare that it is associated with a specific Android app, or it can declare that it wants to share user credentials with another website.

Checkout the following link for complete guide to launch PWA to Appstore by Google Developers forum and tutorial guide on medium by Maximiliano Firtman here

**user1864070** · Accepted Answer

The problem was about the create-react-app PUBLIC_URL environment variable which was unfilled.

With a cordova run browser, all seems to be ok as browser seems to be more permissive in the path resolution. I had as example a /favicon.ico

But when i was doing cordova run android, path were not found at runtime.

By creating a new file .env and put in it:

PUBLIC_URL=.

resolved the path error and the application works now well!

The advice of Sergio running on device with chrome chrome://inspect helped me a lot

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

There are 4 best solutions below

TWAs

Related Questions in CORDOVA

Related Questions in GOOGLE-PLAY

Related Questions in CREATE-REACT-APP

Related Questions in PROGRESSIVE-WEB-APPS

Related Questions in PWABUILDER

Trending Questions

Popular # Hahtags

Popular Questions