Is there a way to submit a reactjs PWA on Google P

2019-04-16 06:09发布

站内问答 / 前端开发
487 4 5

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:

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

4条回答
一纸荒年 Trace。
2楼-- · 2019-04-16 06:37

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

查看更多
0人赞 添加讨论(0) 举报
Emotional °昔
3楼-- · 2019-04-16 06:46

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

查看更多
0人赞 添加讨论(0) 举报
【Aperson】
4楼-- · 2019-04-16 06:48

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

查看更多
0人赞 添加讨论(0) 举报
我命由我不由天
5楼-- · 2019-04-16 06:52

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)