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

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

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

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

Концепция

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

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

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

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

Шаг первый — создание PWA

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

Сайт

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

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

Manifest

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

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

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

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

Service Worker

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

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

  1. Вводим адрес своего сайта.
  2. Нажимаем на ссылку Choose a service worker.
  3. В новом окне выбираем подходящий вариант (в нашем случае мы выбрали Advanced Caching) и нажимаем на кнопку Download.

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

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

<script src=”/pwabuilder-sw-register.js”></script>

Альтернативный способ

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

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

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

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

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

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

Шаг второй — создание мобильного приложения

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

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

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

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

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

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

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

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

maven { url 'https://jitpack.io' }
Пример дополнения кода
Пример дополнения кода

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

implementation 'com.github.GoogleChrome:custom-tabs-client:a0f7418972'
Пример дополнения кода
Пример дополнения кода

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

compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 }
Пример дополнения кода
Пример дополнения кода

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

manifestPlaceholders = [ hostName: "cherdak.org", defaultUrl: "https://cherdak.org", launcherName: "Cherdak" ]

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

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

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

<activity android:name="android.support.customtabs.trusted.LauncherActivity" android:label="${launcherName}"> <meta-data android:name="android.support.customtabs.trusted.DEFAULT_URL" android:value="${defaultUrl}" /> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> <intent-filter android:autoVerify="true"> <action android:name="android.intent.action.VIEW"/> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE"/> <data android:scheme="https" android:host="${hostName}"/> </intent-filter> </activity>

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

Пример дополнения кода (раскрытый тег выделен синей рамкой)
Пример дополнения кода (раскрытый тег выделен синей рамкой)

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

assetStatements: '[{ "relation": ["delegate_permission/common.handle_all_urls"], ' + '"target": {"namespace": "web", "site": "https://cherdak.org"}}]'
Пример дополнения кода
Пример дополнения кода

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

<meta-data android:name="asset_statements" android:value="${assetStatements}" />
Пример дополнения кода
Пример дополнения кода

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

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

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

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

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

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

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

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

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

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

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

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

Пример дополнения кода
Пример дополнения кода

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

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

Шаг третий — регистрируемся в Google Play, формируем материалы и выкладываем приложение

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

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

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

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

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

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

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

3131
52 комментария

Отношусь к этой идее с большим скепсисом. Когда человек качает приложение, он ожидает увидеть именно самостоятельное приложение, а не копию сайта. Это подразумевает знакомые паттерны поведения, которые существуют чтобы пользователю было проще ориентироваться в новых приложениях. Для этого используются схожие элементы дизайна, анимации, и т.д. И если вы не делали сайт в соответствии с гайдами Material (если мы говорим об Android), пользователь немного офигеет от вашего "приложения".

5
Ответить

Если сайт делается не адаптивным - конечно пользователь офигеет. С другой стороны, большинство современных адаптивных сайтов использует те же элементы, что и мобильные приложения - бургер-меню, float-button, side navigation и т.д. используются так же, как и нативных приложениях.

2
Ответить

Да не, если нормально делать, то они выглядят как приложения.

Правда гугл подводит и при первом открытии сообщает пользователю, что для работы приложения используется Google Chrome. Мои пользователи из-за этого обижаются)) А так бы совсем чисто всё выглядело.

1
Ответить

Я давно пытался сделать что-то подобное на андроид для своего проекта "Taskker" https://taskker.club пока не узнал о существовании PWA и просто перевел сайт на эту технологию. В итоге отложил идею андроид-приложения в "долгий ящик" ибо "зачем платить больше, если не видишь разницы?".
Однако, по-моему среднестатистический пользователь будет ещё долго привыкать к PWA (и не факт, что привыкнет), он хочет видеть приложение в знакомом ему Play Market, поэтому данная статья очень даже актуальна. Спасибо!

P.S. По-моему в приложении неплохо было бы совсем убрать адресную строку (напишите как это сделать), чтобы у пользователя было ощущение, что это полноценное приложение, а не просто страница в браузере.

4
Ответить

Мы продолжаем экспериментировать, обязательно напишем, если придумаем как убрать адресную строку. Спасибо за обратную связь!

2
Ответить

Есть еще такой сервис https://appmaker.xyz/pwa-to-apk/. Там не нужно возиться с Android Studio.
Стоит отметить что у пользователя должен быть свежий Google Chrome (пока только он поддерживает). Иначе приложение будет выглядеть как вкладка браузера. Технология называется вроде как TWA

3
Ответить

Интересный сервис, еще не пробовали. Обязательно напишем рецензию. Технология называется Trusted Web Activity (TWA) - гугл тому, кому интересно глубже погрузиться в тему.

1
Ответить