ServiceWorker ifs для определения конкретного кеша для определенного содержимого

Question

На моем веб-сайте есть 6 различных элементов контента, которые я хочу контролировать с помощью методов кэширования конкретного сотрудника службы.

1. [Предварительное кэширование] статического контента (CSS, JS, шрифты)
2. [кэш-возврат к сети] CDN (изображения из CloudFront S3)
3. [Сеть замещающего к кэш] INDEX (главная страница)
4. [кэш запасной вариант к сети] сТР (domain.com/sth -> HTML)
5. [пропуск] API (AJAX звонки)
6. [пропуск] ДРУГИЕ STUFF (аналитика, менеджер тегов)

Я сделал 6 сослагательного наклонения внутри ServiceWorker выборки события.

Мой вопрос ... Это хороший подход? Не методы ... потому что это специфично для моего сайта/блога. Но что вы думаете об этом, если? Правильно ли он фильтрует определенный контент и использует правильный кеш?

var domain = location.host.split('.')[0] 

regexStatic = new RegExp('https://' + location.host + '/build/(.*)') 
regexCdn = new RegExp('https://cdn.' + domain + '(.*)') 
regexIndex = new RegExp('https://' + location.host + '/') 
regexApi = new RegExp('https://' + location.host + '/api/(.*)') 
regexPages = new RegExp('https://' + location.host + '/(.*)') 

self.addEventListener('fetch', function (event) { 
    // STATIC 
    if (regexStatic.test(event.request.url)) { 
    event.respondWith(
     // 
    ) 
    return 
    } 

    // CDN 
    if (regexCdn.test(event.request.url)) { 
    event.respondWith(
     // 
    ) 
    return 
    } 

    // INDEX 
    if (regexIndex.test(event.request.url)) { 
    event.respondWith(
     // 
    ) 
    return 
    } 

    // API 
    if (regexApi.test(event.request.url)) { 
    return 
    } 

    // PAGES 
    if (regexPages.test(event.request.url)) { 
    event.respondWith(
     // 
    ) 
    return 
    } 

    // OTHER 
    console.log('NOT INCLUDED IN CACHE: ', event.request.url) 
}) 

Answer 1

Почему вы делите содержимое.

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

Просто отметьте content-type при выполнении вызовов API и не кэшируйте эти ответы.

Просто разделите содержание на две категории. Cache-able/Non Cache-able.

Получить больше здесь: https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker