Как очистить кэш node js

Как очистить кэш

он заходит на страницу моего сайта и делает скрин, страница это обновляется каждый день по api и загружает каждый раз новую информацию. Но по какой-то причине для моего кода сайт вчерашний, т.е. все изображения полученный на api уже старые, я так понимаю они закешировались. Метатеги запрещающие кэш поставил, не помогло. Возможно проблема в сервисе? может он кеширует?

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как очистить кэш windows?
Проблема в следующем: При смене сервера и, следовательно, DNS одного сайта теперь не могу на него.

Как очистить кэш сайта
Собственно когда включен режим не использовать кэш, все ок. Но как только стоит разлогинится.

Как очистить кэш ДНС
сеть, комп(ОС 7) роутер(dir300) провайдер ipconfig Настройка протокола IP для Windows .

Как очистить кэш веб-приложения J2EE
Собственно есть приложение, на сервере Apache Tomcat 5.5, фреймворк J2EE, обновил контент, но.

Всегда онлайн
1084 / 788 / 295
Регистрация: 07.04.2013
Сообщений: 2,703

FreyTube, скорее всего, сам сервис кеширует скриншоты для оптимизации. Можете еще добавить к запросу заголовок Cache-Control: no-cache, no-store, must-revalidate. Можете вручную через браузер заходить по этой ссылке и проверять, меняется картинка или нет.

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Как программно отключить\очистить DNS-кэш
Задача в том чтобы выполнять DNS resolve по указанному хосту и засекать время резолва. Проблемма -.

Как зайти на виртуальную машину с Debian по ssh и очистить кэш
На виртуальной машине установлен Debian Необходимо зайти удаленно и очистить кэш. У виртуальной.

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

Очистить кэш
Здравствуйте. Судя по всему похожу на кэш, Использую такой код, чтобы страницы загружались без.

Очистить кэш на стороне клиента
Скажите, есть ли способ чистить кэш FF на стороне клиента или после загрузки страницы имитировать.

Может ли JS или расширение для Хрома очистить историю браузера, куки, кэш по запросу?
Вопрос в заголовке. Пишу расширение для Chrome. Требуется периодическая очистка личных данных по.

Или воспользуйтесь поиском по форуму:

как очистить кэш js

К сожалению, нельзя очистить кэш JavaScript напрямую, так как браузер автоматически кеширует файлы JavaScript. Однако, есть несколько способов, которые могут помочь решить проблему:

1. Очистить кэш браузера полностью. Это поможет удалить все кешированные файлы и данные, включая файлы JavaScript.
2. Использовать инкогнито-режим в браузере. В этом режиме браузер не кеширует данные, включая файлы JavaScript.
3. Изменить URL файла JavaScript. Если вы изменили URL файла JavaScript, браузер загрузит новую версию файла вместо кешированной.
4. Добавить мета-тег в HTML-код. Мета-тег cache-control поможет указать браузеру, что файлы JavaScript не должны кешироваться.

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

Please run `npm cache clean`

npm ERR! tar.unpack error reading /media/FLASH/Tech/IPFS/ipfs npm ERR! addLocal Could not install /media/FLASH/Tech/IPFS/ipfs npm ERR! Linux 4.15.0-29-generic npm ERR! argv «/usr/local/bin/node» «/usr/local/bin/npm» «install» «ipfs» «—save» npm ERR! node v6.9.2 npm ERR! npm v3.10.9 npm ERR! 0-byte tarball npm ERR! Please run npm cache clean

I tried doing npm cache clean but still it is giving me the same error while doing npm install ipfs —save I don’t know why I’m getting this error. and how to avoid this error.

asked Jul 31, 2018 at 7:07
1,031 2 2 gold badges 9 9 silver badges 11 11 bronze badges

You’ve not given us much information. What is your question, do you want to understand why this is happening or how to get the installation to pass? If you want to get the installation to pass, I’d suggest doing as npm says and run npm cache clean to begin with.

Jul 31, 2018 at 7:19

Yes. I did run npm cache clean and i tried npm install ipfs again but still it is giving the same error. I don’t know why this is giving the error.

Jul 31, 2018 at 7:26
You should add that to your original question so people can clearly see the problem.
Jul 31, 2018 at 7:27

5 Answers 5

As of npm@5 , the npm cache self-heals from corruption issues and data extracted from the cache is guaranteed to be valid. If you want to make sure everything is consistent, use npm cache verify instead. On the other hand, if you’re debugging an issue with the installer, you can use npm install —cache /tmp/empty-cache to use a temporary cache instead of nuking the actual one.

If you’re sure you want to delete the entire cache, rerun:

npm cache clean --force 

A complete log of this run can be found in /Users/USERNAME/.npm/_logs/2019-01-08T21_29_30_811Z-debug.log .

5,193 17 17 gold badges 35 35 silver badges 42 42 bronze badges
answered Jan 8, 2019 at 21:39
1,383 1 1 gold badge 9 9 silver badges 10 10 bronze badges

npm cache clean no longer works because npm is self healing. The documentation says to instead run npm cache verify if you think there is an issue

Jun 26, 2021 at 2:12
Thanks, I am using this npm install —cache /tmp/npm-cache-$(date +»%Y%m%d_%H%M%S») now.
Dec 4, 2021 at 14:00

For reference: npm cache docs mention: «it should never be necessary to clear the cache for any reason other than reclaiming disk space, thus why clean now requires —force to run» and recommend npm cache verify for integrity/cleaning up.

Jun 8, 2022 at 11:20

This error can be due to many many things.

The key here seems the hint about error reading . I see you are working on a flash drive or something similar? Try to run the install on a local folder owned by your current user.

You could also try with sudo , that might solve a permission problem if that’s the case.

Another reason why it cannot read could be because it has not downloaded correctly, or saved correctly. A little problem in your network could have caused that, and the cache clean would remove the files and force a refetch but that does not solve your problem. That means it would be more on the save part, maybe it didn’t save because of permissions, maybe it didn’t not save correctly because it was lacking disk space.

answered Jul 31, 2018 at 7:40
15k 2 2 gold badges 30 30 silver badges 59 59 bronze badges

npm cache clean doesn’t work now

Type below command :-

1- npm cache verify

Read the error in terminal it will show you exact commands to run for solution. you might need to append —force

2- sudo chown -R 501:20 «/$path$/.npm». (this works for me )

30.8k 41 41 gold badges 174 174 silver badges 269 269 bronze badges
answered May 12, 2021 at 10:45
user2830254 user2830254
61 1 1 silver badge 2 2 bronze badges
huh. everything works with sudo (:xD)
Mar 12, 2023 at 23:41

The error you’re encountering seems to be related to a problem with the tarball (compressed archive) during the installation process. Here are some steps you can try to fix this issue:

npm cache clean --force 

npm install -g npm 

npm install ipfs --save 

npm install ipfs --save --no-package-lock 

• Download and install the latest Node.js: Node.js Downloads
• After installing Node.js, npm will be updated as well.

nvm install 12 nvm use 12 

After trying these steps, you should hopefully be able to install IPFS without encountering the mentioned error.

answered Nov 29, 2023 at 15:49
Gitesh Goyal Gitesh Goyal

To clean the npm cache on your system, you should run the npm cache clean command. This will purge any cached packages and modules from the local npm cache folder.

Clearing out the cache can help resolve certain npm errors or inconsistencies, and also frees up disk space by removing redundant packages that have accumulated over time.

For a step-by-step guide on how to use the npm cache clean command, I recommend checking out this handy tutorial: npm clear cache.

It covers the full syntax and provides useful examples of cleaning the npm cache. The tutorial also explains some best practices around when you may want to clear the local cache.

Let me know if running npm cache clean helps resolve the issue you are running into. That TeachingBee article should give you a good overview of how to leverage the command.

JavaScript: об очистке данных, хранящихся на стороне клиента, по сигналу сервера и немного о карте импортов

Представляю вашему вниманию результаты небольшого исследования, посвященного очистке данных, хранящихся на стороне клиента по сигналу сервера. Речь идет об относительно новом HTTP-заголовке Clear-Site-Data . Также в этой статье мы немного поговорим про карту импортов (imports map).

Статья состоит из двух частей: теоретической и практической.

В теоретической части мы кратко рассмотрим карту импортов и более подробно Clear-Site-Data .

В практической части мы поднимем два сервера — один будет запускаться локально и, помимо прочего, обслуживать статические файлы нашего приложения, другой мы развернем на Heroku . Сначала мы запросим данные (включая куки) от серверов, сохраним эти данные в браузере с помощью трех наиболее популярных механизмов (локальное хранилище, индексированная база данных и интерфейс кеширования), затем попробуем очистить их с помощью заголовков Clear-Site-Data . Для разрешения путей импортируемых в приложении модулей мы будем использовать карту импортов.

Исходный код проекта находится здесь.

Ресурсы

О механизмах для хранения данных на стороне клиента, которые мы будем использовать в приложении, я рассказывать не буду. Вот ссылки на отличные ресурсы, посвященные каждому из них:

• LocalStorage, SessionStorage — javascript.ru
• IndexedDB — javascript.ru
• Краткое руководство по Cache API — web.dev
• HTTP-кеширование — MDN
• Уменьшение количества сетевых запросов с помощью HTTP-кеширования — web.dev

Несмотря на то, что HTTP-кеширование — тема очень интересная, мы с ним работать не будем. Масштаб нашего приложения не позволит в должной мере оценить преимущества, предоставляемые данным механизмом. Кроме того, в конечном счете, даже при наличии соответствующих заголовков ( Cache-Control , Etag и др.), браузер сам решает, что и как кешировать.

Инструменты

При разработке приложения мы будем использовать несколько инструментов, основными из которых являются следующие:

• very-simple-fetch — утилита, упрощающая выполнение HTTP-запросов с помощью Fetch API
• idb — утилита, упрощающая работу с IndexedDB
• express — фреймворк для создания серверов на Node.js
• cors — утилита для работы с CORS-заголовками
• nodemon — утилита для запуска сервера для разработки и его автоматического перезапуска при необходимости
• open-cli — утилита для автоматического открытия вкладки браузера по указанному адресу

Теория

Карта импортов

Карта импортов (imports map) позволяет использовать так называемые голые спецификаторы импорта (bare import specifiers) в инструкциях import и выражениях import() без участия сборщиков типа Webpack или других инструментов для разрешения путей импортируемых модулей во время выполнения кода.

Предположим, что в нашем проекте используются библиотека lodash и утилита very-simple-fetch :

yarn add lodash very-simple-fetch

Для того, чтобы импортировать эти модули без помощи «бандлера», необходимо указать полный путь к соответствующим файлам, хранящимся в директории node_modules :

// допустим, что наш `script.js` находится на одном уровне с директорией `node_modules` import < curry >from '/node_modules/lodash-es/lodash.js' import simpleFetch from '/node_modules/very-simple-fetch/index.js'

Карта импортов позволяет связать кастомные ключи — названия модулей — с их расположением. Для этого в теге с типом importmap определяется объект с ключом imports и парами ключ / значение, где значение — это путь к модулю, а ключ — синоним (алиас) для этого пути:

После определения карты импортов, у нас появляется возможность импортировать наши модули следующим образом:

import simpleFetch from 'very-simple-fetch' import('lodash').then((< curry >) => < // . >)

Карты импортов также предоставляют много других интересных возможностей. К сожалению, в настоящее время они поддерживаются только Chrome . Если вы пользуетесь другим агентом, при разработке приложения в практической части статьи импортируйте модули напрямую из node_modules .

Clear-Site-Data

HTTP-заголовок Clear-Site-Data позволяет передавать браузеру инструкции по очистке хранящихся на стороне клиента данных.

Данный заголовок принимает следующие директивы:

• «storage» — указывает, что сервер желает очистить все хранилища DOM , связанные с источником (протокол, домен и порт) ответа на HTTP-запрос. К таким хранилищам относится следующее:
• localStorage — вызывается метод localStorage.clear()
• sessionStorage — вызывается метод sessionStorage.clear()
• IndexedDB — для каждой базы данных запускается метод deleteDatabase()
• регистрация сервис-воркеров — для каждого зарегистрированного СВ запускается метод unregister()
• AppCache
• БД WebSQL
• данные FileSystem API
• данные плагинов
• «cache» — сообщает браузеру, что сервер хочет очистить все кешированные данные (как выяснилось, речь идет об HTTP-кеше, а не об интерфейсе кеширования — Cache API ), связанные с источником ответа на запрос. В зависимости от браузера, он может привести к очистке предварительно отрендеренных страниц, кешей скриптов, кешей шейдеров WebGL и вариантов автозаполнения для строки поиска
• «cookies» — сообщает браузеру, что сервер хочет удалить все куки, связанные с источником ответа на запрос (как для домена, так и для его поддоменов). Данные для аутентификации также удаляются
• «executionContexts» — указывает, что сервер желает перезагрузить все контексты браузера, связанные с источником ответа на запрос
• «*» — сообщает браузеру, что сервер хочет очистить все данные, связанные с источником ответа на запрос

Директивы могут указываться как по одной:

Clear-Site-Data: "storage"

так и через запятую:

Clear-Site-Data: "storage", "cookie", "cache", "executionContexts"

Последний пример аналогичен следующему:

Clear-Site-Data: "*"

К сожалению, в настоящее время данный заголовок не поддерживается Safari (ох уж этот современный IE :)).

Вот как это должно работать в теории. Скоро мы выясним, что на практике это работает немного по-другому, а кое-что и вовсе не работает.

Практика

Фронтенд и локальный сервер

Создаем директорию для проекта, переходим в нее, инициализируем проект и устанавливаем зависимости:

mkdir clear-site-data cd !$ yarn init -y #or npm init -y yarn add cors express idb nodemon open-cli very-simple-fetch # or npm i . 

Создаем файл server.js для локального сервера и директорию public для статических файлов, а в ней файлы index.html , style.css и script.js :

touch server.js mkdir public cd !$ touch index.html style.css script.js

Не забудьте создать файл .gitignore с node_modules .

Начнем с public/index.html . Создаем контейнер для UI и секцию с кнопками для взаимодействия с локальным сервером:

 
 
Localhost
 
 Clear storages Clear cookies Clear HTTP cache Reload contexts Clear all site data 
 
 

Обратите внимание на атрибуты data-action кнопок. Это небольшая хитрость позволит нам сильно упростить и сократить код скрипта. А по классам, вы, наверное, догадались, какой CSS-фреймворк мы используем для стилизации.

Добавляем карту импортов для модулей very-simple-fetch и idb :

Честно говоря, поиск нужного файла в директории node_modules — занятие не из приятных. К тому же приходится искать не просто основной файл, но нужную версию файла. Например, ES-модуль idb хранится в директории esm .

Подключаем наш скрипт с типом module :

С вашего позволения файл со стилями style.css я пропущу.

Переходим к public/script.js .

Давайте подумаем, что должен делать наш скрипт.

Вот мои идеи на этот счет:

• записать данные в локальное хранилище
• записать данные в индексированную БД
• записать данные в кеш с помощью Cache API
• получить куки от локального сервера
• при нажатии кнопки отправлять на сервер запрос, в ответ на который сервер будет устанавливать заголовок Clear-Site-Data с соответствующей директивой.

Приступим к реализации ( // -> — означает сигнатуру):

// импортируем утилиты import simpleFetch from 'very-simple-fetch' import < openDB >from 'idb' // определяем константу для адреса сервера const LOCALHOST_URL = 'http://localhost:3000' // записываем данные в локальное хранилище // -> localStorage.setItem(key, value) localStorage.setItem('local', 'some data from localhost') // инициализируем БД // и создаем хранилище объектов // -> openDB(name, version, options) const db = openDB('db', 1, < upgrade(db) < db.createObjectStore('store') >>) // и записываем в нее данные // -> db.put(objectStore, value, key) const writeDataInDb = async () => (await db).put('store', 'some data from localhost', 'indexed') writeDataInDb() // записываем данные в кеш const cacheData = async () => < // получаем доступ к кешу или создаем его при отсутствии // ->caches.open(name) const cache = await caches.open('cache') // получаем данные от localhost и кешируем их // метод `add()` отправляет запрос и записывает ответ на него в кеш // -> cache.add(url) cache.add(`$/get-data-for-cache`) > cacheData() // получаем ссылки на DOM-элементы const boxLocalhost = document.querySelector('.localhost') const msgLocalhost = boxLocalhost.querySelector('p') // функция для выполнения операции const runAction = async (url) => < // получаем данные const < data >= await simpleFetch.get(url) // и возвращаем сообщение return data.message > // регистрируем обработчик для отправки запросов к localhost boxLocalhost.addEventListener('click', (< target >) => < // такой способ определения того, что целью клика является кнопка, // является не очень надежным, но нам он подходит, so. if (target.localName !== 'button') return runAction(`$/$`) .then((message) => < // рендерим сообщение msgLocalhost.textContent = message >) >)

Обратите внимание на то, как мы формируем URL запроса. Мы добавляем к адресу сервера значение атрибута data-action кнопки. Это первая половина хитрости.

Теперь займемся сервером ( server.js ).

Что он должен делать?

Я хочу, чтобы он делал следующее:

• обслуживал статические файлы из директории public
• отвечал статусом 200 на запрос «фавиконки» 🙂
• разрешал импортировать модули с помощью карты импортов
• возвращал данные для кеша
• передавал куки
• возвращал ответ с сообщением и заголовком Clear-Site-Data с соответствующей директивой.

const express = require('express') const app = express() // директория со статическими файлами app.use(express.static('public')) // решаем проблему с отсутствующей фавиконкой app.get('/favicon.ico', (_, res) => < res.sendStatus(200) >) // импорт модулей + куки app.get('/node_modules/*', (req, res) => < // куки res.cookie('cookie_localhost', 'Do_you_want_some_cookies?', < // это сохранит `?` encode: encodeURI >) res.sendFile(`$$`) >) // данные для кеша app.get('/get-data-for-cache', (_, res) => < res.send('data for cache from localhost') >) // ответ с сообщением и заголовком `Clear-Site-Data` с соответствующей директивой app.get('/*', (req, res) => < const type = req.url.split('-')[1] if (!type) return res.sendStatus(400) res.set('Clear-Site-Data', `"$"`) res.json(< message: `Data for localhost has been removed from $` >) >) // поехали! app.listen(3000, () => < console.log('Server ready ') >)

Мы передаем клиенту куки вместе с загружаемыми модулями. Получается, что мы делаем это дважды, но это не критично. Поскольку у нас один домен и названия куки совпадают, мы в итоге получим только одно куки.

Обратите внимание на то, как мы извлекаем тип операции — директиву для Clear-Site-Data — из тела запроса. Мы разбиваем строку в массив по символу — и извлекаем второй элемент (элемент по индексу 1). Таким образом, если сервер получил clear-storage , то типом операции (директивой) будет storage .

Также обратите внимание на то, что директива должна быть закавычена, причем кавычки обязательно должны быть двойными ( » ).

В сообщении мы просто указываем, что данные определенного типа для localhost были удалены.

Пришло время запустить сервер и убедиться в том, что все работает.

Добавляем в файл package.json команду для запуска сервера для разработки:

"scripts": < "dev": "open-cli http://localhost:3000 && nodemon server.js" >

Выполняем эту команду в терминале:

yarn dev # or npm run dev

Данная команда запускает сервер для разработки и открывает вкладку браузера по адресу http://localhost:3000 .

Открываем инструменты разработчика, переходим в раздел Application (“Приложение”) и проверяем, что все наши данные успешно сохранены в браузере:

• Local Storage
• IndexedDB
• Cookies
• Cache Storage

Нажимаем кнопку Clear storages . Получаем сообщения Data for localhost has been removed from storage от сервера и Clear-Site-Data header on ‘http://localhost:3000/clear-storage’: Cleared data types: «storage». от браузера:

Видим, что данные из локального хранилища, индексированной БД и локального кеша были успешно удалены.

Нажатие кнопки Clear cookies приводит к удалению куки:

Нажатие кнопки Clear HTTP cache , вероятно, приводит к удалению HTTP-кеша:

Кажется, что все хорошо, однако нажатие кнопки Reload contexts приводит к возникновению ошибки:

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

Дело в том, что директива «executionContexts» в настоящее время поддерживается только Samsung Internet , т. е. можно сказать, что не поддерживается. В сети можно найти информацию о том, что данная директива, скорее всего, будет удалена из спецификации.

Дальше интересней: нажатие кнопки Clear all site data также приводит к ошибке:

Хотя должно приводить к очистке данных всех типов.

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

В Firefox это работает:

Из всего этого можно сделать следующий вывод: сегодня в браузерах Chrome и Firefox можно безопасно использовать только директивы «storage» , «cookies» и «cache» . В принципе, для очистки данных всех типов в Chrome можно указать все названные директивы через запятую: это будет иметь такой же эффект, что и использование директивы * .

Кажется, что эти директивы правильно интерпретируются браузером, т. е. приводят к очистке данных указанного типа.

Но что насчет определения принадлежности данных к источнику ответа перед их очисткой? Для того, чтобы убедиться в том, что удаляются только такие данные необходимо поднять еще один сервер. Для чистоты эксперимента развернем этот сервер на Heroku .

Удаленный сервер

Начнем с самого сервера. Создаем для него директорию, переходим в нее, инициализируем проект и устанавливаем зависимости:

mkdir heroku cd !$ yarn init -y # or npm init -y yarn add cors express # or npm i . 

Определяем команду для запуска сервера в package.json :

"scripts":

Создаем файл index.js следующего содержания:

const express = require('express') const app = express() // утилита для установки CORS-заголовков const cors = require('cors') // см. ниже app.use( cors(< origin: 'http://localhost:3000', credentials: true, allowedHeaders: 'Content-Type' >) ) app.get('/favicon.ico', (_, res) => < res.sendStatus(200) >) // данные для кеша app.get('/get-data-for-cache', (_, res) => < res.send('data for cache from heroku') >) // куки — см. ниже app.get('/get-cookie', (_, res) => < res.cookie('cookie_heroku', 'Do_you_want_some_cookies?', < encode: encodeURI, sameSite: 'none', secure: true >) res.send('Here is you cookie!') >) // остальной код аналогичен коду локального сервера app.get('/*', (req, res) => < const type = req.url.split('-')[1] if (!type) return res.sendStatus(400) res.set('Clear-Site-Data', `"$"`) res.json(< message: `Data for heroku has been removed from $` >) >) const PORT = process.env.PORT || 5000 app.listen(PORT, () => < console.log('Server ready ') >)

• origin — заголовок Access-Control-Allow-Origin
• credentials — заголовок Access-Control-Allow-Credentials
• allowHeaders — заголовок Access-Control-Allow-Headers

• sameSite — директива SameSite определяет, могут ли куки передаваться между разными источниками
• secure — директива secure определяет, что куки должны передаваться только по HTTPS

Без этих настроек и еще одной на клиенте мы не сможем получить куки от «удаленного» сервера.

Для того, чтобы иметь возможность разворачивать приложения на Heroku , необходимо создать там аккаунт, а также глобально установить heroku-cli :

yarn global add heroku # or npm i -g heroku

Инициализируем репозиторий и добавляем в него файлы приложения:

git init git add . git commit -m "create app"

Создаем проект на Heroku :

heroku create

Проверяем, что наш проект привязан к Heroku-проекту, и отправляем файлы:

git remote -v git push heroku master

Полную инструкцию по деплою приложения на Heroku можно найти здесь.

Проверять работоспособность приложения по автоматически сгенерированной ссылке (например, в моем случае это https://hidden-sands-68187.herokuapp.com ) особого смысла не имеет, но можете это сделать, если хотите: перейдите по ссылке, откройте инструменты разработчика, вставьте в консоль fetch(‘/clear-storage’).then((response) => response.json()).then((< message >) => console.log(message)) и нажмите Enter . Если после этого вы получили сообщение Data for heroku has been removed from storage , значит, вы все сделали правильно.

Добавляем в public/index.html раздел с кнопками для взаимодействия с удаленным сервером:

 
Heroku
 
 Clear storages Clear cookies Clear HTTP cache 
 

И вносим несколько изменений в public/script.js :

// у вас будет другой адрес const HEROKU_URL = 'https://hidden-sands-68187.herokuapp.com' const cacheData = async () => < // . // получаем данные для кеширования от heroku cache.add(`$/get-data-for-cache`) > // получаем куки с heroku const getCookie = async () => < const < data >= await simpleFetch.get(`$/get-cookie`, < // эта настройка является обязательной credentials: 'include' >) console.log(data) > getCookie() const boxHeroku = document.querySelector('.heroku') const msgHeroku = boxHeroku.querySelector('p') // регистрируем обработчик для отправки запросов к heroku boxHeroku.addEventListener( 'click', ( < target: < dataset: < action >> >) => < if (!action) return runAction(`$/$`).then((message) => < msgHeroku.textContent = message >) > )

Перезапускаем сервер для разработки и видим в консоли сообщение от удаленного сервера:

В разделе Application находим кешированные данные и куки от heroku:

Нажимаем на кнопку Clear storages , получаем сообщения об очистке хранилищ браузера, но данные из локального хранилища, индексированной БД и кеша (!) при этом не удаляются. С локальным хранилищем и БД все понятно, они принадлежат localhost, но данные в кеше, полученные от heroku, должны были удалиться:

И это не баг Chrome (или баг не только Chrome ), точно такой же результат мы получаем в Firefox :

Директива * также не удаляет кешированные данные, полученные от heroku:

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

Нажимаем на кнопку Clear cookies , получаем сообщения об удалении куки, и куки от heroku благополучно удаляется:

Вывод

Итак, что мы имеем в сухом остатке?

Карта импортов в настоящее время поддерживается только Chrome . Будет ли она поддерживаться другими браузерами, и, если будет, когда это произойдет, неизвестно. Поэтому, несмотря на интересные возможности, использовать ее при разработке реальных приложений пока нельзя.

Что касается заголовка Clear-Site-Data , то, в целом, он неплохо справляется со своей задачей, однако тот факт, что он не поддерживается Safari , а также учитывая баг в Chrome и не очень понятное поведение браузеров по очистке кешированных данных, говорить о возможности его использования в продакшне также преждевременно.

Пожалуй, это все, чем я хотел с вами сегодня поделиться.

Благодарю за внимание и хорошего дня!