Google Gears — открытое программное обеспечение от Google (бета, лицензия BSD), позволяющее использование веб-приложений с помощью браузеров Mozilla Firefox и Internet Explorer под GNU/Linux, Mac OS и Microsoft Windows в режиме оффлайн.
Специальный плагин заставляет браузер работать с локальным кешем страниц (на основе SQLite), периодически синхронизируя кеш с онлайн источником.
Google gears представляет собой AJAX-API и работает только с веб-сайтами, специально поддерживающими этот сервис. (Источник)
Так вот, почитав немного документацию, я решил интегрировать такую вещь в один сайт. Итак начнем.
Итак, сначала нам потребуется gears_init.js. Что б не инклудить его отдельно на страницу, я просто допишу содержимое в скрипт
Итак, поясню по порядку.
createStore — понятно по названию, данный метод создает хранилище для наших файлов.
Проверяем что Gears у нас установлен.
Инициализируем локальное хранилище и даем ему имя (имя создает метод storeName)
Синхронизируем кеш с онлайн источником.
Показываем окно (окно с сообщениями).
getPermission — с помощью этого метода будем запрашивать разрешения использовать Gears для нашего сайта
Если у нас нет прав для хранения файлов для этого сайта — запрашиваем. Передается два параметра — Имя сайта и логотип. Вот как оно приблизительно выглядит

И если пользователь согласится — создаем хранилище выше перечисленным методом createStore.
storeName — как уже и говорилось выше генерируем имя для хранилища.
window — работа с окошками. Их у нас будет 3 типа:
— gears ещё не установлен;
— gears установлен, но сайт ещё не добавлен для работы в нем;
— gears установлен и добавлен для работы, просто синхронизируем с сервером.
Для этого у нас будет 3 дива (2 скрыты по умолчанию, третий — нет). Они буду находится в главном, который будет появляться при вызове window.
Вот сам HTML:
Теперь займенся хранилищем на сервере. Это проще простого. Если вы заметили у нас в коде создания хранилища был такой кусок кода
Как раз это указывает к какому файлу обращатся на сервер ( gears-manifest.php ). В нем мы должны перечислить файлы, что будем кешировать (картинки, скрипты, статические файлы). Должен он выглядеть приблизительно так
Я весь код не выложу, он огромный, но главное в нем — рекурсивно пройтись по каталогам, выбрать картинки и каскадные таблицы стилей.
Если у меня в каталогах появятся новые картинки, или изменится версия css файла — gears загрузит измененное. Если сменит version — он перезагрузит все хранилище.
Вот и все. Удачи в освоении.
Кросспост из моего блога
Специальный плагин заставляет браузер работать с локальным кешем страниц (на основе SQLite), периодически синхронизируя кеш с онлайн источником.
Google gears представляет собой AJAX-API и работает только с веб-сайтами, специально поддерживающими этот сервис. (Источник)
Так вот, почитав немного документацию, я решил интегрировать такую вещь в один сайт. Итак начнем.
Итак, сначала нам потребуется gears_init.js. Что б не инклудить его отдельно на страницу, я просто допишу содержимое в скрипт
- myGears = {
-
-
-
- createStore : function() {
-
- if ( 'undefined' == typeof google || ! google.gears ) return;
-
-
-
- if ( 'undefined' == typeof localServer )
-
- localServer = google.gears.factory.create("beta.localserver");
-
-
-
- store = localServer.createManagedStore(this.storeName());
-
- store.manifestUrl = "gears-manifest.php";
-
- store.checkForUpdate();
-
- this.window();
-
- },
-
-
-
- getPermission : function() {
-
- if ( 'undefined' != typeof google && google.gears ) {
-
- if ( ! google.gears.factory.hasPermission )
-
- google.gears.factory.getPermission( 'MySite', 'images/logo.png' );
-
-
-
- try {
-
- this.createStore();
-
- } catch(e) {} // отмена, отказ от пользователя
-
- }
-
- },
-
-
-
- storeName : function() {
-
- var name = window.location.protocol + window.location.host;
-
-
- // gears beta не поддерживает эти символы
- name = name.replace(/[\/\\:*?<>|;,]+/g, '_');
-
- name = name.substring(0, 64); // максимальная длинна - 64 символа
-
-
-
- return name;
-
- },
-
-
-
- window : function(show) {
-
- var t = this,
-
- msg1 = t.I('gears-msg1'),
-
- msg2 = t.I('gears-msg2'),
-
- msg3 = t.I('gears-msg3'),
-
- num = t.I('gears-upd-number'),
-
- wait = t.I('gears-wait');
-
-
-
- if ( ! msg1 ) return;
-
-
-
- if ( 'undefined' != typeof google && google.gears ) {
-
- if ( google.gears.factory.hasPermission ) {
-
- msg1.style.display = msg2.style.display = 'none';
-
- msg3.style.display = 'block';
-
-
-
- if ( 'undefined' == typeof store )
-
- t.createStore();
-
-
-
- store.oncomplete = function(){wait.innerHTML = (' Синхронизация завершена' );};
-
- store.onerror = function(){wait.innerHTML = ('Ошибка : ' + store.lastErrorMessage);};
-
- store.onprogress = function(e){if(num) num.innerHTML = (' ' + e.filesComplete + ' / ' + e.filesTotal);};
-
- } else {
-
- msg1.style.display = msg3.style.display = 'none';
-
- msg2.style.display = 'block';
-
- }
-
- }
-
-
-
- if ( show ) t.I('gears-info-box').style.display = 'block';
-
- },
-
-
-
- I : function(id) {
-
- return document.getElementById(id);
-
- }
-
- };
-
- //кусок кода с gears_init.js
-
- //Инициализация gears
-
- (function() {
-
- if ( 'undefined' != typeof google && google.gears ) return;
-
-
-
- var gf = false;
-
- if ( 'undefined' != typeof GearsFactory ) {
-
- gf = new GearsFactory();
-
- } else {
-
- try {
-
- gf = new ActiveXObject('Gears.Factory');
-
- if ( factory.getBuildInfo().indexOf('ie_mobile') != -1 )
-
- gf.privateSetGlobalObject(this);
-
- } catch (e) {
-
- if ( ( 'undefined' != typeof navigator.mimeTypes ) && navigator.mimeTypes['application/x-googlegears'] ) {
-
- gf = document.createElement("object");
-
- gf.style.display = "none";
-
- gf.width = 0;
-
- gf.height = 0;
-
- gf.type = "application/x-googlegears";
-
- document.documentElement.appendChild(gf);
-
- }
-
- }
-
- }
-
-
-
- if ( ! gf ) return;
-
- if ( 'undefined' == typeof google ) google = {};
-
- if ( ! google.gears ) google.gears = { factory : gf };
-
- })();
* This source code was highlighted with Source Code Highlighter.
Итак, поясню по порядку.
createStore — понятно по названию, данный метод создает хранилище для наших файлов.
if ( 'undefined' == typeof google || ! google.gears ) return;
Проверяем что Gears у нас установлен.
if ( 'undefined' == typeof localServer )
localServer = google.gears.factory.create("beta.localserver");
store = localServer.createManagedStore(this.storeName());
Инициализируем локальное хранилище и даем ему имя (имя создает метод storeName)
store.checkForUpdate();
Синхронизируем кеш с онлайн источником.
this.window();
Показываем окно (окно с сообщениями).
getPermission — с помощью этого метода будем запрашивать разрешения использовать Gears для нашего сайта
if ( ! google.gears.factory.hasPermission )
google.gears.factory.getPermission( 'MySite', 'images/logo.png' );
Если у нас нет прав для хранения файлов для этого сайта — запрашиваем. Передается два параметра — Имя сайта и логотип. Вот как оно приблизительно выглядит

И если пользователь согласится — создаем хранилище выше перечисленным методом createStore.
storeName — как уже и говорилось выше генерируем имя для хранилища.
window — работа с окошками. Их у нас будет 3 типа:
— gears ещё не установлен;
— gears установлен, но сайт ещё не добавлен для работы в нем;
— gears установлен и добавлен для работы, просто синхронизируем с сервером.
Для этого у нас будет 3 дива (2 скрыты по умолчанию, третий — нет). Они буду находится в главном, который будет появляться при вызове window.
Вот сам HTML:
* This source code was highlighted with Source Code Highlighter.
- <div id=«gears-info-box» class=«info-box» style=«display:none;»>
- <div id=«gears-msg1»><button class=«button» onclick=«window.location = 'http://gears.google.com/?action=install&return=http%3A%2F%2Fyousite%2F';»>Установить сейчас</button>
- <button class=«button» style=«margin-left:10px;» onclick=«document.getElementById('gears-info-box').style.display='none';»>Отмена</button></div>
- <div id=«gears-msg2» style=«display:none;»>
- <div class=«submit»><button class=«button» onclick=«myGears.getPermission();»>Включить Gears</button>
- <button class=«button» style=«margin-left:10px;» onclick=«document.getElementById('gears-info-box').style.display='none';»>Отмена</button></div>
- <div id=«gears-msg3» style=«display:none;»>
- Статус локального хранилища: <span id=«gears-wait»><span style=«color: #ff0000;»>Пожалуйста подождите! Идет загрузка файлов:</span> </span>
- <button class=«button» onclick=«document.getElementById('gears-info-box').style.display='none';»>Закрыть</button></div>
- </div>
- </div>
Теперь займенся хранилищем на сервере. Это проще простого. Если вы заметили у нас в коде создания хранилища был такой кусок кода
store.manifestUrl = "gears-manifest.php";
Как раз это указывает к какому файлу обращатся на сервер ( gears-manifest.php ). В нем мы должны перечислить файлы, что будем кешировать (картинки, скрипты, статические файлы). Должен он выглядеть приблизительно так
{
"betaManifestVersion": 1,
"version": "версия хранилища",
"entries": [
{ "url" : "images/morgue/bg01.jpg" },
{ "url" : "images/bar/button.jpg" }
]}
Я весь код не выложу, он огромный, но главное в нем — рекурсивно пройтись по каталогам, выбрать картинки и каскадные таблицы стилей.
- ...
- $defaults = $man_version = '';
- foreach ( $list_files as $script ) {
- $defaults .= '{ "url": "'. $src. '?ver='. $ver. '" },'. "\n";
- $man_version .= $ver;
- }
- $man_version = md5($man_version);
- header( 'Expires: Wed, 11 Jan 1984 05:00:00 GMT' );
- header( 'Last-Modified: '. gmdate( 'D, d M Y H:i:s' ). ' GMT' );
- header( 'Cache-Control: no-cache, must-revalidate, max-age=0' );
- header( 'Pragma: no-cache' );
- header( 'Content-Type: application/x-javascript; charset=UTF-8' );
- ?>
- {
- "betaManifestVersion": 1,
- "version": "<?php echo $man_version; ?>_20080828",
- "entries": [
- <?php echo $defaults; ?>
- ]}
Если у меня в каталогах появятся новые картинки, или изменится версия css файла — gears загрузит измененное. Если сменит version — он перезагрузит все хранилище.
Вот и все. Удачи в освоении.
Кросспост из моего блога