English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основные курсы HTML5

API HTML5

Медиа HTML5

Графика HTML5

Кэш приложений HTML5

Используя HTML5, можно легко создать офлайн-версию веб-приложения, создав файл manifest кэша, что означает, что веб-приложение может кэшироваться на клиенте и доступно для офлайн-доступа без подключения к интернету.

Что такое приложение кэш (Application Cache)

HTML5 предоставляет механизм приложения кэш, который позволяет веб-приложениям работать в офлайн-режиме. Разработчики могут использовать интерфейс Application Cache (AppCache), чтобы определить ресурсы, которые должны быть кэшированы браузером, и сделать их доступными для пользователей в офлайн-режиме. При работе в офлайн-режиме, даже если пользователь нажмет кнопку обновления, приложение будет загружаться и работать normalmente.

Приложение кэш приносит трем преимуществам:

  • Офлайн-просмотр - пользователи могут использовать их, когда приложение работает в офлайн-режиме

  • Скорость - уже кэшированные ресурсы загружаются быстрее

  • Уменьшение нагрузки на сервер - браузер будет загружать только обновленные или измененные ресурсы с сервера.

Какие браузеры поддерживают

Internet Explorer 10, Firefox, Chrome, Safari и Opera поддерживают приложение кэш.

Пример Cache Manifest HTML5

Ниже приведен пример HTML-документа с cache manifest (для работы в офлайн-режиме):

Онлайн пример

<!DOCTYPE HTML>
<html manifest="demo.appcache">
	<body>
	Документальное содержимое......
	</body>
	</html>
Проверьте, работает ли это ‹/›

Основы Cache Manifest

Чтобы включить кэш приложений, включите атрибут manifest в тег <html>:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

Каждая страница,指定的 Manifest, будет кэшироваться при каждом посещении пользователем. Если атрибут Manifest не указан, страница не будет кэшироваться (если только страница не была указана напрямую в файле Manifest).

Рекомендуемое расширение файла для Manifest - это: ".appcache".

Обратите внимание, что файл Manifest требует правильного типа MIME, то есть "text/cache-manifest". Необходимо настроить это на веб-сервере.

Файл Manifest

Файл Manifest - это простой текстовый файл, который информирует браузер о содержимом, которое будет кэшироваться (и содержимом, которое не будет кэшироваться).

Файл Manifest можно разделить на три части:

  • CACHE MANIFEST - В этом заголовке перечисленные файлы будут кэшироваться после первого скачивания

  • NETWORK - В этом заголовке перечисленные файлы требуют подключения к серверу и не будут кэшироваться

  • FALLBACK - В этом заголовке перечисленные файлы определяют страницы-запасные, которые будут использоваться при невозможности доступа к странице (например, страница 404)

CACHE MANIFEST

В первой строке, CACHE MANIFEST, это необходимо:

CACHE MANIFEST
/style.css
/logo.png
/main.js

В aforementioned файле Manifest перечислены три ресурса: один файл CSS, один GIF-изображение и один файл JavaScript. После загрузки файла Manifest браузер загружает эти три файла из корневого каталога сайта. Затем, независимо от того, когда пользователь разрывает соединение с сетью, эти ресурсы по-прежнему доступны.

NETWORK

В разделе NETWORK ниже определено, что файл "login.php" никогда не будет кэшироваться и будет недоступен в автономном режиме:

NETWORK:
login.php

Можете использовать звездочку, чтобы указать, что все другие ресурсы/файлы требуют сетевого соединения:

NETWORK:
*FALLBACK

В разделе FALLBACK ниже определено, что если не удается установить сетевое соединение, то вместо всех файлов каталога /html5/ используется "offline.html":

FALLBACK:
/html/　/index.html

Внимание: первый URI - это ресурс, а второй - запасной.

Обновление кэша

После того как приложение кэшировано, оно будет сохраняться в кэше до тех пор, пока не произойдет одно из следующих событий:

  • Пользователь очищает кэш браузера

  • Файл Manifest был изменен (смотрите下面的 советы)

  • Обновление кэша приложения осуществляется программой

Полный пример файла Manifest

CACHE MANIFEST
#　2018-02-21　v1.1.1
/style.css
/logo.png
/main.js
NETWORK:
login.php
FALLBACK:
/html/　/index.html
Подсказка:Строки, начинающиеся с "#", это строки комментариев, но они могут служить и другим целям. Кэш приложения обновляется при изменении файла manifest. Если вы редактируете изображение или изменяете JavaScript-функцию, эти изменения не будут кэшированы заново. Обновление даты и версии в строках комментариев — это один из способов заставить браузер обновить кэш.

О説明 кэша приложений

Пожалуйста, обратите внимание на содержимое кэша.

Как только файл будет кэширован, браузер продолжит показ сохраненной версии, даже если вы изменили файлы на сервере. Чтобы обеспечить обновление кэша браузера, вам нужно обновить файл manifest.

Внимание: Ограничения по容量 кэширования данных в браузерах могут варьироваться (некоторые браузеры устанавливают ограничения на каждый сайт 5MB).

Web Workers в HTML5Локальная база данных HTML5