Теперь, когда наши активы хранятся в кеше, сайт загружается для посетителя практически мгновенно. Это происходит потому, что сервис-воркер перехватывает запрос и обслуживает ресурсы из кеша, а не по сети.
Но что, если мы отправим обновление для style.css или app.js? Если сайт никогда не загружает их с сервера, пользователь никогда не получит их.
Представьте себе этот кусок CSS:
body {
background: white;
}
Теперь мы хотим изменить фон на светло-серый цвет:
body {
background: #eaeaea;
}
Пользователи, у которых уже есть style.css, сохраненные в кеше, останутся на белом фоне. Пока не…
Обновить кеш в фоновом режиме
Помните этот код из прошлой части?
// service-worker.js
self.addEventListener('fetch', function (event) {
event.respondWith(fromCache(event.request));
}
Внутри этого прослушивателя событий мы также можем указать нашему сервисному работнику обновить ресурсы в фоновом режиме.
Добавьте следующую функцию в service-worker.js:
var update = function (request) {
return caches.open(cache_name).then(function (cache) {
return fetch(request).then(function (response) {
return cache.put(request, response);
});
});
}
И добавьте вызов этой функции из прослушивателя событий:
self.addEventListener('fetch', function (event) {
event.respondWith(fromCache(event.request));
event.waitUntil(update(event.request));
}
Так что же это?
Событие fetch запускается каждый раз, когда браузер должен сделать запрос. В этом случае один раз для style.css и один раз для app.js.
Когда это происходит, мы отправляем объект request в функцию update(). Кэш открывается, и затем браузер fetch() ресурс, например style.css, а затем сохраняет его в кеше, используя cache.put().
Но фон по-прежнему белый!
да. Внутри прослушивателя событий fetch происходят две вещи:
- Вместо этого замените сетевой запрос активами из кеша.
- В любом случае сделайте сетевой запрос и получите свежие ресурсы с сервера.
Шаг второй происходит в фоновом режиме, когда на сайт уже загружены «старые» ресурсы. Пользователь не увидит новый серый фон до следующего посещения сайта.
Это похоже на обновление Chrome. Загрузка начинается, когда вы открываете ее и начинаете просматривать веб-страницы, но вы не сможете использовать новую версию, пока не перезапустите ее.
Но разве это не ужасно ?!
Наш менеджер проекта и / или клиент хотят, чтобы все пользователи сразу получили новый фон! Разве они не видят его до второго посещения после того, как мы выложили обновление?
Что ж, это, конечно, то, к чему мы не привыкли, когда думаем об обновлении веб-сайта.
Но если мы думаем об этом больше как о приложении, это уже не так уж странно. Если Facebook отправит обновление для своего приложения, пользователи не будут использовать новую версию, пока они… ну, не обновят ее.
А веб-сайты все больше напоминают приложения. И это здорово!
Заявление об ограничении ответственности…
Это была третья и последняя часть третьей части. Весь код сервис-воркера в этих трех сообщениях в блоге взят из этого замечательного ресурса:
