Загружаем сайт в Google Play

В идеальном мире вы создаёте продукт и не думаете, как его портировать под все существующие платформы (web, Android, iOS, Windows). Мы ещё не в идеальном мире, но с развитием технологии Progressive Web Application (PWA) мы движемся туда уверенно и стремительно.

У вас есть интернет-магазин, веб-приложение или личный блог? Давайте сделаем так, чтобы он появился в магазине приложений Google.

PWA — это технология, которая позволяет сайту получить функциональность мобильного приложения. Можно, в частности, реализовать работу приложения в офлайне, отправлять push-уведомления пользователям, взаимодействовать с внутренними службами и сервисами смартфона (геолокация, камера, панель уведомлений).

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

В iOS нет возможности напрямую установить приложение, это можно сделать только добавив сайт на главный экран. Но мы уверены, что ребята из Купертино обязательно всё наверстают в самое ближайшее время. PWA можно добавить в Windows Store и Google Play (с небольшими усилиями).

В англоязычном интернете есть статьи о том, как добавить PWA-приложение в App Store, но мы это ещё не практиковали.

Для реализации PWA нам потребуются сайт, Manifest и Service Worker.

Свой пример мы будем строить на проекте «Чердак Дали», веб-ресурсе для художников. Единственное требование к сайту — SSL-сертификат (реализация https). Если у вас нет такой функции, рекомендуем обратиться к вашему хостинг-провайдеру, скорее всего, сертификат можно добавить бесплатно с помощью сервиса Let's Encrypt.

Нам нужен только доступ к файлам проекта, никакие серверные изменения или сложные механики не требуются.

Нужно дать браузеру подробную информацию о нашем ресурсе: как он называется, как отображать его на конечном устройстве, какие иконки использовать. Это всё мы описываем в файле manifest.json. Мы не будем делать это вручную, а используем онлайн-генератор.

Предварительно нужно создать иконку для своего приложения размером 512 на 512 пикселей. Изображения остальных размеров сервис создаст самостоятельно. Заполняем все поля (название, короткое название, цветовая тема), выбираем режим отображения standalone, добавляем иконку и генерируем архив.

На выходе мы получим архив, в котором будут находиться сам файл manifest.json, а также иконки нашего приложения. Переносим эти файлы в корневую папку вашего сайта.

Service Worker позволяет выполнять фоновые процессы вроде кэширования страниц, веб-запросов, отправки уведомлений. В этой статье мы не будем углубляться в эту обширную тему, оставляйте комментарии, если хотите, чтобы мы разобрали создание и оптимизацию индивидуальных решений.

Для большинства задач хватит сгенерированного кода. Для этого воспользуемся PWA Builder.

В итоге мы получим архив с двумя файлами. Файл pwabuilder-sw.js переносим в корневую папку сайта (к файлу manifest.json).

Нам нужно разместить файл pwabuilder-sw-register.js в корне сайта и просто добавить в конец нашего сайта (перед закрывающимся тегом body) новый тег script со ссылкой:

Во втором файле хранится JavaScript-код для запуска service-worker. Этот код необходимо перенести в JS-файл вашего сайта. Чтобы определить, куда и в какой файл записать код, откройте сайт в браузере и зайдите в режим просмотра кода страницы (в Google Chrome это комбинация клавиш Ctrl+U).

Файлы JavaScript подключаются к сайту с помощью тега script. Ищем такой тег в начале (в секции head) или в конце сайта (перед закрывающимся тегом body).

Если тегов несколько (как правило присутствуют JS-файлы подключаемых библиотек), ищем самый последний из них. В теле тега содержится информация о том, где находится нужный нам файл (в нашем случае это файл app.js в папке js). В конец этого файла мы вставляем код из файла pwabuilder-sw-register.js.

На данном этапе у нас есть работающее PWA-приложение. При заходе на сайт с Android-смартфона внизу должна появится ссылка на установку приложения на главный экран.

Для создания приложения нам потребуется бесплатная среда разработки Android Studio.

Начнём создание нашего проекта. На начальном экране Android Studio нажимаем Start a new Android Studio project. На следующем шаге нам предлагают выбрать заготовку для нашего приложения. Выбираем вариант Add No Activity и двигаемся дальше.

В следующем окне нужно заполнить информацию о новом приложении: имя, название пакета (уникальное имя приложения в Google Play), локация проекта на компьютере, язык программирования, а также минимальная версия операционной системы. Для нашего проекта мы заполнили информацию так:

Система создаст для нас новый проект. Для дальнейших действий нам нужно подключить к проекту библиотеку TWA Support Library. Для этого нужно открыть файл build.gradle:

Вначале внесём изменения в файл, у которого в описании стоит название вашего проекта (в нашем случае это файл build.gradle (Project: Cherdak)). Нам нужно добавить дополнительный репозиторий в секцию repositories:

Теперь нам нужен файл, у которого в описании написано Module:app. Это файл, в котором мы можем добавить зависимости в наш проект. В секцию dependencies добавляем следующую запись:

Необходимая нам библиотека требует восьмой версии Java, поэтому нам нужно добавить её в опции компиляции. Для этого добавим следующий код в блок android:

Нам также нужно специфицировать переменную manifestPlaceholders. Добавляем следующий код в секцию defaultConfig, меняя значения переменных на собственные:

На этом с файлом build.gradle мы закончили. Теперь нам нужно переместиться в файл AndroidManifest.xml. В этом файле хранится информация о нашем приложении.

Нам нужно добавить код для отображения нашего приложения:

Обратите внимание, что мы раскрыли тег application.

Теперь нам нужно подтвердить взаимоотношение приложения и сайта. Связь должна быть установлена с обеих сторон — со стороны сайта и со стороны приложения. Для этого мы должны добавить изменения в файл build.gradle (Module: app). Не забываем менять значения на собственные:

Возвращаемся в файл AndroidManifest.xml и добавляем новые метаданные:

Мы закончили устанавливать связь со стороны приложения. Теперь нам нужно установить связь со стороны сайта. Для этого сгенерируем файл assetlinks.json и разместим его на сервере. Для начала нам нужно сгенерировать APK-файл. Переходим во вкладку Build → Generate Signed Bundle or APK и выбираем APK.

Нам нужно сформировать новый keystore (или воспользоваться существующим, если он у вас есть). Нажимаем на кнопку Create new… и заполняем поля:

На следующей вкладке выбираем release и ставим галочки в Signature Versions:

После клика на клавишу Finish мы получим APK файл, который в дальнейшем сможем передать в Google Play.

Теперь перемещаемся во вкладку Tools → App Links Assistant.

Это откроет окно, в котором описаны шаги, необходимые для связывания сайта и приложения. В этом окне кликаем на кнопку Open Digital Asset Links File Generator и в открытом окне вводим URL сайта, ставим галочку на Select keystore file и выбираем ключ, который мы сформировали на предыдущем шаге:

Сохраняем полученный файл и переносим его в папку .well-known на сервер.

И нажимаем клавишу Link and Verify. В появившемся окне нажимаем OK. В итоге мы должны увидеть следующее:

Для того, чтобы иметь возможность публиковать приложения в магазин Google Play, необходимо получить аккаунт разработчика. Для этого регистрируемся (стоимость аккаунта — $25 разовым платежом.

После регистрации у вас появится доступ к Google Play Console. Нажимаем на клавишу «Новое приложение». В следующем окне заполняем все необходимые данные (описание, возрастные ограничения, графические материалы).

Система сама подскажет, какие данные обязательны к заполнению. Мы не будем останавливаться на данном шаге: с нашей точки зрения, если вы дошли до этого шага, то вы определённо справитесь. Отметим только, что файл apk, который нужно загрузить, находится в папке «Папка с проектом/app/release/app-release.apk».

После загрузки пройдёт некоторое время, пока Google Play будет проверять ваше приложение. В конечном счёте вы сможете увидеть заветный статус «Опубликовано», после чего — ищите на просторах Google Play.

Спасибо, что прошли этот путь вместе со мной. Надеюсь, у вас всё получилось! Если нет, я постараюсь ответить на ваши вопросы. Обязательно поделитесь своими сайтами-приложениями в комментариях к этой статье.

Материал для вас готовила команда агентства Ilavista. Мы занимаемся разработкой сайтов и веб-приложений для бизнеса.

#googleplay #приложения