Избегайте проблем с кешем для веб-приложения с iframe

У нас есть веб-приложение (одностраничное приложение, поддерживаемое REST API), которое в основном используется на смартфонах. Пользователям предлагается создать значок рабочего стола, чтобы они имели легкий доступ и полный экран. Это работало нормально, пока мы не решили выпустить новую версию нашего приложения. Некоторые браузеры кэшируют старую версию и отказываются обновлять приложение, даже когда пользователь заставляет перезагружать.Избегайте проблем с кешем для веб-приложения с iframe

Это серьезная проблема при обновлении API REST, но браузер все еще использует устаревшую версию веб-приложения. Нам нужно, чтобы браузер кэшировал все, когда это было возможно, но мы также хотим перезагрузить, когда выпущена новая версия.

Теперь мы рассматриваем возможность использования iframe для устранения этой проблемы. Мы создали index.html, который содержит iframe и небольшой фрагмент Javascript, который выполняет XMLHttpRequest на REST-сервере, чтобы выяснить текущую версию. Эта версия затем используется для установки src-attibute iframe, так что iframe загружается текущей версией нашего веб-приложения.

Решение, похоже, работает, но мне было интересно, нет ли лучшего решения этой проблемы. Можно ли использовать iframe для решения этой проблемы или вызвать другие проблемы (на некоторых браузерах/устройствах)?

Редактировать: Мы не можем использовать серверные скрипты, поэтому auto-versioning не является для нас решением.

источник

2016-12-08 Gert-Jan

Какие типы файлов вы не хотите кэшировать? Что это за приложение? (php, .net и т. д.) –

Возможный дубликат [Как заставить браузер перезагружать кэшированные файлы CSS/JS?] (Http://stackoverflow.com/questions/118884/how-to-force-browser-to-reload-cached-css-js- файлы) –

Можете ли вы показать вызов API? –

Публикация решения на мой вопрос. Index.html выглядит следующим образом:

<html> 
 
<head> 
 
\t <style> 
 
\t \t body { 
 
\t \t \t margin: 0px; 
 
\t \t } 
 
\t \t 
 
\t \t iframe { 
 
\t \t \t overflow: hidden; 
 
\t \t \t height: 100vh; 
 
\t \t \t width: 100vw; 
 
\t \t \t border: none; 
 
\t \t } 
 
\t </style> 
 
</head> 
 
<body> 
 

 
\t <iframe id="content"></iframe> 
 

 
\t <script> 
 
\t \t var xmlHttp = new XMLHttpRequest(); 
 
\t \t xmlHttp.onreadystatechange = function() { 
 
\t \t \t if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 
 
\t \t \t \t var src = xmlHttp.responseText + "/index.html"; 
 
\t \t \t \t document.getElementById("content").setAttribute("src", src); 
 
\t \t \t } 
 
\t \t } 
 
\t \t xmlHttp.open("GET", "current-version", true); 
 
\t \t xmlHttp.send(null); 
 
\t </script> 
 
</body> 
 
</html>

текущий файл-версия содержит имя каталога текущей версии (например, версии 1.0) и фактический веб-приложение находится в этой директории.

Несмотря на то, что это кажется немного хакерским, это решение делает то, что нам нужно. Когда мы выпускаем новую версию, мы просто помещаем ее в новый каталог (например, v1.1) и соответственно изменяем содержимое текущей версии.

EDIT

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

источник

2016-12-11 21:55:35

Вам не понадобится iFrame.

Вы можете достичь этого через javascript. Создайте XMLHttpRequest, как вы делаете из iframe. Всякий раз, когда вы запрашиваете изображение, вызывая REST API через XMLHttpRequest, добавьте параметр запроса String в URL запроса, значение которого будет случайным. Должны решить ваши проблемы с кешированием.

Пример, что-то вроде этого,

var url = yourexistingurl + "&randomid=" + Math.random();

Опять же, я не знаю, как ваш REST API разработан, но делать это не может быть проблемой.

источник

2016-12-08 14:01:25

Причина, лежащая в основе голосования, увеличит мои знания, и я чувствую! Прошу прокомментировать :) –

Убрано downvote, глупые беспроводные мышиные батареи были обжарены ..... теперь новые ... –

Это решит проблему кеша, но это полностью отключит кеш браузера. Кроме того, как браузер узнает, когда перезагрузить основной index.html? –

Избегайте проблем с кешем для веб-приложения с iframe

ответ

Смежные вопросы