Статьи

Push Code Обновления приложений мгновенно с CodePush

Октябрь 6, 2018

Рамки для создания гибридных приложений позволяют разработчикам писать одну базу кода, которую они могут использовать на разных платформах и в магазинах приложений. Это ускоряет и упрощает время разработки, но вы по-прежнему зависите от процессов отправки в магазин приложений для развертывания обновлений, что замедляет цикл разработки. CodePush от Microsoft позволяет мгновенно загружать обновления кода в приложения и похож на Сифон, о котором я недавно писал . CodePush поддерживает как Cordova, так и реагирует на нативные приложения на данный момент, и имеет полезный инструмент командной строки.

Что вы создадите

В этом уроке я покажу вам, как создать простое приложение на основе Cordova. Основное внимание будет уделено тому, как настроить приложение для использования CodePush для обновления приложения без публикации обновлений в магазине приложений.

Начиная

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

Затем установите инструмент командной строки CodePush. 

npm install -g code-push-cli

Вам нужно зарегистрироваться на CodePush, используя учетную запись Microsoft или GitHub. Используйте следующую команду, чтобы открыть вкладку аутентификации: 

 code-push register

Создание приложения Cordova

Создайте приложение cordova с помощью следующей команды: 

 cordova create CordovaMobileApp

Перейдите в каталог проекта и добавьте платформу Android: 

 cordova platform add android

Создайте приложение по умолчанию: 

 cordova build android

Это создаст файл .apk, который вы можете скопировать на устройство или запустить немедленно, используя: 

 cordova run android

Мобильное приложение Cordova по умолчанию

Я буду использовать jQuery mobile для создания простого пользовательского интерфейса для мобильного приложения. Откройте каталог проекта CordovaMobileApp и в папке www отредактируйте файл index.html, чтобы заменить существующий код следующим: 

 <!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>

<div data-role="page">

    <div data-role="header">
        <h1>Cordova Mobile App</h1>
    </div>

    <div data-role="content">    
        <p>Welcome to Cordova App, CodePush</p>        
    </div>

</div>

</body>
</html>

Сохраните изменения и перестройте приложение cordova, чтобы получить обновленный файл .apk .

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

Пользовательский интерфейс мобильного приложения Cordova

Push Code Updates для приложения

Вы только что создали простое приложение Cordova. Теперь вам нужно зарегистрировать его с помощью службы push-кода. 

 code-push app add CordovaMobileApp

После регистрации приложение вернет ключи развертывания для подготовки и производства. Обратите внимание на ключи, которые вы будете использовать позже. После того, как вы зарегистрировали приложение, установите необходимые push-плагины кода: 

 cordova plugin add cordova-plugin-code-push@latest

После установки плагинов пора добавить ключи развертывания push-кода в файл config.xml мобильного приложения: 

 <platform name="android">
    <preference name="CodePushDeploymentKey" value="YOUR-DEPLOYMENT-KEY" />
</platform>

Вы можете добавить либо производственный, либо промежуточный ключ. Чтобы приложение могло обращаться к платформе, совместимой с « политикой безопасности контента » (CSP), добавьте следующую мета-информацию на страницу index.html . 

 <meta http-equiv="Content-Security-Policy" content="default-src https://codepush.azurewebsites.net 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *" />

Чтобы приложение могло синхронизировать изменения с сервера push-кода, необходимо выполнить вызов в событии deviceReady Откройте www / js / index.js и добавьте следующий код в функцию onDeviceReady 

 onDeviceReady: function() {
    app.receivedEvent('deviceready');
    codePush.sync();
 }

Поскольку вы уже развернули мобильное приложение на устройстве, внесите некоторые изменения в пользовательский интерфейс в index.html и отправьте обновление, используя push-код.

Измените сообщение в index.html, как показано: 

  <p>Welcome to Cordova App, CodePush - UPDATE</p>

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

 code-push release-cordova <appName> <platform>

Но по какой-то причине это не сработало для меня. Если это также не работает для вас, используйте эти две команды для подготовки и выпуска приложения: 

 cordova prepare android
code-push release CordovaMobileApp ./platforms/android/assets/www 0.0.1

0.0.1файла config.xml .

После того, как вы нажали на выпуск приложения, попробуйте перезапустить приложение, установленное на вашем устройстве, и оно должно быть обновлено.

Обновленное приложение

Толкая вперед

Из этого руководства вы узнали, как начать работу с CodePush, облачной службой, которая позволяет мгновенно отправлять обновления кода в гибридные приложения. Пожалуйста, дайте мне знать любые комментарии или вопросы, которые у вас есть ниже.

51
Share: