Question

我要使用“写一次，到处运行”

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

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

我尝试过：

微软pwaBuilder似乎无效（下载的游戏包无法被Google Play识别）
在Cordova中打包我的应用程序（通过复制在www中构建的reactjs文件），但是我像其他人一样{{3}，{3}}陷入白屏

今天有没有办法在商店上部署reactjs PWA应用程序？那将实现我关于渐进式Web应用程序的伟大梦想：）

Answer 1

几个月前，我已经使用Cordova / Phonegap开发了一个小型的ReactJS应用程序，该应用程序实际上可以正常工作，所以我认为您会错过一些细节以便使您的应用程序正常工作。

首先，您是否在启动ReactJS之前等待了deviceready事件？您的入口点应该是这样的（代码已经很老了，我在一个旧的AngularJS应用程序中使用了它，并对其进行了修改，以引导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版本，未发布）
打开Chrome控制台，然后在最后一个标签附近，您会看到一个单击三个垂直点图标，然后选择“更多工具”，然后 “远程设备”，您应该会看到列出的已连接设备。选择它
在列表中找到您的应用程序，然后单击“检查”按钮，此时，您要在Chrome浏览器中打开应用程序。

希望有帮助

Answer 2

一个简单的答案是，目前尚无办法直接将您的PWA添加到Google Play商店，Apple的iTunes或Microsoft的App Store中。但是，您可以将PWA直接添加到Amazon的App Store中。对于它们的其余部分，您必须首先为其创建包装器，然后将包装器包部署到商店。由于您是专门询问Google Play商店的，因此您基本上需要两个文件（见下文）以及一些支持文件，当您在Android Studio（或类似环境）中创建新的Android项目时，这些文件会自动为您创建。您需要一个主要活动来启动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://inspect的设备上运行的建议对我有很大帮助

Answer 4

是的，有一种方法可以将您的 PWA 发布到PlayStore。

TWAs

受信任的网络活动是一种新方法，可使用基于“自定义标签”的协议将Web应用程序内容（例如PWA）与Android应用程序集成。

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

请查看以下link，以获取由Google Developers论坛启动PWA到Appstore的完整指南，以及Maximiliano Firtman here

的媒体教程指南。

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

4 个答案:

TWAs