我想使用“一次编写，到处运行”。
因此，我使用create-react-app在reactjs中创建了一个PWA。
我的应用程序工作得非常好，我可以从网站将其放置在移动设备的主屏幕上。 但是，我也想在移动应用商店（从Google Play开始）中可见。
我尝试过：
今天是否有一种方法可以在商店中部署reactjs PWA应用程序？ 这将实现我对渐进式Web应用程序的美好梦想 :)
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);
});
<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可以访问控制台以查看应用程序中正在发生的情况，只需按照以下步骤操作：
希望这有所帮助
cordova run browser，所有似乎都很好，因为浏览器在路径解析方面更加宽容。
我有一个例子是/favicon.ico
但是当我执行cordova run android时，运行时找不到路径。.env并将其放入其中：PUBLIC_URL=.
已解决路径错误，应用程序现在运行良好！
Sergio建议使用chrome在设备上运行chrome://inspect非常有帮助
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应用商店，该过程类似。您不一定需要Visual Studio。您可以使用PWABuilder的包作为基础，删除您不需要的任何内容，并使用（Windows）命令行工具创建“应用程序包上传文件”。
对于iTunes，您需要另一个包装器，据我所知，创建包装器的唯一方法是使用（苹果的）Xcode IDE。