Сервисный работник вызывает неотзывчивость страницы - PullRequest
Новая
       7

Сервисный работник вызывает неотзывчивость страницы

0 голосов
/ 20 февраля 2019

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

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

Я пытаюсь понять, почему переход на другую страницу не мгновенный.Разве работник сервиса не существует независимо от моего сайта?

Index.js: 

$(document).ready(function () {
    // retrieve the form URLs to pass to the service worker
    var urls = [];
    $('.formTile').each(function {
        var url = $(this).attr('href');
        urls.push(url);
    });

    nav.serviceWorker.controller.postMessage(urls);
}

Работник сервиса JS: 

self.addEventListener('message', function (event) {
    var urls = event.data;
    urls.forEach(function (url) {
        var pageRequest = new Request(url);

        var cacheSearch = function(request) {
            return caches.match(request).then(function (matching) {
                if (matching /* and some other checks */) {
                    // log output
                } else {
                   caches.open('offline-forms').then(function (cache) {
                       return fetch(request).then(function (response) {
                           return cache.put(request, response);
                       });
                    });
                }
                return true;
            }, function () {
                // log error
                return false;
            });
        });

        event.waitUntil(cacheSearch (pageRequest));
    }
}
...