Веб-приложения - это приложения, построенные с использованием стандартных веб-технологий. Они работают во всех современных веб-браузерах и могут быть разработаны с использованием ваших любимых инструментов. Некоторые характеристики, которые отличают веб-приложения от веб-сайтов: приложения устанавливаются пользователем, они автономны и не всегда требуют Chrome окна браузера, они могут работать в оффлайн-режиме. Примеры веб-приложений: Gmail, Twitter и Etherpad.
Проект "The Mozilla Open Web Apps" предлагает ряд небольших дополнений к существующим сайтам для превращения их в веб-приложения, работающие в богатой, интересной и мощной вычислительной среде. Эти приложения запускаются в браузерах ПК и на мобильных устройствах и пользователю гораздо легче открывать и запускать их, чем веб-сайты. Они имеют доступ к растущему количеству новой функциональности, такой как синхронизация всех устройств пользователя.
Прежде, чем начать
Если вы впервые разрабатываете веб-приложение, то, возможно, захотите проверить текущее состояние разработки API.
Публикация приложения
Единственное, что вам необходимо сделать для создания веб-приложения из веб-сайта, - добавить app manifest. Это JSON-файл, описывающий ваше приложение, включая его имя, иконки и описание, удобное для чтения человеком.
Manifest должен быть расположен в том же домене, что и веб-сайт, и должен иметь Content-Type application/x-web-app-manifest+json (Примечание: в данный момент это не обязательно для Firefox, но необходимо для магазина приложений). Для полного ознакомления с форматом manifest-файла обратитесь к документации. Существует ряд инструментов для проверки валидности манифест-файла. См. Validating a manifest.
Одинаковая политика происхождения
Важно заметить, что каждое приложение следует хостить в отдельном домене. Разным приложениям не следует использовать один и тот же домен. Приемлемое решение - располагать каждое приложение в своем субдомене, например. См. FAQs about apps manifests для большей информации о происхождении.
Проверка установки приложения
Когда веб-браузер загружает страницу приложения, странице необходимо проверить,установлено ли приложение у пользователя. Вы можете это проверить вызовом getSelf(), например:
var request = navigator.mozApps.getSelf();
request.onsuccess = function() {
if (request.result) {
// we're installed
} else {
// not installed
}
}
request.onerror = function() {
alert('Error checking installation status: ' + this.error.message);
}
Установка приложения
Вы можете распространять приложение прямо с вашего сайта. Это также хорошая идея для тестирования установки с сайта, лишь для того, чтобы убедиться в валидности файла manifest перед представлением его на Mozilla Marketplace.
Просто создайте кнопку или ссылку, вызывающую данный JavaScript:
var request = navigator.mozApps.install("https://path.to/my/example.webapp");
request.onsuccess = function() {
// great - display a message, or redirect to a launch page
}
request.onerror = function() {
// whoops - this.error.name has details
}
Вызов navigator.mozApps.install() заставляет браузер загружать manifest и спрашивать пользователя, устанавливать ли приложение. Если пользователь подтвердит установку, приложение будет установлено в браузер.
Второй параметр - install_data - аргумент для navigator.mozApps.install(), используемый для сохранения информации в хранилище данных об установленных приложениях пользователя. Эта информация может быть синхронизирована с другими устройствами и получена вашим приложением при использовании вызова getSelf() (см. Checking whether the app is installed). Например:
navigator.mozApps.install(
"https://path.to/my/example.webapp",
{
user_id: "some_user"
}
);
Продвижение приложения
Mozilla разрабатывает магазин приложений, который позаботится об открытии, обзорах, рейтингах и биллинге, используя открытую инфраструктуру, которая может быть использована третьей стороной для создания собственных магазинов приложений. Но вы не обязаны размещать ваше приложение в магазине.
Если вы хотите, чтобы люди платили за ваше приложение, см. Marketplace payments.
Ожидается, что The Mozilla App Marketplace вскоре будет доступен. Вы также можете подписаться на the Apps Developer newsletter для получения новостей о прогрессе the Mozilla App Marketplace, а также советов о разработке приложений.
Работа в оффлайн и использование расширенных API для работы с устройствами
Современные веб-браузеры добавили много функциональности, позволяющей вашему приложению работать оффлайн или иметь доступ к возможностям устройства. Вот некоторые полезные ссылки:
- Running offline: детали и демонстрации, показывающие как использовать HTML5 AppCache
- Online and Offline Events: выявляет, когда устройство меняет оффлайн или онлайн состояния
- Using audio and video в вашем приложении
- Drawing Graphics with Canvas
- Drawing 3D Graphics with WebGL
- Using Content-Editable для создания полнофункциональных и быстрых текстовых редакторов в приложении
- Using Files from Web Applications с HTML5 File API
- Using Drag and Drop для перетаскивания данных между и внутри веб-приложений
- Detecting Device Orientation
Хранение данных локально
The localStorage API обеспечивает хранилище постоянных данных типа ключ-значение , которое вы можете использовать для отслеживания пользовательских данных между посещениями вашего приложения. Если у пользователя современный браузер, такой как Firefox 4 или позже, или Google Chrome, вы также можете использовать IndexedDB, структурированное, высокопроизводительное хранилище данных на стороне клиента.
Если ваши данные следует распространить между экземплярами приложения среди всех устройств, вам следует использовать the install_data - параметр функции install(), как описано выше.
Примеры
Некоторые примеры открытых веб-приложений:
- MozillaBall Example (использует canvas для отрисовки графики и Javascript API для установки приложения)