Поделиться через

Начало разработки PWA или гибридного веб-приложения для Android

  • Статья

Это руководство поможет вам приступить к созданию гибридного веб-приложения или прогрессивного веб-приложения (PWA) в Windows с помощью одной базы кода HTML/CSS/JavaScript, которая может использоваться в Интернете и на разных платформах устройств (Android, iOS, Windows).

Используя правильные платформы и компоненты, веб-приложения могут работать на устройстве Android таким образом, чтобы пользователи выглядели очень похожими на собственное приложение.

Функции PWA или гибридного веб-приложения

На устройствах Android можно установить два основных типа веб-приложений. Основное различие заключается в том, внедрен ли код приложения в пакет приложения (гибридный) или размещен на веб-сервере (pwa).

  • Гибридные веб-приложения: код (HTML, JS, CSS) упакована в APK и может распространяться через Google Play Store. Модуль просмотра изолирован от браузера пользователей, сеанс или общий доступ к кэшу не выполняется.

  • Прогрессивные веб-приложения (PWAs): код (HTML, JS, CSS) живет в Интернете и не требуется упаковать в виде APK. Ресурсы загружаются и обновляются по мере необходимости с помощью рабочей роли службы. Браузер Chrome отрисовывает и отображает приложение, но будет выглядеть в собственном коде, а не включать обычную адресную строку браузера и т. д. Вы можете совместно использовать хранилище, кэш и сеансы с браузером. Это, в основном, как установка ярлыка в браузере Chrome в специальном режиме. PWAs также можно перечислить в Магазине Google Play с помощью доверенного веб-действия.

PWAs и гибридные веб-приложения очень похожи на собственное приложение Android в том, что они:

  • Можно установить через App Store (Google Play Store и (или) Microsoft Store.
  • Доступ к функциям собственного устройства, таким как камера, GPS, Bluetooth, уведомления и список контактов
  • Работа в автономном режиме (нет подключения к Интернету)

PWAs также имеют несколько уникальных функций:

  • Можно установить на начальном экране Android непосредственно из Интернета (без App Store)
  • Можно также установить через Google Play Store с помощью доверенного веб-действия
  • Можно обнаружить через веб-поиск или поделиться с помощью ссылки URL-адреса.
  • Использование рабочей роли службы, чтобы избежать необходимости упаковки машинного кода

Вам не нужна платформа для создания гибридного приложения или PWA, но есть несколько популярных платформ, которые будут рассмотрены в этом руководстве, включая PhoneGap (с Cordova) и Ionic (с Cordova или Capacitor с помощью Angular или React).

Apache Cordova.

Apache Cordova — это платформа с открытым исходным кодом, которая может упростить взаимодействие между кодом JavaScript, живущим в собственном веб-представлении, и собственной платформой Android с помощью подключаемых модулей. Эти подключаемые модули предоставляют конечные точки JavaScript, которые можно вызывать из кода и использовать для вызова собственных API устройств Android. Некоторые примеры подключаемых модулей Cordova включают доступ к службам устройств, таким как состояние батареи, доступ к файлам, вибрация или кольцевая тона и т. д. Эти функции обычно недоступны для веб-приложений или браузеров.

Существует два популярных дистрибутива Cordova:

  • PhoneGap: поддержка прекращена Adobe.

  • Ionic

Ionic

Ionic — это платформа, которая настраивает пользовательский интерфейс приложения в соответствии с языком разработки каждой платформы (Android, iOS, Windows). Ionic позволяет использовать Angular или React.

Примечание.

Существует новая версия Ionic, которая использует альтернативу Cordova, называемой Capacitor. Эта альтернатива использует контейнеры для повышения веб-интерфейса приложения.

Начало работы с Ionic путем установки необходимых средств

Чтобы приступить к созданию PWA или гибридного веб-приложения с Ionic, сначала необходимо установить следующие средства:

Создание проекта с Ionic Cordova и Angular

Установите Ionic и Cordova, введя следующее в командной строке:

npm install -g @ionic/cli cordova

Создайте приложение Ionic Angular с помощью шаблона приложения Tabs, введя команду:

ionic start photo-gallery tabs

Перейдите в папку приложения:

cd photo-gallery

Запустите приложение в веб-браузере:

ionic serve

Дополнительные сведения см. в документации Ionic Cordova Angular. Перейдите в раздел "Создание приложения Angular" в разделе "PWA" документации по Ionic, чтобы узнать, как переместить приложение из гибридного приложения в PWA.

Создание проекта с помощью Ionic Capacitor и Angular

Установите Ionic и Cordova-Res, введя следующее в командной строке:

npm install -g @ionic/cli native-run cordova-res

Создайте приложение Ionic Angular с помощью шаблона приложения Tabs и добавьте Capacitor, введя команду:

ionic start photo-gallery tabs --type=angular --capacitor

Перейдите в папку приложения:

cd photo-gallery

Добавьте компоненты, чтобы сделать приложение PWA:

npm install @ionic/pwa-elements

Импортируйте @ionic/pwa-elements , добавьте в файл следующую src/main.ts команду:

import { defineCustomElements } from '@ionic/pwa-elements/loader';

// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);

Запустите приложение в веб-браузере:

ionic serve

Дополнительные сведения см. в документации по Ionic Capacitor Angular. Перейдите в раздел "Создание приложения Angular" в разделе "PWA" документации по Ionic, чтобы узнать, как переместить приложение из гибридного приложения в PWA.

Создание проекта с помощью Ionic и React

Установите Ionic CLI, введя следующее в командной строке:

npm install -g @ionic/cli

Создайте проект с помощью React, введя команду:

ionic start myApp blank --type=react

Перейдите в папку приложения:

cd myApp

Запустите приложение в веб-браузере:

ionic serve

Дополнительные сведения см. в документации по Ionic React. Посетите раздел "Создание приложения React" в разделе PWA документации по Ionic, чтобы узнать, как переместить приложение из гибридного приложения в PWA.

Тестирование приложения Ionic на устройстве или эмуляторе

Чтобы протестировать приложение Ionic на устройстве Android, подключите устройство (убедитесь, что оно впервые включено для разработки), а затем в командной строке введите следующее:

ionic cordova run android

Чтобы протестировать приложение Ionic в эмуляторе устройств Android, необходимо:

  1. Установите необходимые компоненты — пакет средств разработки Java (JDK), Gradle и пакет SDK для Android.

  2. Создание виртуального устройства Android (AVD): см. [руководство разработчика Android](https://developer.android.com/studio/run/managing-avds.html).

  3. Введите команду Ionic для сборки и развертывания приложения в эмуляторе: ionic cordova emulate [<platform>] [options] В этом случае команда должна быть следующей:

ionic cordova emulate android --list

Дополнительные сведения см. в эмуляторе Cordova в Ионических документах.