Сервисный работник не возвращает файл из кеша

Question

Я пытаюсь кэшировать одностраничное веб-приложение с работником сервиса. Он должен получать все свои файлы из кеша и обновлять этот кеш только при публикации новой рабочей версии сервиса.

С помощью функции предварительного кэширования я записываю некоторые файлы в кеш следующим образом:

function precache() {
return caches.open(CACHE).then(function(cache) {
    return cache.addAll([
        'index.html',
        'js/script.js',
        'img/bg.png',
        'img/logo.svg',
        ...
    ]);
});
}

(Я пытался кешировать с и без "/" перед путями, и даже с абсолютными путями. Без разницы)

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

self.addEventListener('fetch', function(evt) {
    evt.respondWith(
        caches.match(evt.request).then(function(response) {
            if(response){
                return response;
            } else {
                reject('no result');
            }
        }).catch(function(){
            if(evt.request.url == 'https://myurl.com'){
                return caches.match('/index.html');
            }
        });
    )
});

Index.html из функции catch обрабатывается правильно и, в свою очередь, запрашивает другие файлы, например /js/script.js. Эти запросы отображаются в консоли следующим образом:

Запрос {метод: 'GET', URL: ' https://myurl.com/js/script.js',... реферер: ' https://myurl.com/' }

Но они не возвращают ответ, только уведомление, как это показывает:

FetchEvent для " https://myurl.com/js/script.js" привел к ответу об ошибке сети: объект, который не был Response, был передан responseWith().

Я что-то здесь упускаю?

Answer 1

Благодаря ссылке от Раджита https://developer.mozilla.org/en-US/docs/Web/API/Cache/match я обнаружил, что caches.match() функция принимает опцию-объект.

Я обновил эту строку в моем сервисном работнике, чтобы

caches.match(evt.request,{cacheName:CACHE,ignoreVary:true}).then(function(response) {

поэтому он включает имя кеша и игнорирует сопоставление заголовка VARY, а теперь возвращает правильные файлы.

Answer 2

У меня была та же проблема, и она, кажется, была решена с помощью ignoreVary:true параметр. В документации прямо говорится, что cacheName параметр игнорируется Cache.match()

Answer 3

Важным примечанием является добавление всех возможных версий URL-адресов без косой черты в конце, потому что даже при автозаполнении это кажется двумя разными вещами. Так, например, если у вас была pwa в ,

вызовdomain/folder/онлайн и кеширование не помогутdomain/folderработать в автономном режиме (в некоторых случаях), если вы ранее не обращались к более позднему онлайн.

Решение:

при добавлении через caches.addAll или подобное добавляйте оба

'/folder/'

И

'/folder'.

С другой стороны, что никогда не делало для меня ничего, так это ignoreVary .