Приложения Chrome популярны среди пользователей Chrome. И почему бы и нет, они предоставляют метод создания переносимого «приложения» в привычной среде браузера Chrome.
Представьте себе возможности приложений Chrome, доступных на вашем смартфоне. Теперь мы можем запускать наши любимые приложения Chrome на Android и iOS, используя набор инструментов на основе Apache Cordova .
Cordova — это платформа с открытым исходным кодом для упаковки мобильных приложений с использованием HTML, CSS и JavaScript. Cordova оборачивает веб-приложение HTML, CSS и JavaScript с помощью встроенной оболочки и позволяет распространять их в Google Play , Apple App Store и других магазинах.
обзор
В этом руководстве мы создадим наше собственное приложение Chrome с использованием HTML, CSS и JavaScript и перенесем его на эмулятор Android. Приложение, которое мы будем создавать, будет простым приложением для получения последних твитов на основе определенного хэштега в твиттере.
Создание приложения Chrome
Мы начнем с создания нашего приложения Chrome. Как только мы создадим приложение Chrome и протестируем его в браузере Chrome, мы перенесем его на Android.
Исходный код из этого урока доступен на GitHub .
Создайте папку проекта с именем TwitterChromeApp . Внутри папки проекта создайте файл манифеста с именем manifest.json который будет файлом конфигурации для нашего приложения. Внутри manifest.json мы определим несколько параметров, необходимых для приложения Chrome. Для приложений Chrome требуется manifest_version равный 2 . Мы также определим имя приложения, его версию и путь к фоновому скрипту, который будет выполняться при запуске приложения. Мы будем извлекать твиты из внешнего URL-адреса службы, поэтому мы также укажем это внутри этого файла. Вот как должен выглядеть manifest.json :
{ "manifest_version": 2, "name": "Tweet Chrome App", "version": "1.0", "app": { "background": { "scripts": ["scripts/main.js"] } }, "permissions": [ "http://twittersearchapi.herokuapp.com/search" ] }
При запуске приложения Chrome мы покажем окно, где будут отображаться твиты из твиттера. В приложениях Chrome есть событие onLaunched которое мы используем для создания окна для нашего приложения при запуске приложения.
Внутри папки проекта TwitterChromeApp создайте еще одну папку с именем scripts и внутри нее создайте фоновый скрипт с именем main.js Добавьте следующий код в main.js :
chrome.app.runtime.onLaunched.addListener(function() { // creating window for app code will be here });
Внутри события onLaunched мы создадим вдову для нашего приложения Chrome. Добавьте следующий код в main.js :
chrome.app.runtime.onLaunched.addListener(function() { var screenWidth = screen.availWidth; var screenHeight = screen.availHeight; var width = 500; var height = 300; chrome.app.window.create('index.html', { id: "tweetAppID", outerBounds: { width: width, height: height, left: Math.round((screenWidth - width) / 2), top: Math.round((screenHeight - height) / 2) } }); });
В приведенном выше коде мы использовали screen объект, чтобы получить доступную ширину и высоту экрана. Основываясь на фактической ширине экрана, мы устанавливаем внешние границы нового окна Chrome для правильного отображения.
chrome.app.window.create создает новое окно, используя html внутри файла index.html .
Внутри папки проекта TwitterChromeApp создайте новый файл с именем index.html как показано ниже:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Chrome Tweet App</title> </head> <body> <h1>Tweets !!</h1> </body> </html>
Теперь попробуйте установить приложение Chrome в браузере Chrome. Откройте Инструменты -> Расширения (возможно, Дополнительные инструменты ). Включите режим разработчика из флажка в правом верхнем углу, а затем нажмите Загрузить распакованное расширение и выберите папку проекта.
Запустите расширение через окно « Приложения» или « Расширения», и вы увидите следующее:
Далее мы создадим ajax-вызов, который запускается при запуске окна, извлекающего твиты из URL-адреса службы. Мы будем использовать сервис, размещенный на Heroku . Сервис имеет несколько ограничений. Он только получает твиты с хештегом perkytweets , этого достаточно для нашего примера.
Мы будем использовать jQuery для вызова AJAX, поэтому загрузите его в папку scripts и index.html в index.html , например:
<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
Теперь создайте новый файл с именем script.js в папке scripts и создайте вызов ajax, как показано:
$(function() { $.ajax({ type: 'GET', url: 'http://twittersearchapi.herokuapp.com/search', success: function(response) { var resObj = JSON.parse(response); console.log(resObj); }, error: function(error) { console.log(error); } }); });
Включите script.js в index.html :
<script type="text/javascript" src="scripts/script.js"></script>
Теперь откройте Инструменты -> Расширения (или Больше инструментов ) и нажмите перезагрузить, чтобы отразить изменения. Затем нажмите на приложение, чтобы перезапустить его. Если вы проверяете консоль Chrome (просто обычную консоль, к которой у вас есть доступ в Chrome), на ней должен отображаться ответ от URL-адреса службы.
Далее мы отобразим ответы в index.html . Мы будем использовать Bootstrap для стилизации страницы.
Создайте папку styles внутри папки вашего проекта и загрузите в нее файлы Bootstrap css. Включите CSS-файл Bootstrap в index.html .
<link href="styles/bootstrap.min.css" rel="stylesheet">
Включите элемент ul в index.html для отображения твитов. Вот как должен выглядеть index.html сейчас:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Chrome Tweet App</title> <link href="styles/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script> <!-- Check this matches your jQuery version and file name --> <script src="scripts/script.js"></script> </head> <body> <h1>Tweets !!</h1> <ul id="ulTweets" class="list-group"> </ul> </body> </html>
Внутри успешного вызова AJAX в scripts.js содержится следующий код для добавления элементов, извлеченных из вызова службы, в ul в index.html .
$.each(resObj, function(index, value) { $('#ulTweets').append('<li class="list-group-item"><span class="badge">' + resObj[index].retweet_count + '</span>' + resObj[index].text + '</li>'); });
Перезагрузите и перезапустите приложение, и вы должны увидеть экран, полный твитов.
Создание приложения Chrome для Android
Поскольку мы будем запускать наше приложение на Android, убедитесь, что в вашей системе установлен Java JDK 7 или выше, Android SDK 4.4.2 или выше и Apache Ant .
Нам также понадобится инструмент командной строки cca . Вы можете установить его используя
npm install -g cca
Подробную информацию о настройке среды для переноса приложений Chrome на Android и iOS можно найти в официальных документах .
Когда настройка среды будет завершена, мы создадим новый проект из существующего TwitterChromeApp для TwitterChromeApp на Android.
Выполните следующую команду, чтобы создать проект:
cca create TwitterAppForAndroid --copy-from=path/to/TwitterChromeApp/manifest.json
Перейдите в TwitterAppForAndroid и выполните следующую команду, чтобы запустить проект в эмуляторе Android:
cd TwitterAppForAndroid cca emulate android
После успешного запуска эмулятора вы должны увидеть приложение, работающее внутри эмулятора.
Вывод
В этом уроке мы увидели, как создать простое приложение Chrome и перенести его на платформу Android. Дополнительную информацию о запуске приложений Chrome на мобильных устройствах с использованием Apache Cordova можно найти в официальных документах .
Что вы думаете об этой опции Chrome App для создания мобильного приложения? Есть ли у него какие-либо преимущества по сравнению с обычным веб-приложением HTML, CSS и JavaScript в Cordova?