Главная → Программирование → by

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

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

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

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

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

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

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

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

К счастью, в то время как мы должны использовать оба, мы должны думать только о IndexedDB.Для поддержки WebSQL, мы будем использовать IndexedDB polyfill 8 .Это позволит сохранить наш код чистым и просты в обслуживании, и как только все браузеры, что мы заботимся о поддержке 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 9 , и положил его в этом файле .

/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.Чтобы сделать это, мы просто добавляем слушатель событий на upgradeneeded случае .

Формат данных, который мы будем хранить элементы списка в будет 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 обратного вызова, чтобы убедиться.Проблема в том, что мы не увеличивается номер версии, поэтому браузер не знал, что он должен запустить обратный вызов обновления .

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

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

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

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 “. Введите” элемента и нажмите Повторите это несколько раз, а затем открыть “Developer Tools” на вкладке “Ресурсы” снова.Вы должны увидеть вещи, которые вы ввели, теперь отображаются в todo хранилище объектов .

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

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);

    });

  ... 

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



 		
		
				
		
				

			  Главная   →  Программирование  →   by

Comments are closed.