Как я могу сохранить много изображений локально, используя HTML5?

Я хочу разработать мобильное приложение с использованием HTLM5, и я новичок в этом.

В моем проекте я буду анализировать некоторые XML-файлы и загружать их данные на соответствующие страницы. Некоторые страницы XML содержат изображения (URL), поэтому мне нужно будет их отобразить.

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

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

Источник

1 ответ

Добавлять manifest="cache.appcache" в вашем <html> тег для включения манифеста кэша

<!DOCTYPE HTML>
<html manifest="cache.appcache">
  <body>

  </body>
</html>

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

Кэш приложения дает приложению три преимущества:

  1. Автономный просмотр - пользователи могут использовать приложение, когда они в автономном режиме
  2. Скорость - кэшированные ресурсы загружаются быстрее
  3. Снижение нагрузки на сервер - браузер будет загружать только обновленные / измененные ресурсы с сервера

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

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

Файл манифеста должен быть предоставлен с правильным MIME-type, который "text/cache-manifest", Должен быть настроен на веб-сервере.

Например, чтобы служить этому mime-type в Apache добавьте эту строку в ваш конфигурационный файл:

AddType text/cache-manifest .appcache

Структура файла манифеста

Манифест - это отдельный файл, на который вы ссылаетесь с помощью атрибута manifest элемента html. Простой манифест выглядит примерно так:

CACHE MANIFEST
index.html
style.css
img/logo.png
scripts/main.js
http://myapp.com/scripts/main.js

Этот пример кэширует четыре файла на странице, которая указывает этот файл манифеста.

Что следует отметить из приведенного выше примера:

-The CACHE MANIFEST строка является первой строкой и является обязательной.

-Файлы могут быть из другого домена

-Некоторые браузеры накладывают ограничения на размер квоты хранилища, доступной для вашего приложения. Например, в Chrome AppCache использует общий пул TEMPORARY хранилища, который могут совместно использовать другие автономные API. Если вы пишете приложение для Chrome Web Store, использование unlimitedStorage снимает это ограничение.

-Если сам манифест возвращает 404 или 410, кеш удаляется.

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

Источник
Другие вопросы по тегам