Я пытаюсь кэшировать изображения, которые я собираю из хранилища Firebase в SPA с VueJS.Все изображения загружаются асинхронно.Я не планирую использовать какую-либо библиотеку кеширования, обычный кеш в порядке.Тем не менее, когда я смотрю на запросы Сети, я, честно говоря, очень смущен тем, что происходит.Вот ссылка с 4 изображениями, содержащая сетевой запрос от инструментов разработчика Chrome
https://imgur.com/a/dYuJKag
Похоже, что существует запрос OPTIONS, который сначала возвращает 0 байт?Я действительно не уверен, что это такое.Затем есть запрос GET, который возвращает около 0,5 КБ, возможно, получая URL-адрес для загрузки и некоторые метаданные, а затем фактически получает изображение.
Я увидел, что есть также опция 'cacheControl', которую вы можете установить для метаданныхдля файла в хранилище, но документы на самом деле ничего не говорят о том, как он работает или что вы должны с ним делать.Единственное, что там написано: «Служит заголовком« Cache-Control »при загрузке объекта».(https://firebase.google.com/docs/reference/js/firebase.storage.FullMetadata). Я действительно не знаю, полезно ли это вообще, или могу ли я пойти дальше и проигнорировать это.
Хотя я не уверен, что это уместно, вот код, который яиспользую для получения URL-адресов изображений
let size = 0
if (this.width <= 50) { size = 50 }
else if (this.width <= 90) { size = 90 }
else if (this.width <= 130) { size = 130 }
else { size = 280 }
storage.ref(`Users/${this.userID}/thumb@${size}_${this.novelID}`).getDownloadURL()
.then(url => {
this.imageURL = url
})
.catch(err => {
console.log('no url in storage', err)
}) //storage
Я использую двустороннюю привязку данных от vuejs, чтобы показать изображение при получении URL-адреса, в противном случае я просто показываю заполнитель.
Полагаю, не очень важно знать, что делают все эти запросы, так как я могу просто кэшировать их все в сервисном работнике и оставить все как есть, но мне довольно любопытно. Если кто-то знает, что происходит,это было бы прекрасно.