Cordova 有没有办法在Google Play上提交reactjs PWA？_Cordova_Google Play_Create React App_Progressive Web Apps_Pwabuilder

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

cordova

Cordova 有没有办法在Google Play上提交reactjs PWA？,cordova,google-play,create-react-app,progressive-web-apps,pwabuilder,Cordova,Google Play,Create React App,Progressive Web Apps,Pwabuilder,我想用“写一次，到处跑” 所以我用createreact应用程序在reactjs中创建了一个PWA 我的应用非常有效，我可以从网站上把它放在我手机的主屏幕上。然而，我也希望在移动商店中可见（从Google Play开始）我试过：微软似乎不起作用（谷歌play无法识别下载的捆绑包）在Cordova中打包我的应用程序（通过在www中复制reactjs构建的文件），但我像其他人一样被白色屏幕困住了（，）现在有没有办法在商店中部署reactjs PWA应用程序？这将实现我关于渐进式web

我想用“写一次，到处跑”

所以我用createreact应用程序在reactjs中创建了一个PWA

我的应用非常有效，我可以从网站上把它放在我手机的主屏幕上。然而，我也希望在移动商店中可见（从Google Play开始）

我试过：

微软似乎不起作用（谷歌play无法识别下载的捆绑包）
在Cordova中打包我的应用程序（通过在www中复制reactjs构建的文件），但我像其他人一样被白色屏幕困住了（，）

现在有没有办法在商店中部署reactjs PWA应用程序？

这将实现我关于渐进式web应用程序的伟大梦想：）

几个月前，我使用Cordova/Phonegap开发了一个小的ReactJS应用程序，它实际上可以工作，因此我认为为了让应用程序工作，您错过了一些细节

首先，您是否在引导之前等待了deviceready事件？您的入口点应该是这样的（代码非常旧，我在一个旧的AngularJS应用程序中使用了它，并对其进行了调整，以适应bootstrap ReactJS）

var-appName='myApp'；
var PhoneGapInit=函数（appName）{
this.boot=函数（appName）{
ReactDOM.render(
,
document.getElementById（'root'））
);
};
if（window.cordova！==未定义）{
//“发现科尔多瓦”；
var self=这个；
document.addEventListener（'deviceready'，function（）{
self.boot（appName）；
}，假）；
返回；
}
//'找不到PhoneGap，正在手动引导'；
this.boot（appName）；
};
window.addEventListener（'load'，（）=>{
新PhoneGapInit（appName）；
});

第二，使用Webpack我发现有必要使用这个Webpack插件来提供cordova对象（这里解释了一切）

此外，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>


您需要启用JavaScript才能运行此应用程序。

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

另外，重要的是要知道，使用Chrome可以访问控制台来查看应用程序中发生了什么，只需遵循以下步骤

将设备与已安装的应用程序连接（必须是调试版本，而不是发布版本）

打开Chrome控制台，在最后一个选项卡附近，您会看到三个垂直点图标，单击它并选择“更多工具”，然后 “远程设备”，您应该可以看到已连接的设备列表。挑选它

在列表中找到您的应用程序并单击“检查”按钮，此时，您应该在Chrome浏览器中打开应用程序

希望它有帮助

简单的答案是，目前没有办法直接将您的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>



对于iTunes，您需要另一个包装器和AFAIK，创建一个包装器的唯一方法是使用（苹果的）Xcode IDE。
问题是关于未填充的create react app PUBLIC_URL环境变量
使用cordova run browser，一切似乎都正常，因为浏览器在路径分辨率方面似乎更为宽松。
例如，我有一个/favicon.ico

但当我在做cordova run android时，运行时找不到路径
通过创建一个新文件.env
并将其放入：
PUBLIC_URL=.

解决了路径错误，应用程序现在运行良好
Sergio在chrome设备上运行的建议chrome://inspect
对我帮助很大
是的，有办法将您的PWA发布到PlayStore。

TWAs

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


TWAs使用《数字资产链接协议》（Digital Asset Link protocol）和API使应用程序或网站能够公开关于其他应用程序或网站的可验证声明。例如，一个网站可以声明它与特定的Android应用程序关联，也可以声明它希望与另一个网站共享用户凭据。


查看以下内容，以获取谷歌开发者论坛发布的关于将PWA发布到Appstore的完整指南和Maximiliano Firtman发布的媒体教程指南PWABuilder有什么问题？您是否愿意就普华比尔德的GitHub回购发起一个问题？下面是我在Google Play store上的一个小PWA应用程序（包装器）：以及刚刚测试过的解决方案上提供的实际PWA。好的一点是包装工作得很好，但是我放松了“脱机”部分：应用程序尝试在每次启动时加载网站，而不是保留旧启动的数据，直到有最新的数据。你绝对确定你的服务工作者缓存工作正常吗？如果是这样，请确保您已正确配置了WebView（webSettings.setDomStorageEnabled（true）和webSettings.setDatabaseEnabled（true）都是缓存存储正常工作所必需的。最后确保您的索引/启动页是可缓存的。如果您将CoachAide安装为应用程序（带包装器），您将看到脱机模式正常工作。感谢您回答Sergio。根据
PUBLIC_URL=.