有没有办法在 Google Play 上提交 reactjs PWA？

Question

我想使用 "Write once, run everywhere"

所以我用 create-react-app 在 reactjs 中创建了一个 PWA。

我的应用程序非常好用，我可以将它从网站放到手机的主屏幕上。但是，我也希望在移动商店中可见（从 Google Play 开始）。

我试过了：

Microsoft pwaBuilder 似乎不起作用（Google play 无法识别下载的包）
在 Cordova 中打包我的应用程序（通过复制 www 中构建的 reactjs 文件）但我像其他人一样被白屏困住了 (, Reactjs with cordova)

今天有没有办法在商店中部署 reactjs PWA 应用程序？那将实现我关于渐进式网络应用程序的伟大梦想:)

Answer 1

几个月前，我使用 Cordova/Phonegap 开发了一个小型 ReactJS 应用程序，它确实有效，所以我认为您错过了一些细节以使您的应用程序正常工作。

首先，你在 bootstrap ReactJS 之前是否等待过 deviceready 事件？你的入口点应该是这样的（代码很旧，我在一个旧的 AngularJS 应用程序中使用它并将它调整为 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);
});

其次，使用 Webpack 我发现有必要使用这个 webpack 插件来获得可用的 cordova 对象，https://github.com/markmarijnissen/webpack-cordova-plugin（那里解释了一切）

此外，您的 index.html 应该包含这样的 body 标签

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

第一步应该足以让您的应用程序运行。

此外，重要的是要知道使用 Chrome 可以访问控制台以查看应用程序中发生的情况，只需按照以下步骤操作

将您的设备与安装的应用程序连接（必须 DEBUG 版本，不是 release )
打开 Chrome 控制台，在最后一个选项卡附近您应该会看到一个三个垂直点图标，单击它和 select 'more tools'，然后 'remote devices'，您应该会看到已连接的设备已列出。 Select 它
在列表中找到您的应用程序并单击 'inspect' 按钮，此时，您还应该在 Chrome 浏览器中打开您的应用程序。

希望对您有所帮助

Answer 2

简单的答案是目前无法直接将您的 PWA 添加到 Google Play Store、Apple 的 iTunes 或 Microsoft 的 App Store。但是，您可以将 PWA 直接添加到亚马逊的 App Store。对于其余的，您必须先为其创建一个包装器，然后将包装器包部署到商店。由于您专门询问了 Google Play Store，您基本上需要两个文件（见下文），以及一些支持文件，当您在 Android 工作室（或类似环境）。你需要一个主要的 activity 来启动你的 PWA 从 URL 开始，比如：

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);
}
}

您不需要 XML 布局文件（您可以只在代码中创建 WebView），但如果您更喜欢在 xml 中配置选项，它会像这样：

<?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"/>

最后，你需要 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>

然后，您需要 Android 构建工具来创建您的程序包。如果您已经下载 Android Studio，那么一切就绪。好处是，一旦您发布了包装器应用程序，您就不需要对其进行太多更改，而可以专注于更新您的 PWA。

对于Microsoft App Store，过程类似。您不一定需要 Visual Studio。你可以只使用 PWABuilder 的包作为基础，删除你不需要的任何东西和 create an "app package upload file" with (Windows) command-line tools.

对于 iTunes，您需要另一个包装器和 AFAIK，创建包装器的唯一方法是使用（Apple 的）Xcode IDE.

Answer 3

问题是关于未填充的 create-react-app PUBLIC_URL 环境变量。

对于 cordova run browser，一切似乎都没有问题，因为浏览器似乎在路径解析方面更为宽松。我以 /favicon.ico

为例

但是当我做 cordova run android 时，在运行时找不到路径。

通过创建一个新文件.env并放入其中：

PUBLIC_URL=.

解决了路径错误，现在应用程序运行良好！

Sergio 运行在 chrome chrome://inspect 设备上的建议对我帮助很大

Answer 4

是的，可以将您的 PWA 发布到 PlayStore。

TWAs

Trusted Web Activities 是一种使用基于自定义选项卡的协议将 PWA 等网络应用程序内容与 Android 应用程序集成的新方法。

TWA 使用 数字资产链接协议 和 API 使应用程序或网站能够对其他应用程序或网站做出 public 可验证的声明。例如，一个网站可以声明它与特定的 Android 应用相关联，或者它可以声明它想要与另一个网站共享用户凭据。

查看以下 link for complete guide to launch PWA to Appstore by Google Developers forum and tutorial guide on medium by Maximiliano Firtman here

有没有办法在 Google Play 上提交 reactjs PWA？

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

google-play

cordova

progressive-web-apps

create-react-app

pwabuilder

TWAs