Настроить доверенные веб-действия может быть немного сложно, особенно если все, что вам нужно, — это отобразить свой веб-сайт. Это руководство проведет вас через создание базового проекта, использующего доверенные веб-действия, и охватит все ошибки.
К концу этого руководства вы:
- Использовали Bubblewrap для создания приложения, которое использует доверенную веб-активность и проходит проверку.
- Узнайте, когда используются ваши ключи подписи.
- Уметь определять подпись, с помощью которой создается ваше Android-приложение.
- Узнайте, как создать базовый файл ссылок на цифровые активы .
Чтобы следовать этому руководству, вам понадобится:
- Node.js 10 или более поздней версии установлен на компьютере разработки.
- Телефон или эмулятор Android подключен и настроен для разработки ( включите отладку по USB , если вы используете физический телефон).
- Браузер, поддерживающий надежную веб-активность на вашем телефоне для разработки. Chrome 72 или новее будет работать. Поддержка в других браузерах уже на подходе.
- Веб-сайт, который вы хотели бы просмотреть в Доверенной веб-активности.
Доверенная веб-активность позволяет вашему Android-приложению запускать полноэкранную вкладку браузера без какого-либо пользовательского интерфейса браузера. Эта возможность ограничена веб-сайтами, которыми вы владеете, и вы доказываете это, настраивая ссылки на цифровые активы. Мы поговорим о них подробнее позже .
Когда вы запускаете доверенное веб-действие, браузер проверяет наличие ссылок на цифровые активы, это называется проверкой . Если проверка не пройдена, браузер вернется к отображению вашего веб-сайта в виде пользовательской вкладки .
Установите и настройте Bubblewrap.
Bubblewrap — это набор библиотек и инструмент командной строки (CLI) для Node.js, который помогает разработчикам создавать, создавать и запускать прогрессивные веб-приложения внутри приложений Android, используя доверенную веб-активность.
CLI можно установить с помощью следующей команды:
npm i -g @bubblewrap/cli
Настройка среды
При первом запуске Bubblewrap он предложит автоматически загрузить и установить необходимые внешние зависимости. Мы рекомендуем разрешить этому инструменту делать это, поскольку это гарантирует правильную настройку зависимостей. Ознакомьтесь с документацией Bubblewrap , чтобы использовать существующий пакет разработки Java (JDK) или инструменты командной строки Android.
Инициализация и сборка проекта
Инициализация проекта Android, обертывающего PWA, выполняется с помощью команды init:
bubblewrap init --manifest=https://my-twa.com/manifest.json
Bubblewrap прочитает в��б-манифест , попросит разработчиков подтвердить значения, которые будут использоваться в проекте Android, и создаст проект, используя эти значения. После создания проекта создайте APK, запустив:
bubblewrap build
Бегать
На этапе сборки будет выведен файл с именем app-release-signed.apk . Этот файл можно установить на устройство разработки для тестирован��я или загрузить в Play Store для выпуска.
Bubblewrap предоставляет команду для установки и тестирования приложения на локальном устройстве. Подключив устройство разработки к компьютеру, выполните:
bubblewrap install
Альтернативно можно использовать инструмент adb .
adb install app-release-signed.apk
Теперь приложение должно быть доступно на панели запуска устройства. Открыв приложение, вы заметите, что ваш веб-сайт запускается как настраиваемая вкладка, а не как доверенная веб-активность. Это связано с тем, что мы еще не настроили проверку ссылок на цифровые активы, но сначала...
Альтернативы графическому интерфейсу пользователя (GUI) для Bubblewrap
PWA Builder предоставляет графический интерфейс, который использует библиотеку Bubblewrap для создания проектов доверенных веб-активностей. Дополнительные инструкции о том, как использовать PWA Builder для создания приложения Android, открывающего PWA, можно найти в этой записи блога .
Примечание о подписании ключей
Ссылки на цифровые активы учитывают ключ, которым был подписан APK, и распространенной причиной неудачной проверки является использование неправильной подписи. (Помните, что неудачная проверка означает, что вы запустите свой веб-сайт в виде настраиваемой вкладки с пользовательским интерфейсом браузера в верхней части страницы.) Когда Bubblewrap собирает приложение, на этапе init будет создан APK с настройкой ключа. Однако когда вы публикуете свое приложение в Google Play, для вас может быть создан другой ключ, в зависимости от того, как вы решите обрабатывать ключи подписи. Узнайте больше о ключах подписи и о том, как они связаны с Bubblewrap и Google Play .
Настройка файла ссылки на активы
Ссылки на цифровые активы состоят, по сути, из файла на вашем веб-сайте, который указывает на ваше приложение, и некоторых метаданных в вашем приложении, которые указывают на ваш веб-сайт.
После создания файла assetlinks.json загрузите его на свой веб-сайт по адресу .well-known/assetlinks.json относительно корня), чтобы браузер мог правильно проверить ваше приложение. Ознакомьтесь с подробным описанием ссылок на цифровые активы , чтобы получить дополнительную информацию о том, как они связаны с вашим ключом подписи.
Проверка вашего браузера
Доверенная веб-активность попытается придерживаться браузера, выбранного пользователем по умолчанию. Если браузер пользователя по умолчанию поддерживает доверенные веб-действия, он будет запущен. В противном случае, если какой-либо установленный браузер поддерживает доверенные веб-действия, он будет выбран. Наконец, поведением по умолчанию является возврат к режиму пользовательских вкладок.
Это означает, что если вы отлаживаете что-то, связанное с доверенными веб-действиями, вам следует убедиться, что вы используете тот браузер, которым вы себя считаете. Вы можете использовать следующую команду, чтобы проверить, какой браузер используется:
> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome
Следующие шаги
Надеемся, что если вы следовали этому руководству, у вас будет работающая доверенная веб-активность и достаточно знаний для отладки того, что происходит в случае сбоя проверки. Если нет, ознакомьтесь с другими концепциями Android для веб-разработчиков или напишите на GitHub проблему с этой документацией .
Следующие шаги я бы рекомендовал начать с создания значка для вашего приложения . После этого вы можете рассмотреть возможность развертывания вашего приложения в Play Store.