Как заставить Firefox обойти BFCache для партиалов Angular.JS?

Я работаю над страницей Angular.js и делаю изменения в html 'частичном'. Обновление страницы заставляет Firefox правильно повторно запрашивать основную html-страницу с сервера, но последующие "частичные" шаблоны, которые отображаются на стороне клиента, никогда не запрашиваются повторно, а вместо этого извлекаются из BFCache, поэтому изменения в этих файлах не обнаружено.

Скриншот из Firebug:Скриншот BFCache firebug

Я могу подтвердить через сервер разработки (Django), что эти партиалы никогда не запрашиваются.

Я пробовал все виды обновлений, включая расширение Reload Plus.

5 ответов

Решение

Они не идеальны, но есть два варианта решения проблемы.

Одним из них является дополнение Clear Cache, которое можно настроить для очистки кэша диска и памяти и перезагрузки текущей вкладки. Я не уверен, полностью ли очищает кеш или только для домена текущей вкладки, но это, вероятно, весь кеш.

Другой - отключить кеш браузера в firebug:Firebug отключить кеш

Я не уверен, если это просто отключает кэш для текущей страницы, текущего домена или где-либо еще.

Было бы неплохо иметь опцию "Перезагрузить эту страницу и все, на что ссылается эта страница".

Другой вариант - включить частичное следующим образом:

angular
    .module("app")
    .directive("appPartial", function () {
        return {
            templateUrl: "partials/partial1.htm"+getTempStr(),
            restrict: "E",
            scope: {},
            controller: PartialController,
            controllerAs: "vm"
        }
    });

function getTempStr(){
    // dev
    return "?a=" + (new Date().getTime()).toString();
    // prod
    //return "";
}

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

Чтобы использовать BFCache в производственной среде, вы можете раскомментировать строку "return ""вместо другой строки возврата.

Я бы просто установил флаг в ваших шаблонах, чтобы добавить простую функцию onunload, например:

{% if CLEARBFCACHE %} <body onunload="myFunction()"> {% endif %}

Затем установите CLEARBFCACHE = 1 (в settings.py) в процессе разработки.

Если вам нужно протестировать производственный набор CLEARBFCACHE = 0, затем разверните его на своем промежуточном сервере или (если у вас нет отдельного сервера), я думаю, вы можете изменить URL-адрес с 127.0.0.1 на locahost, чтобы Firefox думал, что это другой сайт,

Другой вариант заключается в том, чтобы ваш веб-сервер разработки отправлял заголовок Cache-Control как минимум для HTML-файлов:

Cache-Control: no-cache, max-age=0, must-revalidate, no-store

Источник: Как победить кеш кнопки возврата браузера

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

Потому что вы делаете одностраничное приложение. Поэтому правильное решение должно быть:

(1) установите физическую страницу (т.е. главную страницу) в "Cache-Control: No-cache". Физическая страница должна быть небольшой, поскольку все логические страницы динамически загружаются с помощью JavaScript, поэтому загрузка самой физической страницы должна быть быстрой

(2) для "частичной" страницы (то есть логической страницы) меняйте имя папки каждый раз, когда вы выпускаете новую сборку,

Например: при развертывании нового выпуска предположим, что физическая страница имеет вид index.html.

Внутри index.html все файлы шаблонов JavaScript, css и angularJs находятся в активе папки -{{TimeStamp}}. Поскольку index.html не имеет кеша, браузер всегда будет получать последний index.html. Потому что все файлы JS, CSS и другие шаблоны HTML находятся в другой папке с последнего выпуска. поэтому браузер будет загружать все файлы из новой папки, а не из кэша.

Вы можете создать процесс сборки, чтобы сделать это автоматически: искать все файлы js, css в index.html и заменять имя папки asset/** на asset-{{TimeStamp}}/**, а затем копировать все файлы в asset - {{ TimeStamp}} из папки активов

Теперь у вас нет головной боли, но браузер использует локальный кеш для ускорения вашей веб-страницы.

(3) для файла шаблона angularJs, поскольку он также загружается JS, поэтому мы настоятельно рекомендуем использовать относительный путь (связанный с выполняющимся в данный момент кодом JS), чтобы получить его. Пример кода JS, подобный следующему:

function _getCurrentJSPath() {
    var scripts = document.getElementsByTagName("script");
    var currentFile = scripts[scripts.length - 1].src;
    var currentPath = currentFile.substr(0, currentFile.lastIndexOf('/')) + "/";
    return currentPath;
}
...
 templateUrl: _getCurrentJSPath() + 'currencyField.html',
Другие вопросы по тегам