Question

我最近开始研究服务人员和相关策略。我的头脑似乎有些混乱，或者如果我正确理解它们，则整个API都有缺陷-问题是当您更改serviceworker.js文件（即更改版本）时文件中的数字（因为您已经对网站进行了更改），那么用户必须访问该站点两次才能看到更改？一次注册并安装新的Service Worker，第二次激活它（即访问新的缓存）。

在现实世界中，如果用户在您访问网站后第一次返回该网站，则该网站是否存在问题，无论是链接断开，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) {

                });
            }
        })
    );
});

Answer 1

我找到了解决方案-您需要在初始安装事件中添加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) {

                });
            }
        })
    );
});

在用户第一次访问而不是用户第二次访问时强制更新Service Worker

1 个答案: