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

我想使用"写一次，到处运行">

所以我用create-rect应用程序在reactjs中创建了一个PWA。

我的应用程序运行得很好，我可以从网站上把它放在手机的主屏幕上。然而，我也希望在移动商店中可见(从Google Play开始)。

我试过了：

Microsoft pwaBuilder似乎不起作用(下载的捆绑包无法被Google play识别)
在Cordova中打包我的应用程序(通过在www中复制reactjs构建的文件)，但我和其他人一样被白色屏幕卡住了(在应用商店上发布PWA：谷歌播放和ios itunes，reactjs与Cordova)

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

几个月前，我使用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>
<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浏览器中打开

希望它能帮助

问题是关于创建反应应用程序PUBLIC_URL环境变量，该变量未填充。

有了cordova run browser，一切似乎都很好，因为浏览器在路径解析方面似乎更宽容。我有一个/favicon.ico作为例子

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

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

PUBLIC_URL=.

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

Sergio在铬chrome://inspect设备上运行的建议帮助了我很多

简单的答案是，目前没有办法直接将您的PWA添加到Google Play Store、Apple的iTunes或Microsoft的App Store。但是，您可以直接将您的PWA添加到亚马逊的应用商店。对于其余部分，您必须首先为其创建一个包装器，然后将包装器包部署到存储中。由于您特别询问了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构建工具来创建你的包。如果你已经下载了安卓工作室，那么你已经做好了准备。好的一面是，一旦你发布了包装应用程序，你就不需要对它做太多更改，只需专注于更新你的PWA。

对于Microsoft App Store，过程类似。您不一定需要Visual Studio。您只需使用PWABuilder的包作为基础，删除不需要的内容，并使用(Windows)命令行工具创建"应用程序包上载文件"。

对于iTunes，你需要另一个包装器和AFAIK，创建一个的唯一方法是使用(苹果的)Xcode IDE。

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

TWAs

Trusted Web Activities是一种使用基于Custom Tabs的协议将Web应用程序内容(如PWA)与Android应用程序集成的新方法

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

请点击以下链接，获取谷歌开发者论坛向应用商店推出PWA的完整指南和Maximiliano Firtman的介质教程指南

TWAs

相关内容

最新更新

热门标签：