На Хабре публиковалось немало статей о создании расширений для Chrome, но тема разработки Chrome приложений (они же Chrome apps) затрагивалась заметно реже. В последнее время она стала актуальнее из-за распространения устройств на ChromeOS. К тому же инфраструктура для создания приложений для Chrome стала более стабильной и удобной для использования. В этой статье я постараюсь ответить на основные вопросы: зачем вообще писать приложения для Chrome, чем они отличаются от расширений, веб-сервисов, десктопных приложений и т.п., а также как они разрабатываются, и какие на них накладываются ограничения. Если эта тема вызовет интерес, у статьи будут продолжения, затрагивающие более специальные вопросы.
Зачем
Одну и ту же функциональность можно реализовать с помощью совершенно разных технологий: можно написать программу для Windows, сделать web-сервис, мобильное приложение для Android и/или iOS и т.д. Что может подтолкнуть автора сделать выбор в пользу приложения для Chrome?
Chrome App Or Chrome Extension, What’s The Difference?
- Работа на ChromeOS. На данный момент Chrome app — основной способ донести вашу программу до пользователей Chromebook’ов. Стоит ли оно того? Chromebook’ов пока меньше, чем, скажем, компьютеров под Windows, но тенденция меняется. В прошлом году в США было продано в 5 раз больше Chromebook’ов чем Macbook’ов
- Приложения Chrome без каких-либо дополнительных усилий работают на Windows, Linux и OS X. Конечно, есть множество других способов сделать приложение переносимым, но большинство из них оказываются заметно более затратными.
- С недавних пор появилась возможность портировать Chrome apps на Android и iOS.
- На большинстве систем приложения Chrome выглядят для пользователя как обычные программы. Они запускаются из меню «Пуск», открывают обычные окна без браузерных контролов, могут использоваться в качестве программ по умолчанию для открытия файлов, и в остальном ведут себя
как полноправные программы.
Packaged apps и hosted apps
Все видели в списке установленных по умолчанию в Chrome приложений иконки Поиска, Gmail, Google Диска. Если нажать на одну из них, ничего похожего на приложение не открывается. Вместо этого, пользователь просто переводится на страничку соответствующего сервиса.
Дело в том, что существует два принципиально разных типа приложений: hosted app и packaged app. К сожалению, устоявшихся русских терминов для них нет. Поиск, Gmail и т. д. — относятся к hosted. Такое приложение состоит из файла manifest.json с URL и настройками безопасности, и иконки. Фактически, hosted app — это специальная закладка на онлайн-сервис.
В отличие от hosted, в случае packaged app, все файлы, необходимые для работы приложения хранятся на компьютере пользователя. Такие приложения, как правило, могут лучше работать offline, могут управлять своими окнами, и вообще имеют доступ к большему количеству программных интерфейсов Chrome.
ТОП 5 РАСШИРЕНИЙ ДЛЯ Google Chrome
В дальнейшем речь пойдёт о packaged apps.
Приложения и расширения
При этом, расширения и приложения изнутри устроены очень похоже. И те, и другие устанавливаются из Интернет-магазина Chrome, представляют собой .crx файлы, являющиеся zip-архивами. Свойства расширения/приложения описываются в файле manifest.json, а UI в них написан на HTML5. Многие программные интерфейсы Chrome доступны как расширениям, так и приложениям.
В то же время, есть и значительные отличия. Приложения могут пользоваться функциями, недоступными для расширений:
- управлять своими окнами,
- напрямую работать с файлами на компьютере пользователя,
- назначаться программами для открытия операционной системой тех или иных типов файлов,
- открывать TCP и UDP соединения (этим, к примеру пользуется SSH-клиент для Chrome),
- работать с USB.
Особенности разработки
Я уже упоминал, что с точки зрения пользователя приложения Chrome мало отличаются от обычных программ. В то же время с точки зрения программиста они устроены совсем по-разному. Какие-то операции оказываются проще, какие-то — сложнее.
Многие интерфейсы, использующиеся приложениями, являются общепринятыми стандартами и хорошо известны всем веб-разработчикам. Для UI используются HTML и CSS, для работы с HTTP — XMLHTTPRequest и т.д.
В Chrome приложении практически без дополнительных усилий реализуется синхронизация между экземплярами приложения на разных компьютерах. Работа с файлами, как и все прочие интерфейсы, зависящие от внешних ресурсов, устроена асинхронно. С одной стороны, это несколько усложняет код для соответствующих операций, с другой — гарантирует отзывчивость интерфейса и предотвращает блокировки.
Ещё одна особенность Chrome — управление безопасностью. В Chrome оно устроено иначе, чем в классических операционных системах и больше напоминает систему безопасности в Android. К добавлению програмных интерфейсов разработчики Chrome всегда подходили консервативно. При разработке системы легче со временем ослабить ограничения безопасности, чем сделать их более строгими.
В результате, например, у приложений отсутствует неограниченный доступ к файловой системе. Главным образом, они работают с файлами, либо принадлежащими приложению, либо явно открытыми пользователем.
Чем можно пользоваться кроме HTML + JavaScript
Основным языком программирования для Chrome является, естественно, JavaScript. Но это не значит, что весь ваш код необходимо переписывать на нём. Есть несколько решений, позволяющих использовать в Chrome приложении код на других языках программирования. Среди них:
- Native Client. Код компилируется таким образом, чтобы позволить как его выполнение процессором, так и верификацию браузером. Код NaCl использует для общения с внешним миром достаточно богатый набор интерфейсов Pepper API, включающий, в частности, работу с файловой системой, OpenGL и звук.
- Emscripten Если NaCl вам не подходит, можно скомпилировать свой код из C++ непосредственно в JavaScript. На современных браузерах получающийся JavaScript работает лишь в несколько раз медленнее, чем если бы он компилировался в машинный код. Из плюсов — совместимость со всеми интерфейсами, доступными из JavaScript.
Пример
В заключении приведу пример приложения, над которым я сам работал (и
работаю). Это текстовый редактор Text. Код редактора доступен на гитхабе. Для собственно редактирования используется библиотека CodeMirror. Приложение реализует работу с файлами, окнами, сохранений настроек и прочие необходимые функции.
Источник: habr.com
Разработка ChromeApps
Приложение Google Chrome — это веб-приложение, которое запускается в веб-браузере Google Chrome.
Приложения Chrome — это просто веб-приложения, зарегистрированные в Интернет-магазине Chrome (например, Gmail). По сути, это просто прославленные закладки.
Приложения Chrome запускаются в самом браузере Chrome с другим пользовательским интерфейсом, который отличает их от веб-приложений. Он имеет несколько дополнительных возможностей, например, может работать в автономном режиме, может получать доступ к дополнительным аппаратным устройствам и локальному хранилищу, что делает его более надежным.
Есть два типа приложений: размещенные и упакованные.
Упакованные приложения
Упакованные приложения имеют функции, очень похожие на нативные настольные приложения, а именно возможность работать в автономном режиме (по умолчанию), могут взаимодействовать с аппаратными устройствами и иметь доступ к локальному хранилищу. Упакованные приложения не ограничиваются обычным интерфейсом Chrome и могут отображаться без классического оконного меню и элементов пользовательского интерфейса операционной системы.
Размещенные приложения
Размещаемые приложения — это исходный тип приложений Chrome. Они содержат один файл манифеста, содержащий URL-адрес и дополнительную информацию о приложении. Размещенные приложения обычно находятся в автономном режиме и на них распространяются обычные ограничения безопасности веб-страниц.
Вот основные шаги для создания приложения Chrome. Для лучшего понимания мы создадим пример приложения (Media Player)
- Создать manifest.json
- Создавайте фоновые скрипты
- Создать страницу окна
- Создание обработчиков фоновых событий
- Установите приложение Chrome в режиме разработчика
Создайте свое первое приложение для Chrome (Media Player)
Здесь мы создадим одно приложение для Chrome под названием Media Player. Это приложение будет использовать предварительно указанные URL-адреса видео и будет загружать и хранить видео в локальном хранилище Chrome, после чего его можно будет воспроизвести. Загруженные видео будут воспроизводиться в циклической последовательности. Это приложение будет использовать файловую систему Chrome и многие другие встроенные функции Chrome.
Приложение Chrome содержит следующие компоненты:
- Манифест сообщает Chrome о вашем приложении, о том, что это такое, о том, как его запустить, и о необходимых дополнительных разрешениях.
- Фоновый скрипт используется для создания страницы событий, отвечающей за управление жизненным циклом приложения.
- Весь код должен быть включен в пакет приложения Chrome. Сюда входят модули HTML, JS, CSS и Native Client.
Все значки и другие ресурсы должны быть включены в пакет.
1. Создайте manifest.json.
Файлы манифеста содержат подробное описание всех доступных атрибутов manifest.json и использование конкретного атрибута.
2. Создайте фоновый скрипт.
Ваш фоновый сценарий может содержать дополнительные прослушиватели, окна, сообщения публикации и данные запуска, все из которых используются страницей событий для управления приложением.
Событие chrome.app.runtime .onLaunched будет запущено, когда пользователь запустит приложение.
Чтобы экран постоянно не спал, используется приложение chrome.power. Чтобы использовать приложение Power, нам нужно включить power в раздел разрешений manifest.json.
chrome.app.window используется для создания окна, которое немедленно откроет окно с полноэкранным состоянием, полной шириной и высотой. (Вы можете указать свою привязку с помощью предопределенных свойств left, right, height, width.)
3. Создайте страницу окна.
Страница окна (index.html) содержит html-код для начальной страницы приложения.
4. Создайте обработчики фоновых событий (app.js).
В фоновом сценарии мы будем использовать javascript для извлечения данных с заданного URL-адреса видео и сохранения их в локальном хранилище Chrome.
Здесь мы объявили и инициализировали необходимые глобальные переменные, которые будут использоваться впоследствии. baseFolderPath — это путь к каталогу локального хранилища для локального хранения всех видео. videoUrls — это объект, который содержит URL-адреса видео отдельно для сред разработки и производственной среды.
Как запустить и использовать Google Chrome в режиме приложений
Хром
Интернет является источником хранения всей информации и одновременного подключения нескольких устройств и сервисов. Поскольку собственные платформы приложений ограничены ограниченным набором устройств, это требует универсальной платформы приложений и сервисов, которая может работать везде. Платформа веб-приложений является подходящим кандидатом для решения этой проблемы. А с появлением платформы PWA или Progressive Web Apps это делает реализацию этой универсальной платформы действительно простой. Большинство сред операционных систем поддерживают использование веб-страниц с использованием современных веб-браузеров, которые получают поддержку Progressive Web Apps. Сюда также входит веб-браузер Google Chrome .
Запустите и используйте Chrome в режиме приложений
Этот режим приложения позволяет пользователям запускать веб-страницы так, как будто они работают как естественное приложение на компьютерах. Короче говоря, он скрывает все панели инструментов и адресную строку и показывает только тело веб-страницы, которая в конечном итоге является режимом приложения. Эта функция поддерживается движком рендеринга Google Chrome и, следовательно, очень полезна для Progressive Web Apps. Благодаря поддержке API-интерфейсов определения местоположения, речи, микрофона и уведомлений этот режим работает и ведет себя как подлинное приложение.
Как включить режим приложений для определенного веб-сайта
Прежде всего, начните с открытия Google Chrome на своем компьютере. Теперь перейдите на ваш любимый сайт.
Как только вы окажетесь на главной странице нужного вам сайта, нажмите кнопку меню, обозначенную тремя вертикальными точками в верхней правой части окна.
Нажмите Дополнительные инструменты> Создать ярлык.
Вы можете получить подсказку, подтверждающую, хотите ли вы создать ярлык и какое имя вы хотите. Если вы это сделаете, задайте имя, установите флажок Открыть как окно и нажмите Создать.
Теперь введите chrome: // apps в адресную строку и нажмите Enter. Вы окажетесь на панели инструментов приложений, которая поставляется с Google Chrome.
Щелкните правой кнопкой мыши веб-сайт, для которого вы создали ярлык, и убедитесь, что установлен флажок Открыть как окно .
Нажмите на запись на сайте, и он запустится в режиме приложения.
Теперь ваш сайт будет работать в режиме приложения.
Создание ярлыков быстрого запуска для сайтов w для запуска в режиме приложения
Чтобы быстрее запускать эти веб-сайты в режиме приложений без фактического открытия Google Chrome и использования панели мониторинга приложений, вы также можете создать пункт меню «Пуск» и ярлык на рабочем столе.
Для этого откройте Google Chrome и перейдите в chrome: // apps. Нажмите правой кнопкой мыши на ярлык веб-сайта и выберите Создать ярлыки.
Теперь вы получите подсказку о том, где создавать ярлыки.
Сделайте свой выбор и нажмите Создать.
Вот и все – ярлык будет создан!
Источник: techarks.ru