Мониторинг прогресса AJAX (XMLHttpRequest) не работает с сервисными работниками - PullRequest
Новая
       6

Мониторинг прогресса AJAX (XMLHttpRequest) не работает с сервисными работниками

0 голосов
/ 30 января 2019

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

После добавления работника службы я заметил, что индикатор выполнения больше не работает (панель будет отображаться, но никогда не будет обновлена ​​допоказать, сколько файлов было загружено).Я протестировал несколько браузеров, чтобы убедиться, что это не зависит от браузера и дает одинаковые результаты во всех из них (chrome, firefox, edge, safari, а также в мобильных версиях).

Вот первая частьмой ajax-запрос. 

$.ajax({
    type: "POST",
    url: url,
    datatype: "json",
    data: JSON.stringify(data),
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = getCurrentProgress(evt.loaded, evt.total);
                $("#progressBarContainer .progress > .progress-bar").css({ "width": percentComplete + "%" });
                $("#progressBarContainer .progress > .progress-bar .percent-complete").text(percentComplete + "%");
            }
        }, false);

        return xhr;
    }
})

Вот код в моем файле рабочего сервиса для обработки событий выборки. 

self.addEventListener("fetch", event => {
    event.respondWith(
        caches.open(staticCacheName)
            .then(cache => {
                return cache.match(event.request)
                    .then(response => {
                        if (response) {
                            return response;
                        }
                        else {
                            return fetch(event.request);
                        }
                    });
            })
    );
});

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

Ответы [ 2 ]

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

Если вы ищете индикатор выполнения, который может сказать вам, сколько содержимого было загружено в кэш-память с помощью сервисного работника, это почти невозможно, так как SW не имеет доступа к DOM.Но вы можете противостоять этому вопросу с другой стороны.Пожалуйста, ознакомьтесь с этим https://stackoverflow.com/a/54222155/9900456, а также с другими ответами на ваши вопросы!Ура:)

0 голосов
/ 30 января 2019

Я нашел ответ здесь .Мне нужно было, чтобы работник службы игнорировал почтовые запросы.Я обновил свой код работника службы до этого: 

self.addEventListener("fetch", event => {
    //This is the code that ignores post requests
    if (event.request.method === "POST") {
        return;
    }

    event.respondWith(
        caches.open(staticCacheName)
            .then(cache => {
                return cache.match(event.request)
                    .then(response => {
                        if (response) {
                            return response;  //The URL is cached
                        }
                        else {
                            return fetch(event.request);  //Go to the network.
                        }
                    });
            })
    );
});
...