Приложение PermaNote дает пользователю создать единственную заметку и игнорирует проблемы аутентификации и авторизации - предполагается, что сервер обладает некоторым механизмом, позволяющим ему отличать одного пользователя от другого без использования какой-либо страницы входа. Реализация приложения PermaNote состоит из трех файлов. В примере 20.5 приводится содержимое файла объявления. В нем перечислены остальные два файла и указывается, что URL «note» не должен кэшироваться: этот URL-адрес используется для чтения и записи заметки на сервере.
Пример 20.5. permanote.appcache
CACHE MANIFEST
# PermaNote v8
permanote.html
permanote.js
NETWORK:
note
В
примере 20.6 приводится второй файл приложения PermaNote: это HTML-файл, который реализует пользовательский интерфейс простого редактора. Он отображает элемент <textarea> с панелью инструментов вдоль верхнего края и строкой состояния для сообщений вдоль нижнего края. Обратите внимание, что тег <html> имеет атрибут manifest.
Наконец, в примере 20.7 приводится сценарий на языке JavaScript, который обеспечивает работу веб-приложения PermaNote. Он определяет функцию
status
для отображения сообщений в строке состояния, функцию
save
– для сохранения текущей версии заметки на сервере и функцию
sync
– для синхронизации серверной и локальной копии заметки. Функции
save
и
sync
используют
приемы управления протоколом HTTP, описанные в главе 18. (Интересно отметить, что функция
save
использует HTTP-метод «PUT» вместо более типичного для таких случаев метода «POST».)
Помимо этих трех основных функций в примере 20.7 определяются также обработчики событий. Чтобы обеспечить синхронизацию локальной и серверной копий заметки, приложению требуется довольно много обработчиков событий:
onload
Пытается загрузить заметку с сервера, если там хранится более новая ее версия, и по завершении синхронизации разрешает доступ к окну редактора. Функции
save
и
sync
выполняют HTTP-запросы и регистрируют обработчик события «onload» в объекте
XMLHttpRequest
, чтобы определить момент, когда выгрузка или загрузка будут завершены.
onbeforeunload
Сохраняет текущую версию заметки на сервере, если она еще не была выгружена.
oninput
Всякий раз, когда текст в элементе
<textarea>
изменяется, он сохраняется в объекте
localStorage
, и запускается таймер. Если пользователь не продолжит редактирование в течение 5 секунд, заметка будет выгружена на сервер.
onoffline
Когда броузер переключается в автономный режим, в строке состояния выводится сообщение.
ononline
Когда броузер подключается к сети, выполняется проверка наличия на сервере более новой версии заметки и выполняется сохранение текущей версии.
onupdateready
Если появилась новая версия приложения, выводится сообщение в строке состояния, сообщающее об этом пользователю.
onnoupdate
Если приложение не изменилось, сообщает пользователю, что он или она работает с текущей версией.
А теперь, после краткого обзора логики работы приложения PermaNote, в примере 20.7 приводится ее реализация.
Пример 20.7'. permanote.js
// Некоторые необходимые переменные
var editor, statusline, savebutton, idletimer;
// При первой загрузке приложения
window.onload = function {
// Инициализировать локальное хранилище, если это первый запуск
if (localStorage.note == null)
localStorage.note = "";
if (localStorage.lastModified == null) localStorage.lastModified = 0;
if (localStorage.lastSaved == null) localStorage.lastSaved = 0;