Создание приложений работать в автономном режиме может быть непростой задачей.В этой статье, Мэтью Эндрюс, ведущий разработчик за ФТ Labs, разделяет несколько идеи, которые он узнал по пути в то время как для построения приложения FT.Мэтью также быть запущен “ заставить его работать Offline” workshop 1 На предстоящих 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 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 __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
) .
Чтобы проверить, что это работает, откройте приложение в браузере, откройте “Инструменты разработчика” и нажмите на вкладку .
Нажав на треугольник рядом с “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» должны были изменены, и теперь должны показать объект магазин, который мы добавили:
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
объекта магазине .
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);
});
...
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров