Есть ли способ отправить PWA реагировать в Google Play?
Я хочу использовать "Пиши один раз, беги везде"
Таким образом, я создал PWA в activjs с create-реагировать-приложение.
Мое приложение отлично работает, и я могу разместить его на домашнем экране своего мобильного телефона с веб-сайта. Однако я хочу, чтобы меня тоже видели в мобильных магазинах (начиная с Google Play).
Я старался:
- Microsoft pwaBuilder, который не работает (загруженный пакет не распознается Google Play)
- Упаковываю мое приложение в Cordova (копируя файлы из сайта activjs на www), но я застрял на белом экране, как и некоторые другие люди ( публикуя PWA в магазинах приложений: google play и ios itunes, Reactjs с cordova)
Можно ли сегодня развернуть приложение PWA реагировать в магазине? Это осуществило бы мою большую мечту о прогрессивных веб-приложениях:)
4 ответа
Проблема была в переменной среды create-реагировать-app PUBLIC_URL, которая не была заполнена.
С cordova run browser
Все, кажется, в порядке, так как браузер кажется более разрешающим в разрешении пути. Я имел в качестве примера /favicon.ico
Но когда я делал cordova run android
, путь не был найден во время выполнения.
Создав новый файл .env
и вставьте в него:
PUBLIC_URL=.
Устранена ошибка пути, и приложение теперь работает хорошо!
Советы Серджио, работающего на устройстве с хромом chrome://inspect
очень помог мне
Несколько месяцев назад я разработал небольшое приложение ReactJS с использованием Cordova/Phonegap, которое действительно работает, поэтому я думаю, что вы упустили пару деталей, чтобы заставить ваше приложение работать.
Во-первых, вы подождали события deviceready, прежде чем запустить ReactJS? Ваша точка входа должна выглядеть примерно так (код довольно старый, я использовал его в старом приложении 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.
Надеюсь, поможет
Ответ прост: в настоящее время невозможно напрямую добавить PWA в Google Play Store, Apple iTunes или Microsoft App Store. Однако вы можете добавить свой PWA непосредственно в Amazon App Store. Для остальных из них вы должны сначала создать оболочку для нее, а затем развернуть пакет оболочки в магазине. Поскольку вы специально задали вопрос о Google Play Store, вам в основном нужны два файла (см. Ниже), а также несколько вспомогательных файлов, которые будут созданы автоматически при создании нового проекта Android в Android Studio (или аналогичной среде). Вам нужно основное действие, которое запускает ваш начальный URL PWA, что-то вроде:
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's) Xcode IDE.
Да, есть способ опубликовать ваши PWA в PlayStore.
Twas
Доверенные действия в Интернете - это новый способ интеграции содержимого веб-приложения, такого как PWA, с приложением Android с использованием протокола, основанного на пользовательских вкладках.
TWA используют протокол и API-интерфейс Digital Asset Links, позволяющий приложению или веб-сайту делать публичные, проверяемые заявления о других приложениях или веб-сайтах. Например, веб-сайт может объявить, что он связан с определенным приложением Android, или он может объявить, что он хочет поделиться учетными данными пользователя с другим веб-сайтом.
Воспользуйтесь следующей ссылкой для получения полного руководства по запуску PWA to Appstore на форуме разработчиков Google и учебного руководства по среде Максимилиано Фиртмана здесь.