Javascript 服务工作者缓存回退到网络

服务人员

即使service worker缓存版本已更改，浏览器缓存中的.js和.css文件也不会更新，除非手动清除它们

我正在使用缓存回退到网络策略

请协助解决方案以编程方式完成

服务人员

//cache version 
var apbcw_cache = "APBCW - 1.9";

// files to cache
var filesToCache = [
    'pwa.html',
    'assets/mountains.png',
    'assets/camera.png',
    'css/pwa.css',
    'js/pwa.js',
    'js/network.js',
    'js/iDBconn.js',
    'js/jquery-3.4.1.min.js',
    'js/manifest.json',
    'assets/icons/android-icon-144x144.png',
    'assets/icons/apple-icon-144x144.png',
    'assets/icons/ms-icon-144x144.png'
];

//install Service Worker
self.addEventListener('install',function(event){
    console.log('Service Worker installed', event);
    event.waitUntil(
        caches.open(apbcw_cache)
        .then(function(cache){
            console.log("caching files");
            return cache.addAll(filesToCache);
        }).catch(function(error){
            console.error("Error adding files to cache",error);
        })
    )
    self.skipWaiting();
});

// activate Service Worker
self.addEventListener('activate', function(event){
    console.log('Service Worker activated',event);
    console.log('cache version: ',apbcw_cache);
    event.waitUntil(
        caches.keys()
        .then(function(keyList){
            return Promise.all(keyList.map(function(key){
                if(key !== apbcw_cache){
                    console.log("deleting old cache:", key);
                    return caches.delete(key)
                }
            }));
        })
    ); 
    return self.clients.claim();
});

//fetch event 
self.addEventListener('fetch',function(event){
    console.log("Service Worker is fetching" + event.request.url);
    event.respondWith(
        caches.match(event.request)
        .then(function(response){
            return response || fetch(event.request)
        })
    )
})

---

看起来不错。您是否尝试过在没有空格的情况下命名缓存？老实说，我以前从来没有用空格命名过缓存，所以这是我第一个查找的地方。我还将检查服务器上的新文件是否引用了这些文件，而不是以前的版本，即使它是localhost。还要检查网络，并在加载文件时检查它们是否更新。当我们更改版本时，缓存会被删除，但是css和js文件不会在浏览器缓存文件中更新，除非我们手动清除它们。这是我对缓存控制头和服务人员的看法。如果要使用ServiceWorker缓存资产，那么缓存控制头就有点没有意义了。我知道所有的最佳实践都鼓吹使用缓存控制头，但实际上是由服务人员来取代它。最新Chrome中的一个新功能（不确定是否已交付给general）是服务人员将忽略浏览器缓存。那可能会帮助你。我仍然使用缓存控制头，但我设置它们的时间比以前短。