PWA 开发中遇到的缓存机制问题及解决方案-JavaScript中文网-JavaScript教程资源分享门户

作为一种新兴的前端技术方案，PWA（Progressive Web App）已经被越来越多的开发者所接受和应用。在实际开发中，PWA 应用缓存机制是一个必不可少的特性，它可以让应用在离线状态下仍然可以奏效。然而很多开发者在 PWA 开发中都曾经遇到过缓存机制带来的种种问题。接下来，我们就来探讨一下 PWA 开发中遇到的缓存机制问题及解决方案。

问题1：缓存策略不当导致更新出现问题

PWA 应用开发中，我们通常会使用 Cache API 对资源进行缓存，而缓存策略是非常重要的。如果缓存策略不当，会导致应用更新出现问题。比如我们使用了一个细粒度的缓存策略，在更新后由于新版本的资源并没有更新缓存就使用了原来的缓存资源。

解决方案：

我们可以针对不同策略设置在更新时是否更新缓存，以便避免更新后使用旧缓存资源的情况。

示例代码：

// javascriptcn.com 代码示例
self.addEventListener('fetch', event => {
    // 针对更新时强制刷新缓存策略的缓存策略
    if (/\/api\//.test(event.request.url)) {
        event.respondWith(
            fetch(event.request)
                .then(response => {
                    const cacheCopy = response.clone();
                    event.waitUntil(
                        caches.open('my-cache')
                            .then(cache => cache.put(event.request, cacheCopy))
                    );
                    return response;
                })
                .catch(() => {
                    return caches.match(event.request)
                        .then(response => response || caches.match('/offline.html'));
                })
        );
    } else {
        // 针对默认缓存策略的缓存策略
        event.respondWith(
            caches.match(event.request)
                .then(response => {
                    return response || fetch(event.request);
                })
                .catch(() => {
                    return caches.match('/offline.html');
                })
        );
    }
});

问题2：缓存资源过期导致请求变慢

PWA 中缓存资源的过期时间需要开发者进行设置。如果缓存过期时间设置过短，会导致频繁更新缓存资源，影响了应用的性能；而过长的时间会导致缓存资源逐渐失效，需要再次向服务器请求，导致请求变慢。

解决方案：

我们需要结合业务需求设置合适的缓存过期时间，避免过于频繁地更新缓存并且及时删除失效的缓存资源。

示例代码：

// javascriptcn.com 代码示例
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open('my-cache')
            .then(cache => cache.addAll([
                '/',
                '/index.html',
                '/style.css',
                '/app.js',
                // ...
            ]))
    );
});

self.addEventListener('fetch', event => {
    // 如果资源过期则重新获取
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                if (response) {
                    const cacheTime = response.headers.get('cache-control');
                    if (!cacheTime || cacheTime.indexOf('max-age=') === -1) {
                        return fetch(event.request);
                    }
                    const maxAge = parseInt(cacheTime.split('max-age=')[1]);
                    const requestTimeDiff = Date.now() - new Date(response.headers.get('date')).getTime();
                    if ((maxAge * 1000) < requestTimeDiff) {
                        return fetch(event.request);
                    }
                    return response;
                } else {
                    return fetch(event.request);
                }
            })
    );
});

问题3：缓存统一更新策略不明确

在 PWA 应用开发中，当我们需要统一更新缓存资源时，就需要一个统一的更新策略。如果更新策略不明确，可能会出现一些缓存资源没有更新的情况，导致应用出现问题。

解决方案：

我们可以使用版本号控制缓存资源的更新，当我们需要更新缓存资源时，只需要更新版本号即可。

示例代码：

// javascriptcn.com 代码示例
// 更新版本号
const version = 'v1.0.0';

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open('my-cache')
            .then(cache => cache.addAll([
                '/',
                '/index.html',
                '/style.css',
                '/app.js',
                // ...
            ]))
            .then(() => {
                return self.skipWaiting();
            })
    );
});

self.addEventListener('activate', event => {
    event.waitUntil(
        Promise.all([
            // 立即接管页面的 control，避免旧版本的页面继续运行。
            self.clients.claim(),
            // 删除旧版本的缓存
            caches.keys()
                .then(cacheNames => {
                    return Promise.all(
                        cacheNames.map(cacheName => {
                            if (cacheName.startsWith('my-cache-') && cacheName !== `my-cache-${version}`) {
                                return caches.delete(cacheName);
                            }
                        })
                    );
                })
        ])
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                if (response) {
                    return response;
                }
                return fetch(event.request)
                    .then(response => {
                        if (response && response.status === 200) {
                            // 更新缓存资源
                            const cacheCopy = response.clone();
                            caches.open(`my-cache-${version}`)
                                .then(cache => {
                                    cache.put(event.request, cacheCopy);
                                });
                        }
                        return response;
                    })
                    .catch(() => {
                        return caches.match('/offline.html');
                    });
            })
    );
});

总结

以上就是 PWA 开发中遇到的缓存机制问题及解决方案。在实际开发中，我们需要根据业务需求合理设置缓存策略和缓存过期时间，以及统一的缓存更新策略，避免在应用更新、缓存失效等情况下出现错乱等情况。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6531e9fe7d4982a6eb3f4fe0