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

how to convert website into pwa
pwa builder
pwa template
microsoft pwa
pwa html template
best pwa builder
pwa platform
pwa manifest generator

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

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

How to publish a PWA on the Google Play store, Google Play store. Tagged with pwa, android, gatsby, react. And here's how the manifest file looks for my PWA - www.fpvtips.com. { "name":  Even if you can create an awesome PWA like the twitter one you were not allowed to publish it in Google Play. Before the latest Google Announcement there was only one choice, embed your PWA into a regular Android app using a web view or a Chrome custom tab.

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

Publishing a TWA to Google Play, This guide explains how you can deploy your PWA to the Google Play Store as a TWA (Trusted Web Activity). Publising a TWA gives your business the presence of an app on the Google Play Generate the Digital Asset Statement File. This blog post does not aim to make you familiar with PWAs or to sell you on the idea, but I’d like to take a paragraph to at least demystify the core idea of what we are talking about before we get into how you could actually publish such an application on the Google Play store. Tagged with pwa, android, gatsby, react.

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.

Publish a PWA (Progressive Web App) in the Google Play Store, Publish a PWA (Progressive Web App) in the Google Play Store able to provide a way for our PWA to make verifiable declarations that can flutter, Kotlin native, or react native applications from the performance viewpoint. It’s fully generated from the cloud, no need to install anything on your machine such as Android Studio and it’s ready to be published directly to the Play Store! Let me show how easy it is. In a couple of minutes, you will be able to submit your PWA to the Google Play Store.

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

How to Build a React Progressive Web Application (PWA), It is a web app but it feels like you are interacting with an Android/iOS app. In this post, we will learn how to build a PWA in React. Having a manifest.json is required by Chrome to add your PWA to Home screen. The  Well, traditionally the answer to this question was a no, but things had changed completely when Google updated the Chrome to version 72 which introduced TWA (Trusted Web Activities). TWA is an entirely new way to integrate the content of your web app with the Android app using a protocol based on Custom Tabs.

PWA to Google Play Store with Trusted Web Activities (TWA , A quickstart guide for using 🤝🤯 Trusted Web Activities (TWA) to deploy a progressive web app (PWA Duration: 7:08 Posted: Feb 22, 2019 Stack Overflow Public Browse other questions tagged android android-studio google-play apk progressive-web Is there a way to submit a reactjs PWA on Google

Make Your PWA Available on Google Play Store, 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  Now Google is open to PWA apps on Google Playstore,hence one could use tools like PWA2APK inorder to convert existing PWA's to Google Playstore ready Apps. The Android APK (PWApk) generated by the tool can be uploaded to Playstore.

From create-react-app to PWA, You can build an app that serves all devices and form factors once It can be accessible over the web but also surface on the home screen of your Android/iOS device. It will take care of generating a service worker file that will The good folks at Google are aware that writing your own PWA can be tricky  “Orwell saw, to his credit, that the act of falsifying reality is only secondarily a way of changing perceptions. It is, above all, a way of asserting power.”—The New Yorker In 1984, London is a grim city in the totalitarian state of Oceania where Big Brother is always watching you and the Thought Police can practically read your mind.

Comments
  • What's the issue with PWABuilder? Would you be so kind to open an issue on PWABuilder's GitHub repo? github.com/pwa-builder/PWABuilder/issues
  • Thank you for you answer Sergio. According your debugging advices with chrome I was able to understand that some resources were not found. Using create-react-app, there was a PUBLIC_URL unfilled. Browsers seems permissive to this error in the path resolution, but not android. After adding a file, that was all good!!
  • Here's one of my little PWA app (wrappers) on the Google Play store: play.google.com/store/apps/… and the actual PWA available at soccer.coachaide.com
  • Just tested your solution. The good point is the wrapping works well, however I loose the "offline" part: the application try to load the website every launch instead of keeping the data from an old launch until having uptodate data.
  • Are you absolutely sure your service worker caching is working correctly? If so, then make sure you've configured your WebView correctly (both webSettings.setDomStorageEnabled(true); and webSettings.setDatabaseEnabled(true); are needed for cache storage to work correctly. Finally make sure your index/launch page is cachable. If you install CoachAide as an app (with the wrapper), you'll see that offline mode works correctly.