代码之家  ›  专栏  ›  技术社区  ›  Zenoo

ServiceWorker不更新缓存

  •  1
  • Zenoo  · 技术社区  · 7 年前

    我正在尝试安装一个 ServiceWorker

    我有 index.html v0.0.1 缓存,如果缓存版本更改为 v0.0.2 或者其他任何东西,它应该重新下载 index.html

    我把行李装上 与:

    if('serviceWorker' in navigator){
        navigator.serviceWorker
            .register('serviceWorker.js')
            .then(() => { 
                console.log('Service Worker Registered');
            });
    }
    

    以下是:

    serviceWorker.js

    const currentVersion = 'v0.0.1';
    
    self.addEventListener('install', e => {
        e.waitUntil(
            caches.open(currentVersion).then(cache => cache.addAll([
                '',
                'index.html',
                'js/load.min.js',
                'lib/db.js/js/db.min.js'
            ]))
        );
    });
    
    self.addEventListener('fetch', e => {
        e.respondWith(
            caches.match(e.request).then(resp => {
                return resp || fetch(e.request).then(response => {
                    return caches.open(currentVersion).then(cache => {
                        cache.put(e.request, response.clone());
                        return response;
                    });  
                });
            })
        );
    });
    
    self.addEventListener('activate', e => {
        e.waitUntil(
            caches.keys().then(keyList => 
                Promise.all(keyList.map(key => key != currentVersion ? caches.delete(key) : Promise.resolve()))
            )
        );
    });
    

    但我试过编辑 index.html 以及更新 serviceWorker index.html

    我做错了什么?

    1 回复  |  直到 7 年前
        1
  •  3
  •   Zenoo    7 年前

    这里有两个问题。

    首先,关于 fetch ServiceWorker ,我查了一下 缓存包含我正在获取的文件,而不是当前缓存版本。

    取来 此的事件侦听器:

    self.addEventListener('fetch', e => {
        e.respondWith(
            caches.open(currentVersion).then(cache => {
                return cache.match(e.request).then(resp => {
                    // Request found in current cache, or fetch the file
                    return resp || fetch(e.request).then(response => {
                        // Cache the newly fetched file for next time
                        cache.put(e.request, response.clone());
                        return response;
                    // Fetch failed, user is offline
                    }).catch(() => {
                        // Look in the whole cache to load a fallback version of the file
                        return caches.match(e.request).then(fallback => {
                            return fallback;
                        });
                    });
                });
            })
        );
    });
    

    最后一个问题是,仅仅重新加载页面(F5)并不会改变 .
    为了新的 服务人员