Использование html5 appcache с медиа-запросами для соотношения пикселей

У меня есть веб-приложение, которое использует медиа-запросы на основе по соотношению пикселей для доставки изображений соответствующего разрешения на клиентские устройства. Например, он будет доставлять 1x изображения на рабочий стол Windows и 2x изображения на iPhone с дисплеем Retina.

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

Мне кажется, что это сведет на нет смысл моих медиа-запросов, так как мне придется поместить в манифест изображения 1x и 2x, и все клиенты в конечном итоге загрузят все изображения.

Основное решение, которое приходит на ум, — это динамически доставлять манифест, используя анализ пользовательского агента, чтобы решить, должен ли манифест включать изображения 1x или 2x. Это возможно для меня, но мне любопытно, какие другие решения существуют для решения этой проблемы, или это просто известное ограничение/причуда?


css media-queries pixel-density html5-appcache
person Michael Bednarek    schedule 10.10.2014    source источник
comment
На каких устройствах вы планируете разрешить использование приложения в автономном режиме?   -  person Alex W    schedule 14.10.2014
comment
Основные платформы, о которых я беспокоюсь, — это Windows, Mac, настольные компьютеры Linux, а также устройства iOS, Android и Windows Phone.   -  person Michael Bednarek    schedule 21.10.2014

Ответы (2)


arrow_upward
0
arrow_downward

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

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

person Alex W    schedule 14.10.2014
comment
Спасибо за ваш ответ! Вы правы, и именно так сегодня ведет себя веб-приложение. Но проблема в том, что я считаю, что в файле манифеста должен быть указан не только мой файл CSS, но и все изображения (1x и 2x), на которые ссылается CSS. Файл манифеста не различает 1x и 2x, поэтому браузер загрузит их все, отрицая упомянутую вами выборочную загрузку. Я должен признать, что это предположение, основанное на чтении того, как работает функция offline/appcache. Я попытаюсь создать простую тестовую страницу, чтобы доказать, что проблема существует. - person Michael Bednarek; 21.10.2014

arrow_upward
0
arrow_downward

Сам выполняя то же требование, я создал специальное промежуточное ПО специально для этого, предназначенное для работы с AppCache и/или Cordova или без них, поддерживающее синтаксис префикс-dpi-суффикс (например, [email protected]).

Вы можете использовать его с изображениями контента, файлами css, содержащими медиа-запросы, или любым другим файлом, просто добавьте @[num]x к своим файлам, и он будет служить вместо «обычного» файла (вы можете использовать свой собственный префикс и суффиксные строки).

Это означает, что когда браузер запрашивает файл с именем mypic.png на устройстве с соотношением пикселей устройства, равным 2, промежуточное ПО на самом деле попытается сначала обслужить [email protected], и только если он не существует, он обслужит mypic .png

статический-плотный

static-denser-demo

Обновлять

Более элегантное решение может быть достигнуто с помощью Service Workers, которые в настоящее время поддерживаются не всеми браузерами. .

http://caniuse.com/#feat=serviceworkers

person Alon Amir    schedule 30.04.2015