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

【问题标题】：Force Service Worker Update on First Visit from User, not Second Visit from User在用户第一次访问时强制 Service Worker 更新，而不是用户第二次访问
【发布时间】：2019-04-13 09:30:07
【问题描述】：

我最近开始深入研究 Service Worker 和相关策略。我的脑海中似乎有些混乱，或者如果我理解正确的话，整个 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) {

                });
            }
        })
    );
});

【问题讨论】：

标签： javascript html caching service-worker

【解决方案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) {

                });
            }
        })
    );
});

【讨论】：