pwa如何更新缓存？

Question

假如我有一个api，该api返回的数据并不会被用户操作所影响，所以它很少会改变，我拦截该api，使用缓存优先。假如我的数据改变了，我怎么放弃原来的缓存，采用新的数据呢？如何让sw知道数据改变了，需要去更新缓存呢？有没有类似的方案？

Answer 1

pwa更新缓存通常有两种一种是自动更新，一种是手动更新。

你可以在register的时候手动更新一下。

navigator.serviceWorker.register('/service-worker.js').then(reg => {
  // sometime later…
  reg.update();
});

或者是这样加版本,不是每次访问都更新

var version = 'v1';

navigator.serviceWorker.register('/service-worker.js').then(function (reg) {
    if (localStorage.getItem('sw_version') !== version) {
        reg.update().then(function () {
            localStorage.setItem('sw_version', version)
        });
    }
});

或者自动更新,在sw.js文件里面,每次手动更新里面的cacheName

// 安装阶段跳过等待，直接进入 active
var cacheName = "cachev2"
self.addEventListener('install', function (event) {
    event.waitUntil(self.skipWaiting());
});

self.addEventListener('activate', function (event) {
    event.waitUntil(
        Promise.all([
            // 更新客户端
            self.clients.claim(),

            // 清理旧版本
            caches.keys().then(function (cacheList) {
                return Promise.all(
                    cacheList.map(function (cacheName) {
                        if (cacheName !== 'cachev1') {
                            return caches.delete(cacheName);
                        }
                    })
                );
            })
        ])
    );
});

或者还有一种办法，就是这个API后面query的时候带一个version的参数，如果这个参数改变的话，整个fetch match到的path不一样。
但是这样会修改逻辑代码，不是很好。

可以看这个参考