HTML5 iPhone динамическое кэширование изображений

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

Так, например, скажем, мы создаем простое приложение списка со всего 1 страницей. Единственная цель приложения состоит в том, чтобы перечислить 5 объектов, каждый объект, содержащий некоторый текст и 1 изображение.

Приложение имеет простой логотип и некоторый отдельный JavaScript и код CSS. Эти статические ресурсы кэшируются с помощью файла манифеста кэша.

Существует 2 сценария:

Сценарий 1: я онлайн, и я открываю веб-приложение

Когда я загружу приложение списка в Safari, это выберет 5 новых случайных объектов из базы данных, содержащей 1000-е объектов. Они все подаются простым бэкендом через вызов Ajax (формат JSON).

Целый объект JSON, содержащий эти 5 объектов, сразу хранится в локальном устройстве хранения данных HTML5 и кэшируется для офлайнового использования.

Структура объекта JSON немного похожа на это:

{
    "0" : {
        id: "3",
        text: "Some text about item #3",
        image_url: "http://www.domain.com/image22341.png"
    },
    "1" : {
        id: "23",
        text: "Some text about item #23",
        image_url: "http://www.domain.com/image442321.png"
    },
    "2" : {
        id: "4",
        text: "Some text about item #4",
        image_url: "http://www.domain.com/image2321.png"
    },
    "3" : {
        id: "432",
        text: "Some text about item #432",
        image_url: "http://www.domain.com/image2441.png"
    },
    "4" : {
        id: "43",
        text: "Some text about item #43",
        image_url: "http://www.domain.com/image221.png"
    }
}

Как Вы видите, очень простой (могут быть некоторые ошибки в этом JSON), целый объект JSON хранится в локальном устройстве хранения данных.

Теперь эти 5 объектов представляются с помощью JavaScript, введенного HTML (разработанное использование CSS), ничто не полагает. Теги span, содержащие текст и теги изображения, указывающие на ресурс изображения, создаются и т.д.

В режиме онлайн все это работает отлично.

Сценарий 2: я В РЕЖИМЕ ОФЛАЙН, и я открываю веб-приложение

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

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


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

Это - то, что я попробовал:

  • Base64 кодируют изображения и предоставляют их через JSON. Это работает, НО, это существенно увеличивает и выбирающее и представляющее время (мы говорим увеличение приблизительно 30 секунд, очень медленное),
  • Некоторый кэш проявляет взламывание/метод проб и ошибок.. не мог найти ничего, что работает (идеально нуждаются в политике, которая действительно 'кэширует все ресурсы на домене, поскольку их требуют', но к моему знанию это не существует),

Я буквально провел часы на это и не могу найти решение... у кого-либо есть подсказка? Я знаю, что это возможно, потому что, если Вы смотрите на приложение Google Mail HTML5 для iPhone, они могут так или иначе кэшировать вложения, и можно получить их даже в то время как офлайн.

Одной вещью, которую мы не попытались действительно ли использовать, являются базы данных SQLite, которые поддерживаются Safari..., возможно, я мог сохранить изображения как BLOB (все еще означает выбирать его от канала, и таким образом замедлитесь?) и затем так или иначе волшебно преобразование, что в изображение на экране...., но я понятия не имею о том, как сделать это.

Любая справка ценится, спасибо.

8
задан Waleed Amjad 13 August 2010 в 12:52
поделиться

1 ответ

Я бы посоветовал вам взглянуть, можно ли использовать холсты для хранения ваших изображений, поскольку они имеют определенные свойства для получения / вставки данных пикселей изображения, например CSV значений пикселей (0-255).

Источник: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/HTML-canvas-guide/PixelManipulation/PixelManipulation.html

Я не уверен, сможете ли вы динамически использовать источники изображений в холсте, но если вы можете, вы сможете передавать данные CSVV из изображения в БД и наоборот.

Цитата

Safari 4.0 и более поздние версии поддерживают прямое управление пикселями холста. Вы можете получить необработанные данные пикселей холста с помощью функции getImageData () и создать новый буфер для управляемых пикселей с помощью функции createImageData ().

( источник на archive.org )


Обновление:

Я нашел ссылки, которые могут вас заинтересовать.

http://wecreategames.com/blog/?p = 210

http://wecreategames.com/blog/?p=219 // Также обратите внимание на идею сериализации холста :)

1
ответ дан 6 December 2019 в 00:53
поделиться
Другие вопросы по тегам:

Похожие вопросы: