Обновление Force Service Worker при первом посещении пользователем, а не при втором посещении пользователя - PullRequest
Новая
       6

Обновление Force Service Worker при первом посещении пользователем, а не при втором посещении пользователя

0 голосов
/ 09 ноября 2018

Я недавно начал вникать в сервисных работников и связанные с ними стратегии. Кажется, в моем сознании есть некоторая путаница, или, если я правильно понимаю, что-то вроде изъяна во всем API - проблема в том, что когда вы вносите изменения в файл serviceworker.js (то есть меняете номер версии в этот файл, потому что вы внесли изменения в свой веб-сайт), пользователь должен затем посетить сайт дважды, чтобы увидеть изменения? Один раз для регистрации и установки нового работника сервиса, а второй раз для его активации (т.е. доступ к новому кешу).

Теперь в реальном мире, если на вашем сайте есть проблема, будь то неработающая ссылка, ошибка JavaScript или неверная информация в сообщении в блоге и т. Д., Когда пользователь возвращается на этот сайт впервые после вас Вы сделали исправление, они не смогут увидеть это исправление, если не вернутся во второй раз? Даже если вы внесли изменения?

Я имею в виду, это не может быть правдой ... конечно?

код, который я использую 

var preCacheList = [
"/", "index.html", "work.html", "contact.html", "style.css", "js/main.js"
];

var CACHE_STATIC_NAME = 'static-v1.4';
var CACHE_DYNAMIC_NAME = 'dynamic-v1.4';

self.addEventListener('install', function(event) {
console.log('[Service Worker] Installing Service Worker ...', event);
event.waitUntil(
    caches.open(CACHE_STATIC_NAME)
    .then(function(cache) {
        console.log('[Service Worker] Precaching App Shell');
        cache.addAll(preCacheList);
    })
)
});

self.addEventListener('activate', function(event) {
    console.log('[Service Worker] Activating Service Worker ....', event);
    event.waitUntil(
    caches.keys()
        .then(function(keyList) {
        return Promise.all(keyList.map(function(key) {
            if (key !== CACHE_STATIC_NAME && key !== CACHE_DYNAMIC_NAME) {
            console.log('[Service Worker] Removing old cache.', key);
            return caches.delete(key);
            }
        }));
        })
    );
    return self.clients.claim();
});

self.addEventListener('fetch', function(event) {
    event.respondWith(
    caches.match(event.request)
        .then(function(response) {
            if (response) {
                return response;
            } else {
                return fetch(event.request)
                .then(function(res) {
                    return caches.open(CACHE_DYNAMIC_NAME)
                    .then(function(cache) {
                        cache.put(event.request.url, res.clone());
                        return res;
                    })
                })
                .catch(function(err) {

                });
            }
        })
    );
});

1 Ответ

0 голосов
/ 11 ноября 2018

Я нашел решение этой проблемы - вам нужно добавить метод skipWaiting() в исходное событие установки.

Я повторно опубликовал код из моего вопроса выше с комментарием к этой строке: 

var preCacheList = [
"/", "index.html", "work.html", "contact.html", "style.css", "js/main.js"
];

var CACHE_STATIC_NAME = 'static-v1.4';
var CACHE_DYNAMIC_NAME = 'dynamic-v1.4';

self.addEventListener('install', function(event) {
console.log('[Service Worker] Installing Service Worker ...', event);
event.waitUntil(
    caches.open(CACHE_STATIC_NAME)
    .then(function(cache) {
        console.log('[Service Worker] Precaching App Shell');
        cache.addAll(preCacheList);
    })
)
return self.skipWaiting();  // THIS IS THE LINE THAT OVER-RIDES THE SECOND RELOAD.

});

self.addEventListener('activate', function(event) {
    console.log('[Service Worker] Activating Service Worker ....', event);
    event.waitUntil(
    caches.keys()
        .then(function(keyList) {
        return Promise.all(keyList.map(function(key) {
            if (key !== CACHE_STATIC_NAME && key !== CACHE_DYNAMIC_NAME) {
            console.log('[Service Worker] Removing old cache.', key);
            return caches.delete(key);
            }
        }));
        })
    );
    return self.clients.claim();
});

self.addEventListener('fetch', function(event) {
    event.respondWith(
    caches.match(event.request)
        .then(function(response) {
            if (response) {
                return response;
            } else {
                return fetch(event.request)
                .then(function(res) {
                    return caches.open(CACHE_DYNAMIC_NAME)
                    .then(function(cache) {
                        cache.put(event.request.url, res.clone());
                        return res;
                    })
                })
                .catch(function(err) {

                });
            }
        })
    );
});
...