Как стать автором
Обновить

Google Gears — ускоряем ваш сайт

Время на прочтение8 мин
Количество просмотров1.8K
Google Gearsоткрытое программное обеспечение от Google (бета, лицензия BSD), позволяющее использование веб-приложений с помощью браузеров Mozilla Firefox и Internet Explorer под GNU/Linux, Mac OS и Microsoft Windows в режиме оффлайн.

Специальный плагин заставляет браузер работать с локальным кешем страниц (на основе SQLite), периодически синхронизируя кеш с онлайн источником.

Google gears представляет собой AJAX-API и работает только с веб-сайтами, специально поддерживающими этот сервис. (Источник)

Так вот, почитав немного документацию, я решил интегрировать такую вещь в один сайт. Итак начнем.



Итак, сначала нам потребуется gears_init.js. Что б не инклудить его отдельно на страницу, я просто допишу содержимое в скрипт

  1. myGears = {
  2.  
  3.  
  4.  
  5.    createStore : function() {
  6.  
  7.       if ( 'undefined' == typeof google || ! google.gears ) return;
  8.  
  9.  
  10.  
  11.       if ( 'undefined' == typeof localServer )
  12.  
  13.          localServer = google.gears.factory.create("beta.localserver");
  14.  
  15.  
  16.  
  17.       store = localServer.createManagedStore(this.storeName());
  18.  
  19.       store.manifestUrl = "gears-manifest.php";
  20.  
  21.       store.checkForUpdate();
  22.  
  23.       this.window();
  24.  
  25.    },
  26.  
  27.  
  28.  
  29.    getPermission : function() {
  30.  
  31.       if ( 'undefined' != typeof google && google.gears ) {
  32.  
  33.          if ( ! google.gears.factory.hasPermission )
  34.  
  35.             google.gears.factory.getPermission( 'MySite', 'images/logo.png' );
  36.  
  37.  
  38.  
  39.          try {
  40.  
  41.             this.createStore();
  42.  
  43.          } catch(e) {} // отмена, отказ от пользователя
  44.  
  45.       }
  46.  
  47.    },
  48.  
  49.  
  50.  
  51.    storeName : function() {
  52.  
  53.       var name = window.location.protocol + window.location.host;
  54.  
  55.  
  56.          // gears beta не поддерживает эти символы
  57.       name = name.replace(/[\/\\:*?<>|;,]+/g, '_');
  58.  
  59.       name = name.substring(0, 64); // максимальная длинна - 64 символа
  60.  
  61.  
  62.  
  63.       return name;
  64.  
  65.    },
  66.  
  67.  
  68.  
  69.    window : function(show) {
  70.  
  71.       var t = this,
  72.  
  73.         msg1 = t.I('gears-msg1'),
  74.  
  75.         msg2 = t.I('gears-msg2'),
  76.  
  77.         msg3 = t.I('gears-msg3'),
  78.  
  79.         num = t.I('gears-upd-number'),
  80.  
  81.         wait = t.I('gears-wait');
  82.  
  83.  
  84.  
  85.       if ( ! msg1 ) return;
  86.  
  87.  
  88.  
  89.       if ( 'undefined' != typeof google && google.gears ) {
  90.  
  91.          if ( google.gears.factory.hasPermission ) {
  92.  
  93.             msg1.style.display = msg2.style.display = 'none';
  94.  
  95.             msg3.style.display = 'block';
  96.  
  97.  
  98.  
  99.             if ( 'undefined' == typeof store )
  100.  
  101.                t.createStore();
  102.  
  103.  
  104.  
  105.             store.oncomplete = function(){wait.innerHTML = (' Синхронизация завершена' );};
  106.  
  107.             store.onerror = function(){wait.innerHTML = ('Ошибка : ' + store.lastErrorMessage);};
  108.  
  109.             store.onprogress = function(e){if(num) num.innerHTML = (' ' + e.filesComplete + ' / ' + e.filesTotal);};
  110.  
  111.          } else {
  112.  
  113.             msg1.style.display = msg3.style.display = 'none';
  114.  
  115.             msg2.style.display = 'block';
  116.  
  117.          }
  118.  
  119.       }
  120.  
  121.  
  122.  
  123.       if ( show ) t.I('gears-info-box').style.display = 'block';
  124.  
  125.    },
  126.  
  127.  
  128.  
  129.    I : function(id) {
  130.  
  131.       return document.getElementById(id);
  132.  
  133.    }
  134.  
  135. };
  136.  
  137. //кусок кода с gears_init.js
  138.  
  139. //Инициализация gears
  140.  
  141. (function() {
  142.  
  143.    if ( 'undefined' != typeof google && google.gears ) return;
  144.  
  145.  
  146.  
  147.    var gf = false;
  148.  
  149.    if ( 'undefined' != typeof GearsFactory ) {
  150.  
  151.       gf = new GearsFactory();
  152.  
  153.    } else {
  154.  
  155.       try {
  156.  
  157.          gf = new ActiveXObject('Gears.Factory');
  158.  
  159.          if ( factory.getBuildInfo().indexOf('ie_mobile') != -1 )
  160.  
  161.             gf.privateSetGlobalObject(this);
  162.  
  163.       } catch (e) {
  164.  
  165.          if ( ( 'undefined' != typeof navigator.mimeTypes ) && navigator.mimeTypes['application/x-googlegears'] ) {
  166.  
  167.             gf = document.createElement("object");
  168.  
  169.             gf.style.display = "none";
  170.  
  171.             gf.width = 0;
  172.  
  173.             gf.height = 0;
  174.  
  175.             gf.type = "application/x-googlegears";
  176.  
  177.             document.documentElement.appendChild(gf);
  178.  
  179.          }
  180.  
  181.       }
  182.  
  183.    }
  184.  
  185.  
  186.  
  187.    if ( ! gf ) return;
  188.  
  189.    if ( 'undefined' == typeof google ) google = {};
  190.  
  191.    if ( ! google.gears ) google.gears = { factory : gf };
  192.  
  193. })();
* 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' );

Если у нас нет прав для хранения файлов для этого сайта — запрашиваем. Передается два параметра — Имя сайта и логотип. Вот как оно приблизительно выглядит

Gears

И если пользователь согласится — создаем хранилище выше перечисленным методом createStore.

storeName — как уже и говорилось выше генерируем имя для хранилища.

window — работа с окошками. Их у нас будет 3 типа:

— gears ещё не установлен;

— gears установлен, но сайт ещё не добавлен для работы в нем;

— gears установлен и добавлен для работы, просто синхронизируем с сервером.

Для этого у нас будет 3 дива (2 скрыты по умолчанию, третий — нет). Они буду находится в главном, который будет появляться при вызове window.

Вот сам HTML:

  1. <div id=«gears-info-box» class=«info-box» style=«display:none;»>
  2.  
  3. <div id=«gears-msg1»><button class=«button» onclick=«window.location = 'http://gears.google.com/?action=install&amp;return=http%3A%2F%2Fyousite%2F';»>Установить сейчас</button>
  4.  
  5. <button class=«button» style=«margin-left:10px;» onclick=«document.getElementById('gears-info-box').style.display='none';»>Отмена</button></div>
  6.  
  7. <div id=«gears-msg2» style=«display:none;»>
  8.  
  9. <div class=«submit»><button class=«button» onclick=«myGears.getPermission();»>Включить Gears</button>
  10.  
  11. <button class=«button» style=«margin-left:10px;» onclick=«document.getElementById('gears-info-box').style.display='none';»>Отмена</button></div>
  12.  
  13. <div id=«gears-msg3» style=«display:none;»>
  14.  
  15. Статус локального хранилища: <span id=«gears-wait»><span style=«color: #ff0000;»>Пожалуйста подождите! Идет загрузка файлов:</span> </span>
  16.  
  17. <button class=«button» onclick=«document.getElementById('gears-info-box').style.display='none';»>Закрыть</button></div>
  18.  
  19. </div>
  20.  
  21. </div>
* This source code was highlighted with Source Code Highlighter.


Теперь займенся хранилищем на сервере. Это проще простого. Если вы заметили у нас в коде создания хранилища был такой кусок кода

store.manifestUrl = "gears-manifest.php";

Как раз это указывает к какому файлу обращатся на сервер ( gears-manifest.php ). В нем мы должны перечислить файлы, что будем кешировать (картинки, скрипты, статические файлы). Должен он выглядеть приблизительно так

{

"betaManifestVersion": 1,

"version": "версия хранилища",

"entries": [

{ "url" : "images/morgue/bg01.jpg" },

{ "url" : "images/bar/button.jpg" }

]}


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

  1. ...
  2.  
  3. $defaults = $man_version = '';
  4.  
  5. foreach ( $list_files as $script ) {
  6.  
  7.     $defaults .= '{ "url": "'. $src. '?ver='. $ver. '" },'. "\n";
  8.  
  9.     $man_version .= $ver;
  10.  
  11. }
  12.  
  13.  
  14.  
  15. $man_version = md5($man_version);
  16.  
  17.  
  18.  
  19. header( 'Expires: Wed, 11 Jan 1984 05:00:00 GMT' );
  20.  
  21. header( 'Last-Modified: '. gmdate( 'D, d M Y H:i:s' ). ' GMT' );
  22.  
  23. header( 'Cache-Control: no-cache, must-revalidate, max-age=0' );
  24.  
  25. header( 'Pragma: no-cache' );
  26.  
  27. header( 'Content-Type: application/x-javascript; charset=UTF-8' );
  28.  
  29. ?>
  30.  
  31. {
  32.  
  33. "betaManifestVersion": 1,
  34.  
  35. "version": "&lt;?php echo $man_version; ?&gt;_20080828",
  36.  
  37. "entries": [
  38.  
  39. <?php echo $defaults; ?>
  40.  
  41. ]}

Если у меня в каталогах появятся новые картинки, или изменится версия css файла — gears загрузит измененное. Если сменит version — он перезагрузит все хранилище.

Вот и все. Удачи в освоении.

Кросспост из моего блога
Теги:
Хабы:
+35
Комментарии25

Публикации