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

Метод

<b>swapCache()</b>
немного сложнее. Напомню, что, когда броузер загрузит и сохранит в кэше обновленную версию приложения, пользователь по-прежнему будет работать со старой версией. Он увидит новую версию, только когда перезагрузит приложение. Если пользователь не сделает этого, старая версия должна работать вполне корректно. И отметьте, что старая версия может по-прежнему загружать ресурсы из кэша: она, например, может использовать объект
<b>XMLHttpRequest</b>
для загрузки файлов, и эти файлы будут извлекаться из старой версии кэша. То есть, вообще говоря, броузер должен сохранять старую версию кэша, пока пользователь не перезагрузит приложение.

Метод

<b>swapCache()</b>
сообщает броузеру, что он может удалить старый кэш и удовлетворять все последующие запросы из нового кэша. Имейте в виду, что это не приводит к перезагрузке приложения: HTML-файлы, изображения, сценарии и другие ресурсы, которые уже были загружены, останутся старыми. Но на все последующие запросы будут возвращаться ресурсы из нового кэша. Это может вызвать конфликт между версиями, и в общем случае использовать этот метод не рекомендуется, если только вы специально не предусмотрели такую возможность. Представьте, например, приложение, которое не делает ничего и отображает экранную заставку, пока броузер проверяет файл объявления. Когда приложение получает событие «noupdate», оно продолжает работу и загружает начальную страницу. Если приложение получает событие «downloading», оно отображает соответствующий индикатор хода выполнения операции, пока обновляется кэш. И когда приложение получает событие «updateready», оно вызывает метод
<b>swapCache()</b>
и затем загружает обновленную начальную страницу из свежей версии в кэше.

Обратите внимание, что вызывать метод

<b>swapCache()</b>
имеет смысл, только когда свойство
<b>status</b>
имеет значение
<b>ApplicationCache.UPDATEREADY</b>
или
<b>ApplicationCache.OBSOLETE</b>
. (Вызов метода
<b>swapCache(),</b>
когда свойство
<b>status</b>
имеет значение
<b>OBSOLETE</b>
сразу же удалит старую версию кэша, и все ресурсы будут загружаться из сети.) Если вызвать метод
<b>swapCache(),</b>
когда свойство status имеет любое другое значение, это приведет к исключению.

20.4.3. Автономные веб-приложения

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

<b>localStorage</b>
и затем выгружать данные, как только сеть будет доступна. Реализация синхронизации данных между локальным хранилищем и сервером может оказаться самым сложным этапом подготовки веб-приложения к работе в автономном режиме, особенно когда пользователь может обращаться к нескольким источникам данных.

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

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

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

<b>PermaNote</b>
- это простое приложение управления заметками, которое сохраняет текст, введенный пользователем, в объекте
<b>localStorage</b>
и выгружает его на сервер, когда соединение с Интернетом будет доступно. [56]

Приложение PermaNote дает пользователю создать единственную заметку и игнорирует проблемы аутентификации и авторизации - предполагается, что сервер обладает некоторым механизмом, позволяющим ему отличать одного пользователя от другого без использования какой-либо страницы входа. Реализация приложения PermaNote состоит из трех файлов. В примере 20.5 приводится содержимое файла объявления. В нем перечислены остальные два файла и указывается, что URL «note» не должен кэшироваться: этот URL-адрес используется для чтения и записи заметки на сервере.

Пример 20.5. permanote.appcache

<b>CACHE MANIFEST</b>

<b># PermaNote v8</b>

<b>permanote.html</b>

<b>permanote.js</b>

<b>NETWORK:</b>

<b>note</b>

В примере 20.6 приводится второй файл приложения PermaNote: это HTML-файл, который реализует пользовательский интерфейс простого редактора. Он отображает элемент <textarea> с панелью инструментов вдоль верхнего края и строкой состояния для сообщений вдоль нижнего края. Обратите внимание, что тег <html> имеет атрибут manifest.

Пример 20.6. permanote.html

<b>&lt;!DOCTYPE HTML&gt;</b>

<b>&lt;html manifest=&quot;permanote.appcache&quot;&gt;</b>

<b>  &lt;head&gt;</b>

<b>    &lt;title&gt;PeflaKTop PermaNote&lt;/title&gt;</b>

<b>    &lt;script src=”permanote. js&quot;x/script&gt;</b>

<b>    &lt;style&gt;</b>

<b>      #editor { width: 100%: height: 250px; }</b>

<b>      #statusline { width: 100%: }</b>

<b>    &lt;/style&gt;</b>

<b>  &lt;/head&gt;</b>

<b>  &lt;body&gt;</b>

<b>    &lt;div id=&quot;toolbar&quot;&gt;</b>

<b>      &lt;button id=&quot;savebutton&quot; onclick=&quot;save( )&quot;&gt;Сохранить&lt;/button&gt;</b>