Как кешировать бюст sw-toolbox?

Question

Я играл с работниками сферы обслуживания и sw-toolbox. Оба являются отличными методами, но, похоже, имеют свои недостатки.

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

По сравнению с методом sw-toolbox все, что мне нужно добавить, это следующий код:

self.toolbox.router.default = self.toolbox.networkFirst;

self.toolbox.router.get('/(.*)', function (req, vals, opts) {
    return self.toolbox.networkFirst(req, vals, opts)
        .catch(function (error) {
            if (req.method === 'GET' && req.headers.get('accept').includes('text/html')) {
                return self.toolbox.cacheOnly(new Request(OFFLINE_URL), vals, opts);
            }
            throw error;
        });
});

Тогда проблема кеширования страниц будет решена. Вот моя проблема: после применения sw-toolbox к моему проекту старый сервисный работник не будет очищен или заменен новым, если я не перейду к инструментам dev, чтобы очистить его.

Есть идеи как обойти это?

Answer 1

Вот моя проблема: после применения sw-toolbox к моему проекту старый сервисный работник не будет очищен или заменен новым, если я не перейду к инструментам dev, чтобы очистить его.

Браузер проверяет наличие обновлений файла рабочего сервиса каждый раз, когда он запрашивает ресурс в области рабочего сервиса. Если есть разница в байтах в файлах рабочего сервиса, браузер установит нового работника сервиса. Вам нужно только вручную обновить работника сервиса в средствах разработки, потому что приложение все еще работает, и браузер не хочет активировать нового работника сервиса, пока старый еще используется.

Если вы закроете все страницы, связанные с работником службы (как это делал пользователь при выходе из приложения), браузер сможет активировать нового работника службы при следующем открытии вашей страницы.

Если вы хотите заставить нового сервисного работника вступить во владение, вы можете добавить self.skipWaiting(); к install событие. Вот некоторая документация с примером.

Из этого поста Джейка Аричбальда вы можете узнать практически все, что вам нужно знать о жизненном цикле работника сервиса.

Что касается кеширования и управления кешем, такие инструменты, как sw-toolbox, будут обрабатывать кэш для вас. И на самом деле, Workbox - это новый инструмент, предназначенный для замены sw-toolbox и sw-precache. Он также будет обрабатывать очистку кеша и управление кешем (сравнивая хэши файлов и устанавливая / отслеживая даты истечения срока действия ресурса).

Вообще говоря, вы всегда должны использовать такой инструмент, как Workbox, для написания своих сервисных работников. Написание их вручную подвержено ошибкам, и вы, скорее всего, пропустите угловые случаи.

Надеюсь, это поможет.

PS Если вы в конечном итоге не используете skipWaiting и вместо этого только обновление, когда страница закрыта и повторно открыта пользователем, вы все равно можете включить автоматическое обновление для разработки. В инструментах разработчика Chrome Приложение> Сервисные работники имеет опцию Обновление при перезагрузке для автоматического обновления сервисного работника.

Answer 2

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

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

self.addEventListener("activate", event => {

console.log("service worker activated");

//on activate
event.waitUntil(caches.keys()
    .then(function (cacheNames) {

        cacheNames.forEach(function (value) {

            if (value.indexOf(config.version) < 0) {

                caches.delete(value);

            }

        });

        return;

    })
);

});