Почему хранилище кеша в инструменте разработчика Chrome становится пустым в автономном режиме

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

const cacheName = 'myCacheVersion1';
var filesToCache = [
    '/',
    '/service-worker/offline-page.html',
    '/service-worker/sw.js'
]

const offlineUrl = 'https://gmc-test.mytrah.com/service-worker/offline-page.html';

this.addEventListener('install', event => {
    event.waitUntil(
        caches.open(cacheName).then(function(cache){
            console.log(offlineUrl);
            return cache.addAll(filesToCache);
        })
            .then(() => self.skipWaiting())
    );
})

self.addEventListener('activate', function(e) {
    console.log('[ServiceWorker] Activate');
    e.waitUntil(
        caches.keys().then(function(keyList) {
            return Promise.all(keyList.map(function(key) {
                if (key !== cacheName) {
                    console.log('[ServiceWorker] Removing old cache', key);

                    return caches.delete(key);
                }
            }));

        })
    );
    return self.clients.claim();
});

this.addEventListener('fetch', event => {
    console.log(event.request);
    event.respondWith(
        fetch(event.request).catch(() => caches.match(event.request))
    )
});`

Выше показан код сервисного работника. заранее спасибо


javascript progressive-web-apps service-worker
person Deeksha Mulgaonkar    schedule 31.08.2018    source источник
comment
Каков ожидаемый результат?   -  person noogui    schedule 31.08.2018
comment
@noogui результат должен быть таким, файлы также должны кэшироваться в автономном режиме. Как я уже сказал, он кэшируется в онлайн-режиме, но как только я переключаюсь в автономный режим, хранилище кеша становится пустым. Ожидаемый результат должен быть таким: кэшированные файлы будут отображаться, когда я нахожусь в автономном режиме или когда сеть недоступна.   -  person Deeksha Mulgaonkar    schedule 01.09.2018
comment
Звучит как ошибка Chrome. Вы должны написать вопрос с ними.   -  person abraham    schedule 04.09.2018
comment
Я не вижу такого поведения в Chrome. Ваш сайт прошел аудит Lighthouse?   -  person TimHayes    schedule 04.09.2018
comment
Такое же поведение наблюдается в версии Chrome 70.0.3538.110.   -  person Ally    schedule 22.11.2018
comment
Кажется, что это работает только в том случае, если у вас есть кешированный текущий конкретный URL-адрес. Я пытался всегда обслуживать index.html для диапазона URL-адресов для моего SPA.   -  person Ally    schedule 22.11.2018

Ответы (2)


arrow_upward
0
arrow_downward

Мне кажется, проблема в том, что вы правильно кешируете файлы, но когда вы в автономном режиме и сервис-воркер пытается получить предварительно кэшированные активы, вы на самом деле запрашиваете их из сети:

this.addEventListener('fetch', event => {
    console.log(event.request);
    event.respondWith(
        fetch(event.request).catch(() => caches.match(event.request))
    )
});`

Вы должны сделать что-то вроде этого:

event.respondWith(
    caches.open(cacheName).then((cache) => {
       return cache.match(evt.request).then((response) => {
           // get from the cache, then make a network request if theres no cache
           return response || fetch(event.request);
       } 
    }
)
person Ray Kim    schedule 04.10.2019

arrow_upward
0
arrow_downward

Проблема

Я столкнулся с подобной проблемой, работая над сервисным работником. В тот момент, когда я помечал сеть как автономную, кеш исчезал из хранилища кеша. Проблема возникла из-за того, что я сохранил свой файл сервисного работника в папке javascripts. Так же, как OP поместил в папку service-worker. Теперь вышесказанное приводит к проблеме масштаба.

Исправить

Следовательно, для того, чтобы ваш сервис-воркер заработал (без каламбура), вам нужно переместить файл сервис-воркера в корневую папку (при этом уделите особое внимание безопасности).

Документация

Как цитирует MDN:

Сервисный работник будет перехватывать запросы только от клиентов, находящихся в области действия сервисного работника.

Максимальной областью действия сервисного работника является его местоположение.

Вы также можете установить область действия, передав путь scope при регистрации своего Service Worker, например

navigator.serviceWorker
  .register('/cache-worker.js', {
    scope: '/some-folder' 
    /* but again, you can never put your service worker inside a dir and 
       try to set a scope which is outside of the service worker dir. 
       It can always be at a lower level than where your service worker file resides..
  })

...
person Mr. Alien    schedule 29.04.2020