обрабатывать ответ работника таможенной службы - PullRequest
Новая
       8

обрабатывать ответ работника таможенной службы

0 голосов
/ 10 октября 2019

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

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

Вот мой полный скрипт SW

Пример кода 

self.addEventListener('fetch', function (event) {
    var cacheType = (function () {
        if (is('image', event.request.url)) {
            return cacheImage;
        } else if (is('html', event.request.url)) {
            return cacheHtml;
        } else if (event.request.headers.get('accept').includes('text/css') || event.request.headers.get('accept').includes('*/*')) {
            return cacheFiles;
        } else {
            return cacheFiles;
        }
    })();

    // Jump to offline page when there is no network
    if (!self.navigator.onLine) {
        //console.log('[ServiceWorker] No network, jump offline page');
        event.respondWith(
            caches.match(event.request).then(function (response) {
                return caches.match(offlineUrl);
            })
        );
    } else {
        event.respondWith(
            caches.open(cacheType).then(function (cache) {
                return cache.match(event.request).then(function (response) {
                    if (response) {
                        // console.log('[ServiceWorker]Take in the cache %s', event.request.url);
                        if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') return;

                        setTimeout(function(){
                            fetch(event.request).then(function(response) {
                                if(isValidResponse(response, event.request.url)) {
                                    caches .open(cacheType) .then(function (cache) {
                                        if(event.request.method == "GET" && (response.status === 200 || response.status === 0)){
                                            cache.put(event.request, response);
                                        }
                                    });
                                }
                            });
                        }, 2000);
                        return response || unableToResolve();
                    }

                    if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') return;

                    return fetch(event.request).then(function (response) {
                        if(event.request.method == "GET" && (response.status === 200 || response.status === 0)){
                            cache.put(event.request, response.clone());
                        }
                         return response ||  unableToResolve();
                    }).catch(function(err){
                         return unableToResolve();
                    });
                });

                function unableToResolve () {
                    console.log('[ServiceWorker] fetch request failed in both cache and network');
                    return new Response('<h1>Service Unavailable</h1>', {
                        status: 503,
                        statusText: 'Service Unavailable',
                        headers: new Headers({
                          'Content-Type': 'text/html'
                        })
                    });
                }

            })
        );
    }
});

Я пытался безуспешно.

1 Ответ

0 голосов
/ 10 октября 2019

Из того, что я мог понять из вашего комментария.

что я хочу, когда в автономном режиме и URL-адрес запроса не находится в кеше, вернуть пользовательский HTML-файл ableToResolve

Когда вы в автономном режиме !self.navigator.onLine будет истинным.

Ваш текущий код не использует unableToResolve в этом состоянии. 

if (!self.navigator.onLine) {
    event.respondWith(async function() {
   const cachedResponse = await caches.match(event.request);
   if (cachedResponse) {
     return cachedResponse;
   }else{
     return unableToResolve();
     // Or you can return caches.match(offlineUrl); as your existing code does.
   }
  }());
}
...