Автономный Ajax с Gears, учебное пособие

Заставить Ajax работать в автономном режиме и использовать браузер в качестве прикладной платформы довольно просто. Устанавливаем плагин Gears и в качестве отправной точки используем базовые скрипты, входящие в этот учебник.

Этот учебник упрощен: наше первое приложение отображает только сообщение «Hello World!», но делает это без подключения к интернету, когда мы набираем URL демонстрационной страницы...

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

ВАЖНО: Gears - портативное решение, которое можно использовать сразу, но Google решила обратиться к HTML 5, для долгосрочного развития лучше остановить свой выбор на оффлайн-API HTML 5.

Зачем «Аяксу» офлайн ?

При использовании автономного Ajax становится возможным использовать веб-страницу в качестве графического интерфейса для локально выполняющегося скрипта. Фактически, как мы объясним во второй демонстрации, система становится способом установки приложений и их мгновенного, очень упрощенного обновления .

Важно, чтобы одно и то же приложение работало ответственно, будь то офлайн или онлайн, отсюда и интерес к объединению этих двух технологий, Gears и Ajax.

Шестерни, обзор

Для создания оффлайн-приложения необходимо использовать Gears API, который загружается вместе с плагином .
Его общая архитектура использует следующие компоненты:
- LocalServer, локальный сервер ресурсов, который устанавливает синхронизацию между данными на сервере и локальной копией.
- Рабочий пул, управляющий выполнением кода JavaScript.
- модуль рабочего стола для запуска приложения на рабочем столе.
- база данных SQLite для репликации содержимого базы данных SQL на сервере.
- библиотека JavaScript, включающая XMLHttpRequest и часы.
Кроме того, геолокационный модуль адаптирует приложение под страны.

Более общий обзор плагина см. в Google Gears.

Использование зубчатых колес

Пользователь должен скачать и установить плагин (за исключением Chrome, где он интегрирован) для посещаемого сайта, чтобы использовать Gears.
Когда плагин установлен и пользователь посещает сайт, который поддерживает эту опцию, его спрашивают, хотят ли они, чтобы сайт использовал Gears и, таким образом, включил локальное сохранение данных.
Затем посетитель может продолжить Просмотр контента этого сайта, каким он является на момент входа, в вашем браузере и без доступа в Интернет. Например, просмотрите содержимое почтового ящика в том виде, в каком оно было во время входа в систему .
Если вы что-то измените в своей учетной записи, изменения будут распространены на сайт при следующем входе.
Сервисы, подобные Docs от Google, могут предоставить доступ к Эта опция включается автоматически.

Структура страницы Gears

Страница зубчатых колес должна содержать некоторые сценарии и, возможно, иметь область для отображения информации о состоянии зубчатых колес.

Включая сценарии

<script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript" src="gears_offline.js"></script>
<script type="text/javascript" src="ajax-gears.js"></script>

gears_init.js инициализирует Gears, но не готовится к офлайн-режиму.
gears_offline.js инициализирует автономный режим или возвращается в оперативный режим, предлагая пользователю выбор; оно связано с кнопками.
ajax-gears.js - наш скрипт для объединения Ajax и Gears.

Текст страницы

<body>
<div id="textOut"></div>
<button onClick="createStore()"> Go offline </button>
 <button onClick="removeStore()"> Go back online </button>
</body>

Страница содержит две кнопки. Они вызывают функции createStore () и removeStore () для перехода в оффлайн или обратно в онлайн. В поле textOut отображаются сообщения о состоянии зубчатых колес.

Вариант: Раз уж мы добавили скрипт, то выбрали инициализацию Gears вызовом из него функции init (). В противном случае нам пришлось бы добавить атрибут к тегу <body> :

<body onload="init">

Автоматический автономный режим

Можно запустить функцию createStore () сразу после инициализации Gears и убрать две кнопки, так что приложение всегда будет работать в автономном режиме. Но если вы хотите иметь возможность обновлять скрипты и другие ресурсы, кнопки необходимы.

The Gears Code

Эту filegears_init.js предоставляет Google, и программисту не нужно об этом беспокоиться.
Файл gears_offline.js представляет собой модифицированную версию файла go_offline.js Google.

Функции и переменные в gears_offline.js

в этом()

Создается локальное хранилище, управляемое Gears.

createStore ()

Документы хранятся локально. Это зависит от файла манифеста, в котором перечислены затронутые файлы и сценарии.

removeStore ()

Он перенаправляет пользователя на живой сайт и удаляет локальное пространство.

В дополнение к этим функциям файл содержит переменные STORE_NAME и MANIFEST_FILENAME. Вторая содержит имя файла манифеста, по умолчанию manifest.json.

Файл manifest.json

В примере он содержит следующие строки:

{
 "betaManifestVersion": 1,
 "version": "1.0",
 "entries": [
 { "url": "ajax-offline-demo.html"},
 { "url": "gears_offline.js"},
 { "url": "gears_init.js"},
 { "url": "ajax-gears.js"}
 ]
}

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

Кодекс Аякса

При установке Gears используется код Ajax, включенный в фреймворк Gears. В противном случае мы должны вернуться к классическому Ajax-коду, используя распознанный браузером объект XMLHttpRequest.

Для этого определяем функцию, создающую экземпляр на основе доступного объекта и браузера:

function gearsCreate()
{
     var xhr = google.gears.factory.create('beta.httprequest');
     if(!xhr)
     {
         try  {   xhr = new ActiveXObject('Msxml2.XMLHTTP');   }
         catch (err1) 
         {
               try { xhr = new ActiveXObject('Microsoft.XMLHTTP');  }
               catch (err2) 
               {
                  try  {  xhr = new XMLHttpRequest();   }
                  catch (err3) 
                  {
                     xhr = false;
                  }
               }
         }
   }
   return xhr;
}

Что касается атрибутов и методов объекта, то атрибуты Gears, XMLHttpRequest и ActiveX совпадают, и поэтому остальная часть кода является общей для всех трех случаев.

Пример использования GET

Загружаем текстовый файл с именем «xhr-demo.txt».

var xhr = createXHR();
xhr.open('GET', "xhr-demo.txt");
xhr.onreadystatechange = function() 
{
      if (xhr.readyState == 4) 
      {
           alert(xhr.responseText);
      }
};
xhr.send();

Вызов createXHR создает экземпляр объекта Gears/XMLHttpRequest/ActiveX, назначенный переменной xhr.
Содержимое файла загружается в xhr.responseText и отображается в окне предупреждения.

Минимальная демонстрация с помощью метода GET

Для начала просто определяем Ajax-приложение, которое просто загружает содержимое файла методом GET и отображает содержимое на странице.

Используем функцию createXHR () и функцию gearsGet (), которая повторяет предыдущий код, но которой в качестве параметров даем имя извлекаемого файла. load и имя функции, которая обрабатывает содержимое этого файла после загрузки.

function gearsGet(xhr, fun, filename)
{ 
     xhr.open('GET', filename);
     xhr.onreadystatechange = function() 
     {
         if (xhr.readyState == 4) 
         {
               fun(xhr.responseText);
         }
     };
    xhr.send();
}
function storing(result)
{
     var storage = document.getElementById("storage");
     storage.innerHTML = result;
}
function demo()
{
     init();  // starts gears
     var xhr = gearsCreate();    // creates an XHR object 
     gearsGet(xhr, storing, 'xhr-demo.txt');    // loads a file on the server
}   

window.onload=demo;

Функция demo () инициализирует Gears, создает экземпляр и вызывает функцию gearsGet () с именем загружаемого файла и именем сохраняющей функции для обработки содержимого.

Функция storing () отображает содержимое файла в выделенной области страницы с хранилищем ID.

Галерея роботов в офлайне

Эта демонстрация, в которой отображается фотогалерея, является началом оффлайнового веб-приложения, а также началом нового способа установки программного обеспечения на рабочий стол .
Вот как будут работать приложения в ближайшем будущем:

  1. Подключаемся к сайту дистрибьютора.
  2. Закладываем страницу приложения.
  3. Просим перейти в офлайн-режим, который предписывает Gears локально копировать все файлы и скрипты приложения. При этом галерея фотографирует и отображает скрипты.
  4. Затем мы можем получить доступ к галерее из Вы можете обновить галерею в любое время, нажав на ссылку с закладкой.
  5. Чтобы обновить галерею, переключитесь обратно в оперативный режим, а затем вернитесь в автономный режим для новой синхронизации, которая заменяет и добавляет файлы.

Фактически это равносильно переходу на сайт дистрибьютора и загрузке программного обеспечения, с преимуществом упрощенного обновления.

Разработчик должен поместить список всех изображений галереи в файл манифеста. Мы переименовали файл gallery.json.

Также необходимо изменить имя, присвоенное переменной MANIFEST_FILENAME в файле gears_offline.js. Но нет необходимости изменять файл; просто переназначить переменную в самом скрипте. приложение, gallery.js.

Это приложение использует Ajax для загрузки изображений в память во время их просмотра пользователем, устраняя задержки. Задержка минимальна, когда приложение находится в автономном режиме, но нашему приложению необходимо работать как в автономном режиме, так и в сети.

Сценарий вызывает функцию preloading () для каждого изображения в галерее. Он загружает изображение асинхронно и запускается при загрузке страницы.

Функция enlarge () отображает изображение в большом формате в специальном <div>, названном bigview.

function enlarge(element)
{
var name = element.src;

name = localFilename(name); 
name = name.slice(6); // remove the "thumb-" leaves 
name = "robots/" + name; // restore path 

var str = "<img src='" + name + "' >"; 
document.getElementById("bigview").innerHTML = str;
}

Функция demo () использует файл gallery.js

сценарий 
function demo()
{ 
MANIFEST_FILENAME = "gallery.json"; // changing manifest file 
init(); // start gears 
preloading("robots/asimo.jpg"); 
preloading("robots/manoi.jpg"); 
preloading("robots/nao.jpg");
preloading("robots/robonova.jpg");
preloading("robots/repliee.jpg");
}

window.onload=demo; // launched when the page is displayed

Демонстрация и файлы для загрузки

Проблемы и ограничения

В случае проблем очистите буфер. В Firefox перейдите в Tools -> Clear My Traces -> Check Cache. Снимите флажки с других сохраненных данных, если вы не хотите их удалять. Затем подтвердите.
Для Internet Explorer можно использовать панель управления операционной системы.

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

Обе демонстрации были протестированы и работают, но если у вас есть несколько приложений в автономном режиме одновременно, они могут не работать.

POST-метод Ajax может работать, но серверный PHP-скриптsr для обработки полученных данных не синхронизируется Gears; приложение работало бы только онлайн, как указано в FAQ по Gears.

Инструменты и ссылки