2

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

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

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

我试过：

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

4

4 回答 4

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 可以访问控制台以查看应用程序中发生的情况，只需按照以下步骤操作

  1. 将您的设备与已安装的应用程序连接起来（必须是 DEBUG 版本，而不是发布版本）
  2. 打开 Chrome 控制台，在最后一个选项卡附近，您应该会看到一个三个垂直点图标，单击它并选择“更多工具”，然后选择“远程设备”，您应该会看到已连接的设备已列出。选择它
  3. 在列表中找到您的应用程序并单击“检查”按钮，此时您应该在 Chrome 浏览器中打开您的应用程序。

希望能帮助到你

于 2019-01-01T22:11:51.510 回答
1

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

使用 a cordova run browser，一切似乎都很好，因为浏览器似乎在路径分辨率方面更加宽容。我有一个例子/favicon.ico

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

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

PUBLIC_URL=.

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

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

于 2019-01-11T10:54:51.793 回答
0

简单的答案是，目前无法直接将 PWA 添加到 Google Play Store、Apple 的 iTunes 或 Microsoft 的 App Store。但是，您可以将 PWA 直接添加到 Amazon 的 App Store。对于其余的，您必须首先为其创建一个包装器，然后将包装器包部署到商店。由于您专门询问了 Google Play Store，因此您基本上需要两个文件（见下文），加上一些支持文件，当您在 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 的包作为基础，删除您不需要的任何内容，然后使用 (Windows) 命令行工具创建一个“应用程序包上传文件”。

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

于 2019-01-03T08:39:54.300 回答
0

是的，有办法将你的PWA发布到 PlayStore。

TWA

受信任的 Web 活动是一种使用基于自定义选项卡的协议将您的 Web 应用程序内容（例如 PWA）与您的 Android 应用程序集成的新方法。

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

查看以下链接以获取 Google Developers 论坛发布 PWA 到 Appstore 的完整指南和 Maximiliano Firtman在此处发布的媒体教程指南

于 2019-02-06T10:53:25.763 回答