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

История

У меня есть веб-сайт, использующий традиционный кеш браузера, сайт сильно кэшируется, до 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. В следующий раз, когда пользователь зайдет на сайт, он будет использовать последнюю версию.

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


person Linh Pham    schedule 27.05.2016    source источник


Ответы (1)


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

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

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

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

И теперь ваш сервис-воркер готов к выборке из нового кеша.

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

  • Чтобы использовать кеш с именем, производным от версии приложения.
  • Чтобы не использовать self.skipWaiting() во время установки. Таким образом вы гарантируете, что уже установленный сервис-воркер продолжит обслуживать текущий контент.
  • Чтобы обновить версию в сервис-воркере, вызовите механизм обновления.
person Salva    schedule 21.06.2016
comment
Большое спасибо за ответ, это конечно, резюме, которое я ищу. - person Linh Pham; 22.06.2016
comment
Обратите внимание, что браузер будет использовать кеш, если, например. Заголовок Expires говорит, что может. Таким образом, сначала используется кеш сервис-воркера, а затем используется кеш браузера. Другими словами - нет, вы не будете загружать новые скрипты с сервера, просто изменив ключ кеша сервис-воркера. См. также: stackoverflow.com/questions/42301123/ - person Nux; 29.03.2018