Workbox Service Worker дублирует загрузку или не читает из кеша?

Question

У меня есть эти 2 изображения здесь:

Существует ли причина, по которой на первом изображении на вкладке «Сеть» Google Chrome Inspector выполняются две операции для каждого изображения:

1. Выбрать из кэша?
2. XHR с сервера?

Значит ли это, что каждый раз, когда я загружаю эту страницу, я перезагружаю файлы? Должно ли приложение вместо этого просто ссылаться на кеш и загружаться только при обновлении файла?

Нужно ли настраивать веб-пакет так, чтобы мои активы использовали хэши в своем имени, чтобы помочь с версиями, такими как мои файлы .js?

редактировать: Это в режиме разработки или webpack-dev-server

Answer 1

Вы используете стратегию StaleWhileRevalidate, которая сразу же ответит из кэша, но автоматически выполнит fetch() "в фоновом режиме", чтобы гарантировать, что данный актив является новым для в следующий раз, когда это будет запрошено.

Поэтому ожидается то, что вы видите.

Если вы используете схему, которая добавляет хэши к вашим активам, тогда лучше использовать стратегию, подобную CacheFirst, так как вы будете знать, что если у вас есть запись в кеше для данный URL всегда будет соответствовать ожидаемому контенту. Тем не менее, еще одна вещь, которую вы хотели бы сделать в этом случае, - это установить некоторую верхнюю границу размеров кеша с помощью workbox.expiration, чтобы вы не хранили в итоге постоянно растущее число старых версий одного и того же актива.