Построение простой крест-браузера в автономном режиме To-Do List С IndexedDB И WebSQL

Создание приложений работать в автономном режиме может быть непростой задачей.В этой статье, Мэтью Эндрюс, ведущий разработчик за ФТ Labs, разделяет несколько идеи, которые он узнал по пути в то время как для построения приложения FT.Мэтью также быть запущен “ заставить его работать Offline” workshop ¹ На предстоящих Smashing конференции во Фрайбурге в середине сентября 2014 года — Эд .

Мы собираемся сделать простую форума первый о деле application __13 | 2 технологии HTML5.Вот то, что приложение будет делать:

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

Полная проект готов к порождения на GitHub __31 | 3 .

Какие технологии Use

В идеальном мире, мы должны использовать только один технологии баз данных клиент.К сожалению, мы должны использовать два:

IndexedDBЭто стандарт для клиентской стороны хранения и единственный вариант доступен на Firefox и Internet Explorer __46 | 4 .
WebSQLЭто рекомендуется предшественник IndexedDB и только опция доступна на текущих версиях iOS __56 | 5 (хотя прошивкой 8 наконец даст нам IndexedDB) .

Ветераны автономном первый мире сейчас может быть думал, “Но мы могли бы просто использовать localStorage __65 | 6 , которая имеет преимущества более простой API, и мы не должны были быбеспокоиться о сложности с использованием как IndexedDB и WebSQL “Хотя это технически верно, . localStorage имеет ряд problems __71 | 7 , наиболее важным из которых является то, что объем пространства для хранения доступны с нимзначительно меньше, чем IndexedDB и WebSQL .

К счастью, в то время как мы должны использовать оба, мы должны думать только о IndexedDB.Для поддержки WebSQL, мы будем использовать IndexedDB polyfill ⁸.Это будет держать наш код чистым и просты в обслуживании, и как только все браузеры, которые мы заботимся о поддержке IndexedDB изначально, можно просто удалить polyfill .

Примечание: Если вы начинаете новый проект и принять решение, использовать ли IndexedDB или WebSQL, я настоятельно рекомендую с помощью IndexedDB и polyfill.На мой взгляд, нет никаких причин, чтобы писать новый код, который интегрируется с WebSQL непосредственно .

Я пойду через все шаги, используя Google Chrome (и его инструменты разработчика), но нет никакой причины, почему вы не могли бы развивать это приложение, используя любой другой современный браузер .

1. Леса Применение и открытие Database

Мы создадим следующие файлы в одном каталоге:

/index.html
/application.js
/indexeddb.shim.min.js
/styles.css
/offline.appcache

/index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel='stylesheet' href='./styles.css' type='text/css' media='all' />
  </head>
  <body>
    <h1>Example: Todo</h1>
    <form>
      <input placeholder="Type something" />
    </form>
    <ul>
    </ul>
    <script src="./indexeddb.shim.min.js"></script>
    <script src="./application.js"></script>
  </body>
</html>

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

/indexeddb.shim.min.js

Скачать Содержание уменьшенная IndexedDB polyfill __35 | 9 | __2, и положил его в этом файле .

/styles.css

body {
  margin: 0;
  padding: 0;
  font-family: helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

h1 {
  padding: 18px 20px;
  margin: 0;
  font-size: 44px;
  border-bottom: solid 1px #DDD;
  line-height: 1em;
}

form {
  padding: 20px;
  border-bottom: solid 1px #DDD;
}

input {
  width: 100%;
  padding: 6px;
  font-size: 1.4em;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  padding: 20px;
  border-bottom: solid 1px #DDD;
  cursor: pointer;
}

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

/application.js

(function() {

  // 'global' variable to store reference to the database
  var db;

  databaseOpen(function() {
    alert("The database has been opened");
  });

  function databaseOpen(callback) {
    // Open a database, specify the name and version
    var version = 1;
    var request = indexedDB.open('todos', version);

    request.onsuccess = function(e) {
      db = e.target.result;
      callback();
    };
    request.onerror = databaseError;
  }

  function databaseError(e) {
    console.error('An IndexedDB error has occurred', e);
  }

}());

Все этот код делает это создать базу данных с indexedDB.open, а затем показать пользователю старомодный предупреждение, если она будет успешной.Каждая база данных IndexedDB нуждается в имя (в данном случае, todos) и номер версии (который я установлен на 1) .

Чтобы проверить, что это работает, откройте приложение в браузере, откройте “Инструменты разработчика” и нажмите на вкладку .

In the Resources panel, you can check whether it's working. — В “Ресурсы” панели, вы можете проверить, является ли это работать .

Нажав на треугольник рядом с “IndexedDB,” вы должны увидеть, что база данных с именем todos была создана .

2. Создание объекта Store

Как и многие форматов баз данных, которые вы, возможно, знакомы с, вы можете создать много таблиц в одной базе данных IndexedDB.Эти таблицы называются “. ObjectStores” На этом этапе мы создадим объект с именем магазин todo.Чтобы сделать это, мы просто добавляем слушатель событий на ~ 26 базы данных | события .

Формат данных, который мы будемхранить элементы списка в JavaScript будет объекты, с двумя свойствами:

timeStampЭта отметка также будет выступать в качестве нашего ключевого .
textЭто текст, который пользователь ввел .

Например:

{ timeStamp: 1407594483201, text: 'Wash the dishes' }

Теперь, /application.js Похоже, это (новый код начинается с request.onupgradeneeded):

(function() {

  // 'global' variable to store reference to the database
  var db;

  databaseOpen(function() {
    alert("The database has been opened");
  });

  function databaseOpen(callback) {
    // Open a database, specify the name and version
    var version = 1;
    var request = indexedDB.open('todos', version);

    // Run migrations if necessary
    request.onupgradeneeded = function(e) {
      db = e.target.result;
      e.target.transaction.onerror = databaseError;
      db.createObjectStore('todo', { keyPath: 'timeStamp' });
    };

    request.onsuccess = function(e) {
      db = e.target.result;
      callback();
    };
    request.onerror = databaseError;
  }

  function databaseError(e) {
    console.error('An IndexedDB error has occurred', e);
  }

}());

Это создаст хранилище объектов неправильно введенные на timeStamp и назвал todo .

? Или это

Обновив application.js, если открыть веб-приложение снова, много не бывает.Код в onupgradeneeded не работает;попробуйте добавить console.log в onupgradeneeded обратного вызова, чтобы убедиться.Проблема в том, что мы не увеличивается номер версии, поэтому браузер не знает, что ему нужно запустить обратный вызов обновления .

Как решить эту

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

Потому что это приложение не имеет каких-либо реальных пользователей все же, мы можем это исправить еще один способ: удалив базу данных.Скопируйте эту строку кода в “консоли”, а затем обновите страницу:

indexedDB.deleteDatabase('todos');

После обновления “Ресурсы” панели из “Developer Tools» должны были изменены, и теперь должны показать объект магазин, который мы добавили:

The Resources panel should now show the object store that was added. — “Ресурсы” панели должны теперь показать объект магазин, который был добавлен .

3. Добавление Items

Следующий шаг, чтобы позволить пользователю добавить элементы .

/application.js

Обратите внимание, что я опустил открытия код базы данных, в обозначено эллипсов (…) ниже:

(function() {

  // Some global variables (database, references to key UI elements)
  var db, input;

  databaseOpen(function() {
    input = document.querySelector('input');
    document.body.addEventListener('submit', onSubmit);
  });

  function onSubmit(e) {
    e.preventDefault();
    databaseTodosAdd(input.value, function() {
      input.value = '';
    });
  }

[…]

  function databaseTodosAdd(text, callback) {
    var transaction = db.transaction(['todo'], 'readwrite');
    var store = transaction.objectStore('todo');
    var request = store.put({
      text: text,
      timeStamp: Date.now()
    });

    transaction.oncomplete = function(e) {
      callback();
    };
    request.onerror = databaseError;
  }

}());

Мы добавили два бита кода здесь:

Прослушиватель событий реагирует на каждый submit событие, предотвращает действие по умолчанию это событие (который в противном случае обновите страницу), называет databaseTodosAdd с величиной input элемента, и (если пункт успешно добавлен)устанавливает значение input элемент пустым .
Функция с именем databaseTodosAdd хранит к делать пункта в локальной базе данных, наряду с отметкой времени, а затем запускает callback .

Чтобы проверить, что это работает, откройте веб-приложение снова.Введите несколько слов в input “. Enter” элемента и нажмите Повторите это несколько раз, а затем открыть “Developer Tools” на вкладке “Ресурсы” снова.Вы должны увидеть элементы, которые вы ввели, теперь появляются в todo объекта магазине .

03-step3-dev-tools-opt-500 — После добавления нескольких элементов, они должны появиться в `todo` хранилище объектов.( Просмотр большой version ¹¹)

4. Получение Items

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

/application.js

Опять же, эллипсы указывают код, который мы уже реализовали в пунктах 1, 2 и 3 .

(function() {
  // Some global variables (database, references to key UI elements)

  var db, input;
  databaseOpen(function() {

    input = document.querySelector('input');

    document.body.addEventListener('submit', onSubmit);

    databaseTodosGet(function(todos) {

      console.log(todos);

    });

   ... 

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров


 		
		
				
		
				
			  Главная   →  Программирование  → 02.09.2014  by  coding.smashingmagazine.com