Вопросы работника сервиса

Question

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

Одна проблема заключается в том, что когда страница полностью загружена, и я перехожу на вкладку Приложения Chrome devtools, я вижу довольно много в Cache:

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

Еще более тревожно, когда я нажимаю на Clear Site Data кнопка в этом разделе (со всеми отмеченными опциями), красный Cache Storage часть круговой диаграммы не падает до нуля. (РЕДАКТИРОВАТЬ... наблюдение: хотя это работает безупречно в окне "Инкогнито"... при нажатии на кнопку красная часть падает до нуля.)

Кроме того, когда я ударил F5 чтобы перезагрузить страницу после очистки данных сайта, сервисный работник не может снова установить должным образом... кажется, застрял на installing:

Чтобы снова начать работать, я должен нажать на unregister ссылку в этом разделе, а затем F5, (РЕДАКТИРОВАТЬ... снова... работает безупречно в окне инкогнито... работник службы не застрял на installing после удара F5.)

Другая проблема, с которой я сталкиваюсь в этом коде, заключается в том, что значения в разделе Cache Storage (кэш рабочего сервиса) заполнены неправильно:

Все Content-Length информация равна нулю, а Time Cached информация также частично отсутствует.

Дело в том, что ни одна из этих проблем не очевидна в этом примере сервисного работника, поэтому, должно быть, я что-то не так делаю.

Answer 1

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

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

Попробуйте загрузить свой сайт на какой-либо другой сервер и посмотрите, не исчезла ли ошибка, или, что еще лучше, запустите небольшой локальный сервер, чтобы проверить работника сервиса. Если вы хотите установить очень простой файл node.js и запустите 'npm install -g http-server', затем откройте терминал / командную строку внутри корневой папки вашего сайта и запустите'http-server -o', и он запустит и откроет тестовый сервер в браузере по умолчанию.

Последнее замечание: при регистрации вашего сервисного работника не проверяйте https, если вы работаете на localhost или 127.0.0.1, ваш сервисный работник все еще может быть запущен и протестирован без необходимости использования https, а если ваш сайт работает, он не может запустить без https, не нужно проверять это. Проверка HTTPS сама по себе не является проблемой, но она не является необходимой, и это делает вас неспособным протестировать вашего сервисного работника локально.

прибавление

Вы, кажется, путаете красную полосу с желтой полосой работника сервиса. Ваш обслуживающий работник хранит только index.html, размер которого составляет 3,4 КБ. Остальная часть кэшированной памяти красным цветом не обрабатывается вашим работником службы.

Пример ServiceWorker.js

Этот сервисный работник будет кэшировать указанные ресурсы в кеш, и если будут выбраны ресурсы, не указанные в объекте CACHE, он попытается динамически добавлять записи в кэш (хорошо, если вы забудете обновить свой сервисный работник всеми последними содержание). Сначала он использует кеш, если не в кеш, получает из сети и сохраняет в кеш для последующих посещений.

Этот скрипт опробован и протестирован, используйте его в качестве основы для собственного проекта, если хотите.

'use strict';

// Our current cache version and its contents.
var CACHE = {
    version: 'site-version-number',
    resources: [
        '/index.html', // caches index.html
        '/css/' // caches all the contents inside the /css folder
    ]
};

// Install service worker, adding all our cache entries
this.addEventListener('install', function (event) {
    event.waitUntil(
            caches.open(CACHE.version).then(function (cache) {
        return cache.addAll(CACHE.resources);
    })
            );
});

// Handle a fetch request. If not fetched from cache, attempt to add to cache.
this.addEventListener('fetch', function (event) {
    event.respondWith(
            caches.match(event.request).then(function (resp) {
        return resp || fetch(event.request).then(function (response) {
            return caches.open(CACHE.version).then(function (cache) {
                cache.put(event.request, response.clone()).catch(function (error) {
                    console.log('Could not add to cache!' + error);
                });
                return response;
            }).catch(function (error) {
                console.log('Could not open cache!' + error);
            });
        }).catch(function (error) {
            console.log('Resource not found!' + error);
        });
    }).catch(function (error) {
        console.log('Resource not found in the cache!' + error);
    })
            );
});

// Activate service worker
this.addEventListener('activate', function (event) {
    // Remove all caches that aren't whitelisted
    var cacheWhitelist = [CACHE.version];
    event.waitUntil(
            caches.keys().then(function (keyList) {
        return Promise.all(keyList.map(function (key) {
            if (cacheWhitelist.indexOf(key) === -1) {
                return caches.delete(key);
            }
        }));
    })
            );
});

Answer 2

Это связано с тем, что вы кэшировали непрозрачные ответы в вашем кэше, что занимает слишком много места в cacheStorage.