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

Question

我最近开始研究服务 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) {

                });
            }
        })
    );
});

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) {

                });
            }
        })
    );
});