Почему сервисный работник не обрабатывает события извлечения - PullRequest
Новая
       18

Почему сервисный работник не обрабатывает события извлечения

0 голосов
/ 05 января 2020

Я пытаюсь внедрить SW в моем проекте, работаю сначала «онлайн» и сохраняю данные в кеш при загрузке с сервера.

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

Когда я запускаю localhost в первый раз, я вижу, что мой SW установлен и активирован, но затем, когда я делаю какие-то действия в приложении, событие «получить» eventListener не запускается, и если я при попытке обновить sh я вижу новое ПО, ожидающее активации, и вкладка застревает в режиме загрузки.

мой код: 



self.addEventListener('install', e => {
    console.log('SW installed: ', e);
})

self.addEventListener('activate', e => {
    console.log('SW activated: ', e);
    // Remove unwanted caches
    e.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(c => {
                    if (c !== cacheName) {
                        console.log('SW: Claering old cache')
                        return caches.delete(c)
                    }
                })
            )
        })
    )
})


self.addEventListener('fetch', e => {
    // console.log('SW: Fetching');
    const { request } = e
    const fetchOnline = request.headers.get('X-Source') === 'fetch' 
    console.log('request: ',request, 'fetchOnline: ',fetchOnline)
    if (request.method !== 'GET' || fetchOnline) { return; }
    e.respondWith(
        fetch(request)
            .then(res => {
                // Make a copy of response
                const resClone = res.clone()
                // Open cache
                caches
                    .open(cacheName)
                    .then(cache => {
                        console.log('cache; ',cache);
                        // Add response to cache
                        cache.put(request, resClone);
                    });
                return res
            }).catch( err => {
                console.log('err: ', err);
                return caches.match(request).then(res => res)
            })
    )
})

Что я здесь не так делаю?

...