Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

кэш HTML

кэш  HTML

Что же такое автономность web-сайта, это независимость вашего сайта от соединения с интернетом. А вот это интересно спросите вы, как такое возможно? Ну в чем, я слукавил для полной работы сайта без интернета не обойтись. Но при ситуации временного обрыва соединения с интернетом, страница на которой вы, допустим ознакамливайтесь с информацией, даже после перезагрузки останется доступной.

Как это работает , здесь все довольно просто. Все мы знаем, что при повторном обращении к странице стили, скрипты и т.п беруться уже из кеша браузера, следовательно главная фишка этой технологии заключается в полном кэшировании страницы.

Теперь к делу! Здесь нам понадобится локальная машина (OpenServer, Denwer и т.п) Создадим две страницы c расширением php:

<!DOCTYPE html>
<html >
<head>
    <meta charset='utf-8' />
    <title>Главная</title>
</head>
<body>
<h2>Первая страница</h2>
<a href='js-test/test_child.php'>Ссылка  первую страницу</a>
</body>
</html>

<!DOCTYPE html>
<html >
<head>
    <meta charset='utf-8' />
    <title>Новости</title>
</head>
<body>
<h2>Вторая  страница</h2>
</body>
</html>

Теперь запустим их через Локальную машину, проверим чтоб они отображались и затем отключим локальную машину и перезагрузим страницы, то есть мы сейчас сымитировали обрыв соединения к сети:

Теперь сделаем следующее,на главной странице в тег html добавим атрибут manifest со значением cache.manifest

<!DOCTYPE html>
<html manifest='cache.manifest'>
<head>
    <meta charset='utf-8' />
    <title>Главная</title>
</head>
<body>
<h2>Первая страница</h2>
</body>
</html>

Где cache.manifest файл содержание которого следующее:

CACHE MANIFEST

test.php

child_test.php

В этом файле CACHE MANIFEST - кэшировать, и дальше идет перечисление этих двух файлов, которые мы будем кешировать. Далее перезагружаем файл в котором у нас указан путь к этому файлу, то есть manifest='cache.manifest', чтобы эти две страницы закешировались.

И можно смело выключать локальную машину и эти страницы будут доступны.

Здесь следует учитывать чтобы страницы были статичны, то есть на этих страницах работа с данными происходила без обращения к серверу, так как если соединения с интернетом не будет , то следовательно доступ к серверам будет невозможен.

Поэтому данная технология будет полезна для бесперебойной работы с клиентским кодом. Также следует учитывать, что кешироваться будут только, те файлы которые вы указали в файле chache.manifest, то есть все стили и скрипты, которые будут у вас в отдельных файлах тоже должны быть указаны в cache.manifest.

Кстати для оповещения пользователя можно в закешированные файлы добавить такой код

<script>
    if(!navigator.onLine){
        alert('Соединение с интернетом было прервано сайт работает в автономном режиме');
    }
</script>

Теперь если, помимо OpenServera отключить еще и интернет ,то будет всплывать модальное окно с сообщением, что соединения с интернетом нет. Вот в общем-то и все . Данная технология может быть применена к web-приложениям, теперь и пользователей может появиться возможность бесперебойно пользоваться вашими приложениями, что в свою очередь очень хорошо.

Надеюсь я смог донести до вас что то новое. Комментируйте, задавайте вопросы, общайтесь на форуме, и всего самого хорошего!

Оцените статью:

Статьи

Комментарии

Внимание!!! Комментарий теперь перед публикацией проходит модерацию

Все комментарии отправлены на модерацию

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm