JavaScript. Подробное руководство, 6-е издание, Флэнаган Дэвид

JavaScript. Подробное руководство, 6-е издание

на обложку

Флэнаган Дэвид

Шрифт:

Чтобы выполняться в автономном режиме, веб-приложение должно иметь возможность выяснить, работает ли оно в автономном режиме, и определять моменты подключения и отключения от сети. Проверить режим работы броузера можно с помощью свойства

navigator.onLine

. А определить изменение состояния подключения можно, зарегистрировав обработчики событий «online» и «offline» в объекте

Window

Эта глава завершается простым примером автономного веб-приложения, демонстрирующим использование этих приемов. Приложение называется

PermaNote

– это простое приложение

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

localStorage

и выгружает его на сервер, когда соединение с Интернетом будет доступно. [56]

Идея этого примера была подсказана приложением Halfnote, написанным Аароном Будманом (Aaron Boodman). Приложение Halfnote было одним из первых автономных веб-приложений.

Приложение 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.6. permanote.html

<!DOCTYPE HTML>

<html manifest="permanote.appcache">

<head>

<title>PeflaKTop PermaNote</title>

<script src=”permanote. js"x/script>

<style>

#editor { width: 100%: height: 250px; }

#statusline { width: 100%: }

</style>

</head>

<body>

<div id="toolbar">

<button id="savebutton" onclick="save">Сохранить</button>

<button onclick="sync">Синхронизировать</button>

<button onclick="applicationCache.update">0бновить

пpилoжeниe</button>

</div>

<textarea id="editor"></textarea>

<div id="statusline"></div>

</body>

</html>

Наконец, в примере 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