Question

我在我的网站上安装了一个服务工作者，一切正常，除非我将更新推送到缓存文件，实际上;他们永远被抓住了，我似乎无法使缓存无效，除非我从`chrome：// serviceworker-internals /

取消订阅工作人员

const STATIC_CACHE_NAME = 'static-cache-v1';
const APP_CACHE_NAME = 'app-cache-#VERSION';

const CACHE_APP = [
    '/',
    '/app/app.js'
]
const CACHE_STATIC = [
    'https://fonts.googleapis.com/css?family=Roboto:400,300,500,700',
    'https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css'
]

self.addEventListener('install',function(e){
    e.waitUntil(
        Promise.all([caches.open(STATIC_CACHE_NAME),caches.open(APP_CACHE_NAME)]).then(function(storage){
            var static_cache = storage[0];
            var app_cache = storage[1];
            return Promise.all([static_cache.addAll(CACHE_STATIC),app_cache.addAll(CACHE_APP)]);
        })
    );
});

self.addEventListener('activate', function(e) {
    e.waitUntil(
        caches.keys().then(function(cacheNames) {
            return Promise.all(
                cacheNames.map(function(cacheName) {
                    if (cacheName !== APP_CACHE_NAME && cacheName !== STATIC_CACHE_NAME) {
                        console.log('deleting',cacheName);
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

self.addEventListener('fetch',function(e){
    const url = new URL(e.request.url);
    if (url.hostname === 'static.mysite.co' || url.hostname === 'cdnjs.cloudflare.com' || url.hostname === 'fonts.googleapis.com'){
        e.respondWith(
            caches.match(e.request).then(function(response){
                if (response) {
                    return response;
                }
                var fetchRequest = e.request.clone();

                return fetch(fetchRequest).then(function(response) {
                    if (!response || response.status !== 200 || response.type !== 'basic') {
                        return response;
                    }
                    var responseToCache = response.clone();
                    caches.open(STATIC_CACHE_NAME).then(function(cache) {
                        cache.put(e.request, responseToCache);
                    });
                    return response;
                });
            })
        );
    } else if (CACHE_APP.indexOf(url.pathname) !== -1){
        e.respondWith(caches.match(e.request));
    }
});

其中#VERSION是在编译时附加到缓存名称的版本;请注意，STATIC_CACHE_NAME永远不会更改，因为文件被认为是永久静态的。

此外，行为也不稳定，我一直在检查删除功能（它记录的部分），并且一直记录已删除的删除缓存（据称）。当我运行caches.keys().then(function(k){console.log(k)})时，我会收到一堆应该被删除的旧缓存。

Answer 1

在谷歌搜索并观看一些关于udacity的视频后，我发现工作人员的预期行为是留在它关闭的页面关闭，并在新服务工作人员可以控制时再次重新打开。

解决方案是强制它基于https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting进行控制以下解决了这个问题，即使需要2次重新加载才能让新工作人员反映这些变化（这是有意义的，因为应用程序已加载在新工人取代之前的工作之前。）

self.addEventListener('install',function(e){
    e.waitUntil(
        Promise.all([caches.open(STATIC_CACHE_NAME),caches.open(APP_CACHE_NAME),self.skipWaiting()]).then(function(storage){
            var static_cache = storage[0];
            var app_cache = storage[1];
            return Promise.all([static_cache.addAll(CACHE_STATIC),app_cache.addAll(CACHE_APP)]);
        })
    );
});

self.addEventListener('activate', function(e) {
    e.waitUntil(
        Promise.all([
            self.clients.claim(),
            caches.keys().then(function(cacheNames) {
                return Promise.all(
                    cacheNames.map(function(cacheName) {
                        if (cacheName !== APP_CACHE_NAME && cacheName !== STATIC_CACHE_NAME) {
                            console.log('deleting',cacheName);
                            return caches.delete(cacheName);
                        }
                    })
                );
            })
        ])
    );
});

Answer 2

作为＆＃34;服务工作者新手＆＃34;我遇到了一个相关的情况，即即使重新加载＆＃34; JavaScript控制台＆gt;应用程序＆gt;更新，服务工作人员也不会刷新。已在Chrome Canary上启用。

问题是我在/sw/index.js中使用了代码，然后向/sw/index.js引入了错误。当我介绍错误时，浏览器拒绝加载更新的代码并继续加载早期工作的服务工作者。当我更正index.js中的代码并刷新页面时，服务工作者的新代码出现了。我本以为错误填充代码会抛出错误，但它没有。浏览器刚刚加载了早期的无错误版本。

服务人员不更新

2 个答案: