Как очистить кеш браузера в reactjs
Каждый раз, когда я вношу изменения в свой веб-сайт и пытаюсь обновить эти изменения на работающем веб-сайте, мне приходится полностью обновлять браузер. есть ли способ сделать это с помощью кода
Я уже пытаюсь найти его, но большинство из них говорят, что это невозможно. справочный пост: Как программно очистить кеш браузера?
** Заголовки ответов:
HTTP/1.1 200 OK
Server: nginx/1.12.2
Date: Fri, 06 Jul 2018 10:01:23 GMT
Content-Type: text/html
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept-Encoding
Content-Encoding: gzip
** Заголовки запроса:
GET / HTTP/1.1
Host: --example--.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8,hi;q=0.7
Cookie: fingerPrint=e4a9037b8f674722f414b0b59d8d663c
Да, вы можете вызвать страницу ajax, чтобы дать вам последнюю длину страницы, если она изменится, обновится автоматически
Как выглядят заголовки вашего файлового кеша?
Создал компонент, который может обрабатывать обновления сборки в вашем приложении. Вы можете проверить здесь: npmjs.com/package/react-clear-cache
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
Возможно, вы можете просто использовать jQuery. пожалуйста, взгляните на сообщение Как программно очистить кеш браузера?
Создал компонент, который может обрабатывать обновления сборки в вашем приложении. Вы можете проверить здесь: npmjs.com/package/react-clear-cache
В этом конкретном случае вы можете указать браузеру не кэшировать вашу страницу, используя эти метатеги внутри тега <head>:
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
Однако есть несколько способов добиться этого. Вы можете отправить соответствующие заголовки с вашим ресурсом из своего бэкенда. Или, если вы пытаетесь временно отключить кеш, вы можете сделать это, отключив кеш браузера. Для этого выполните следующие действия.
В ваших инструментах разработчика. Найдите вкладку сети и отключите кеш. Как здесь на изображении.
Надеюсь, это разрешится.
OP просит сделать это с помощью кода, конечно, он просит об этом конечного пользователя
спасибо @pmiranda Я внес некоторые правки. Надеюсь, этот ответ соответствует операционному вопросу.
Даже если приведенные ниже ответы не сработали. И вы столкнулись с проблемой типа ваше приложение кэшируется, что заставляет все приложение отображать старую сборку, тогда, вероятно, вы можете проверить эту ссылку https://github.com/facebook/create-react-app/issues/1910#issuecomment-355245212. После этого выполните запуск npm, у меня это сработало.
Это предлагает отменить регистрацию сервис-воркеров, поэтому это применимо только для PWA.
Создайте файл style.css в своей общей папке, затем свяжите этот файл CSS с файлом index.html.
Бывший:
<link rel = "stylesheet" type = "text/css" href = "%PUBLIC_URL%/style.css?v=0.0.1" />
Всегда обновляйте версию этого файла CSS перед сборкой кода.
Сделал простую функцию по удалению кеша. Просто вызовите эту функцию, если хотите очистить кеш.
Меня устраивает. * Не тестировал на крайних случаях.
Вы можете реализовать это, сохраняя номер версии на клиенте и позволяя серверу отправлять номер версии. Если они не совпадают, вызовите функцию для удаления кеша. Или вы можете дать пользователю кнопку и позволить ему решить удалить кеш.
export default function emptyCache(){
if ('caches' in window){
caches.keys().then((names) => {
// Delete all the cache files
names.forEach(name => {
caches.delete(name);
})
});
// Makes sure the page reloads. Changes are only visible after you refresh.
window.location.reload(true);
}
}
Когда вы выполняете обычную сборку и выпуск в среду PROD с куском js-файлов. Лучше использовать следующий npm реагировать-очистить-кеш для вашего реагирующего приложения. Это можно использовать для настройки шаблона очистки кеша в зависимости от версии сборки вашего приложения.
Под
running websiteвы имеете в виду свой производственный веб-сайт? Если это так, вероятно, было бы неплохо иметь несколько имен файлов очистка кеша.