Заставить applicationCache для перезагрузки кэшированных файлов
Я использую HTML5 applicationCache для хранения многих файлов Javascript, CSS, изображений и т. Д. Для страницы. Если я обновлю один из этих файлов, браузер никогда не перезагрузит его. Я пробовал следующее:
- Вызов applicationCache.update() при загрузке страницы
- Прослушивание события updateready для applicationCache и вызов swapCache() и window.location.reload()
- Добавление комментария к метке времени к самому файлу манифеста, чтобы заставить браузер понять, что манифест изменился
Конечно, это не может быть так сложно. Как мне убедить браузер повторно запросить какой-нибудь кэшированный файл?
5 ответов
Чтобы принудительно загрузить любой новый (или измененный) файл, вы должны обновить файл манифеста (добавьте комментарий к номеру версии, или любое изменение подойдет). Вероятно, происходит то, что вы получаете ошибку. Наиболее распространенным является то, что вы, возможно, не обслуживаете манифест с правильным типом пантомимы (text/cache-manifest
). Правильно ли вы настроили свой сервер? Самый простой способ проверить это - открыть страницу в Chrome и посмотреть в консоли и на вкладке ресурсов в AppCache, чтобы увидеть, есть ли ошибка (он будет жаловаться на неправильное обслуживание файла. Вы также можете проверить это с помощью curl -I команда:
curl -I $manifest_file_URL
Также возможно, что ваш файл манифеста кэшируется (вы можете установить заголовки expires, чтобы он истекал сразу). Также помните о последовательности перезагрузки: ваша страница сначала будет загружаться из AppCache (если она там есть), затем браузер проверяет, обновлен ли файл манифеста. Если это так, загрузите и поместите в новую версию кэша, но это не будет автоматически обновлять страницу (и не будет swapCache()
), вам придется обновить страницу (как минимум) еще раз.
Смотрите также эту презентацию для получения дополнительной информации по теме.
С Google Chrome, если вы просто делаете это во время отладки, есть простой обходной путь: используйте окно инкогнито. Когда вы что-то измените в своем кэше, закройте окно инкогнито (если у вас их больше одного, убедитесь, что вы закрыли все из них), снова откройте его и перейдите в свое приложение. Теперь он будет загружен с чистого листа, включая все ваши измененные файлы.
Это немного ядерный вариант, так как он уничтожит все ваши хранимые данные, но, к примеру, отлично работает для меня во время очистки CSS.
По какой-то причине очистка кэша страниц Chrome с помощью "Очистить данные просмотра" не работает.
"Вам нужно изменить сам файл манифеста кэша. Это может быть так же просто, как изменить один символ", что работает для меня, спасибо!
Я боролся с этим некоторое время. Для меня ключом было получить MIME-тип и кэширующие заголовки прямо через nginx.
в /etc/nginx/mime.types:
text/cache-manifest manifest appcache;
в /etc/nginx/nginx.conf:
# If the file exists as a static file serve it directly
if (-f $request_filename) {
expires -1;
break;
}
Строка expires -1 приводит к тому, что заголовок кэша устанавливается в no-cache.
Также для очистки кеша в Firefox 23 я использовал:
- Firefox-> Параметры-> Параметры-> Дополнительно-> Сеть: Автономный Интернет и т. Д. -> Очистить сейчас
И посмотреть, что получалось с сервера или нет:
- Firefox-> Параметры веб-> Инструменты-> вкладка Сеть
Для вашего файла манифеста установите заголовок HTTP для
'Cache-Control' to 'no-store'
добавить Content-Type для.manifest of
'text/cache-manifest'
Это должно быть сделано, иначе браузер собирается кэшировать сам манифест для любого установленного по умолчанию значения кэша, поэтому запросы на проверку манифеста будут собирать кэшированную копию.
После этого измените символ в файле манифеста, и следующий запрос должен получить новый манифест.
Вы не говорите, на каком сервере вы работаете, но я сделал это для файлов, размещенных из корзины S3, и это помогло, S3 обычно кэширует в течение 24 часов.