Главная/ Учимся Javascript, CSS, HTML/ Уроки HTML/ Up And Running/ Take This Offline/ Давай что-то сделаем! HTML5. Up and Running. Марк Пилгрим

Давай что-то сделаем!

Дата публикации: 04.04.2011

В одной из предыдущих глав мы создавали игру «Уголки», а затем ее усовершенствовали с помощью локального хранилища. Теперь сделаем ее доступной в автономном режиме.

Чтобы это сделать, нам нужно в файле manifest перечислить файлы, необходимые для функционирования игры. В нашем случае — это HTML файл и один Javascript, файл в котором содержится код игры. Изображений нет, потому что всю графику выполнили с помощью Canvas, а CSS — потому что все стили включены в сам HTML. Итак, получаем manifest:


CACHE MANIFEST
halma.html
../halma-localstorage.js

Несколько слов о путях. Я создал поддиректорию offline/ в директории examples/ и файл manifest будет помещен в эту поддиректорию. Т.к. HTML странице потребуется некоторое дополнение для работы в автономном режиме (об этом позже), я сделал копию HTML и поместил ее в подкаталог offline/. Поскольку не вносились никакие изменения в Javasript, который использовался для поддержки локального хранилища, я решил использовать его (расположен он в родительском каталоге examples/). Выглядит это следующим образом:


/examples/localstorage-halma.html
/examples/halma-localstorage.js
/examples/offline/halma.manifest
/examples/offline/halma.html

В файле кеша manifest (/examples/offline/halma.manifest) мы хотим сослаться на два файла. Первый — это оффлайн версия HTML файла (/examples/offline/halma.html). К нему мы указываем путь без каких-либо префиксов, т.к. он расположен в той же папке что и файл manifest. Второй — это Javascript файл, который находится в родительском каталоге (/examples/halma-localstorage.js). В manifest путь к нему записан в виде относительного URL: ../halma-localstorage.js. Это просто, так же как мы используем относительные пути для изображений (<img src>). Как будет показано далее можно так же использовать и абсолютные пути.

Теперь в HTML файл добавляем атрибут manifest, который укажет на файл manifest:

<!DOCTYPE html>
<html lang="en" manifest="halma.manifest">

И это все! Когда браузер с поддержкой оффлайн впервые загрузит HTML страницу, он закеширует файл manifest, загрузит все ресурсы, указанные в нем и сохранит их в кеше оффлайнового приложения. Теперь можно будет играть в игру в автономном режиме и сохранять ее состояние локально.

Куда дальше

Показать комментарии