Ответ Fetch не кэшируется с сервисным работником JS - PullRequest
Новая
       6

Ответ Fetch не кэшируется с сервисным работником JS

0 голосов
/ 25 ноября 2018

Я работаю с Service Worker для PWA с Javascript

В момент получения выборки в моем файле app.js, где я буду выполнять вызовы API MercadoLibre, я произвожу впечатление отконсоль и все идет отлично с этим кодом: 

function getProducts(){
    fetch('https://api.mercadolibre.com/sites/MLM/search?nickname=JBL.MX')
    .then( res => res.json() )
    .then( products => {
        console.log( products.results )
    } )
};

getProducts();

Ответ консоли: 

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

И в моем Service Worker I'mполучать с событием Fetch вызов этого API, проверяя, что это API MercadoLibre, а затем сохраняя информацию в моем динамическом кэше следующим образом: 

self.addEventListener('fetch', e => {

    let resFetch;

    if( e.request.url.includes('https://api.mercadolibre/')){ 
        console.log(' API OK');
        resFetch =  apiFetch( CACHE_DYNAMIC_NAME, e.request, e.request.url );
    }

     e.respondWith( resFetch );
 });

функция apiFetch , которая вызывает другойФункция обновления кэша: 

function apiFetch( cacheName, request, url ) {

    return fetch( request ) 
        .then( res => {
            if( res.ok ) { 
                console.log(url) // url ok
                updateDynamiCache( cacheName, request, res.clone() ); 
                return res.clone();
            } else {
                return cache.match( request );
            }
        }).catch( err => { 

            return caches.match( request ); 

        });
}

И updateDynamiCache Обновление динамического кэша с ответом API: 

function updateDynamiCache( dynamicCache, req, response ){
    if( response.ok ){ 
        return caches.open( dynamicCache ).then( cache => { 
            cache.put(req, response.clone() ); 
            return response.clone();
        })
    } else {
        return response; 
    }
}

Все это работает, если я используювызовите некоторый API, например: https://randomuser.me/api/?results=5000

Но если я вызову mercadolibre API: https://api.mercadolibre.com/sites/MLM/search?nickname=JBL.MX обновит мой динамический кэш, но никогда не сохраняет ответ, так как он остается пустым.

Прикрепленное изображение моего динамического кеша:

Dynamic Cache Empty

...