Есть ли способ отправить PWA реагировать в Google Play? - PullRequest
0 голосов
/ 28 декабря 2018

Я хочу использовать «Писать один раз, запускать везде»

Поэтому я создал PWA в activjs с create-реагировать-приложение.

Мое приложение работает отлично, и я могу поставитьэто на главном экране моего мобильного телефона с сайта.Тем не менее, я хочу быть видимым и в мобильных магазинах (начиная с Google Play).

Я пытался:

Есть ли сегодня способ развертывания приложения PWA реагирования в магазине?Это осуществило бы мою большую мечту о прогрессивных веб-приложениях:)

Ответы [ 4 ]

0 голосов
/ 06 февраля 2019

Да, есть способ опубликовать ваши PWAs в PlayStore.

TWA

Доверенные веб-операции - это новый способ интеграции содержимого веб-приложения, такого как PWA, с приложением Android с использованием протокола, основанного на пользовательских вкладках.TWA используют Протокол цифровых ссылок активов и API, позволяющие приложению или веб-сайту делать публичные, проверяемые заявления о других приложениях или веб-сайтах.Например, веб-сайт может объявить, что он связан с определенным приложением Android, или он может объявить, что он хочет предоставить учетные данные пользователя другому веб-сайту.Ознакомьтесь со следующей ссылкой , чтобы получить полное руководство по запуску PWA в Appstore на форуме разработчиков Google, а также учебное пособие для Максимилиано Фиртмана здесь

0 голосов
/ 03 января 2019

Простой ответ: в настоящее время невозможно напрямую добавить свой 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.

0 голосов
/ 11 января 2019

Проблема заключалась в том, что переменная среды create-реагировать-app-PUBLIC_URL была незаполнена.

С cordova run browser все выглядит нормально, так как браузер кажется более разрешающим в разрешении пути.В качестве примера у меня был /favicon.ico

Но когда я делал cordova run android, путь не был найден во время выполнения.

Создав новый файл .env и вставив в него:

PUBLIC_URL=.

устранена ошибка пути, и теперь приложение работает хорошо!

Советы по работе Sergio на устройстве с Chrome chrome://inspect мне очень помогли

0 голосов
/ 02 января 2019

месяцев назад я разработал небольшое приложение ReactJS с использованием Cordova / Phonegap, которое действительно работает, поэтому я думаю, что вы упустили пару деталей, чтобы заставить ваше приложение работать.

Во-первых, вы подождали устройство ужесобытие, прежде чем загрузить 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, я счел необходимым использоватьэтот плагин для веб-пакета, чтобы иметь доступ к объекту 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.

Надеюсь, это поможет

...