[PWA] Deal with caches in PWA

最新推荐文章于 2025-08-22 19:11:50 发布

转载最新推荐文章于 2025-08-22 19:11:50 发布 · 69 阅读

文章标签：

#ux

本文介绍了Service Worker中如何在安装阶段缓存静态资源，并在激活阶段清理旧缓存的方法。通过具体的JavaScript代码示例，展示了如何使用caches API来实现这些操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

The takeway is to know when we should cache the content? When we should clean the caches?

1. When should cache the content?

const CACHE_NAME = 'v1';
self.addEventListener('install', function (event) {
    // waitUntil take a promise
    event.waitUntil(
        caches.open(CACHE_NAME).then(function (cache) {
            return cache.addAll([
                '/',
                'js/main.js',
                'css/main.css',
                'imgs/icon.png',
                'https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff',
                'https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff'
            ]);
        })
    );
});

This should be done in the 'install' event.

2. When should clean old cache?

self.addEventListener('activate', function (event) {
    // waitUntil take a promise
    event.waitUntil(
        // caches.keys, return all the cache names
        caches.keys().then(function (cacheNames) {
            return Promise.all(
                // only get cache for this application
                cacheNames.filter(function(name) {
                    return name !== CACHE_NAME && name.startsWith('witter-');
                }).map(function(cacheName) {
                    // delete each cache by name
                    return caches.delete(cacheName);
                })
            );
        })
    );
});

This should be done in 'activate' event, the new cache should be already cached if the SW version doesn't change. If it does change, then the new version will be stored and we need to clean the old one, the best place to do it is in the 'activate' event.