Лучший подход Service Worker с идентификатором версии строки запроса на тяжелом кэшированном сайте

Question

История

Я получил сайт, использующий традиционный кеш браузера, сайт сильно кешируется, до статического контента до 365 дней.

И для очистки кэша после развертывания новой версии я использую строку запроса идентификатора версии, например:

<script src="js/main.js?version=1.3.0"></script>

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

---

ситуация

Теперь у нас есть Service Worker, и я интегрировал его в свой веб-сайт. Пока все в порядке, строка запроса идентификатора версии все еще используется.

// simply cache all the static contents
global.toolbox.router.get('/', global.toolbox.networkFirst); 
global.toolbox.router.get(/(.js|.css|.png|.jpg|.json|.html)/, global.toolbox.fastest);

И то же поведение, что и до интеграции ПО. И все же обновление идет медленно, как всегда...

---

Вопрос

И мне интересно, есть ли лучший подход? который может делать что-то похожее на приведенное ниже и при этом сохранять механизм кеша (для старых браузеров)

1. Найдена новая версия
2. По-прежнему использовать старый контент последней версии,
3. В процессе извлечения нового контента новой версии,
4. При следующем посещении сайта пользователи будут использовать самую последнюю версию.

ПРИМЕЧАНИЕ. Цель - быстрее загружать сайт при развертывании новой версии.

Answer 1

Именно так работает жизненный цикл сервисных работников. Давайте посмотрим на это в замедленном режиме:

Во-первых, вам нужно изменить сервисный ключ на уровне байтов, чтобы принудительно обновить его: вы можете включить версию приложения и сохранить ее в переменной. var version = "1.0.0",

Теперь браузер найдет нового работника сервиса и активирует его install событие. В этом обработчике откройте ваш новый кеш (назовите его после версии вашего сайта. Например: "cache-v" + version) и получить все новые ресурсы.

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

И теперь ваш сервисный работник готов к извлечению из нового кэша.

Ключевые моменты здесь:

• Использовать кеш с именем, полученным из версии приложения.
• Не использовать self.skipWaiting() во время установки. Таким образом, вы гарантируете, что уже установленный сервисный работник продолжает обслуживать текущий контент.
• Обновление версии в сервисном работнике для вызова механизма обновления.