Комментарии 2
Легкий оффтоп — в рамках упражнения «понимаю промисы лучше» попробовал переделать
как вам?
Вот этот промис-hell
во что-то менее адовое, (но без использования async/await):self.addEventListener('fetch', event => {
event.respondWith(
caches.open('mysite-dynamic')
.then(cache => cache.match(event.request)
.then(response => {
const fetchPromise = fetch(event.request)
.then(networkResponse => {
cache.put(event.request, networkResponse.clone())
return networkResponse
})
return response || fetchPromise
}))
)
})
self.addEventListener('fetch', event => {
const cache$ = caches.open('mysite-dynamic');
const refreshCache = () => Promise.all([
fetch(event.request),
cache$
]).then(([networkResponse, cache]) => {
cache.put(event.request, networkResponse.clone())
return networkResponse;
});
event.respondWith(
cache$
.then(cache => cache.match(event.request))
.then(cacheResponse => {
const refreshedCache$ = refreshCache();
return cacheResponse || refreshedCache$;
})
)
})
как вам?
+1
Тут стоит предупредить, что нужно осторожно обращаться с респонсами. Если вы попробуете один респонс (без клонирования) отправить в кеш и вернуть из fetch, то в ряде случаев будете наблюдать битый респонс в браузере (во всяком случае в Хроме).
+1
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Рецепты по приготовлению офлайн-приложений