PWA 简介
PWA（Progressive Web App）是一种新型的 Web 应用程序，是基于 Web 技术打造的应用程序，通过 Service Worker，可以实现离线缓存、推送通知等功能。PWA 在移动端使用更加流畅，具有类似 Native App 的体验，但比 Native App 更加轻量、易维护。
PWA 中缓存的重要性
对于使用 PWA 技术打造的应用，缓存是至关重要的，可以提高应用性能、降低服务器压力、提升用户体验。缓存分为两种：静态资源缓存和动态数据缓存。静态资源缓存可以加快网站加载速度，减少重复性请求；动态数据缓存可以降低服务器压力，减少网络请求，提高了应用的响应速度。
缓存策略
缓存策略是决定缓存行为的一组规则。
常用的缓存策略有以下几种：
- Cache First 策略
这种缓存策略会优先使用缓存，如果缓存中有数据，则返回缓存数据，否则再去请求数据并缓存。
// javascriptcn.com 代码示例
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
if (response) {
return response;
}
return fetch(event.request).then(response => {
caches.open('cache-name').then(cache => {
cache.put(event.request, response.clone());
})
return response;
})
})
)
})- Network First 策略
这种缓存策略会优先请求新数据，如果请求失败，则返回缓存数据。
// javascriptcn.com 代码示例
self.addEventListener('fetch', event => {
event.respondWith(
fetch(event.request).then(response => {
if (response && response.status === 200) {
caches.open('cache-name').then(cache => {
cache.put(event.request, response.clone());
})
return response;
} else {
return caches.match(event.request);
}
}).catch(() => {
return caches.match(event.request);
})
)
})- CacheOnly 策略
这种缓存策略会直接使用缓存，如果缓存中没有数据，则返回空。
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
)
})- NetworkOnly 策略
这种缓存策略会直接请求新数据，如果请求失败，则返回空。
self.addEventListener('fetch', event => {
event.respondWith(
fetch(event.request).catch(() => {
return new Response('', { status: 404 } );
})
)
})缓存库
PWA 中有一个专门的缓存库——Cache API，它是 Service Worker 中的一部分。
Cache API 提供了 caches 对象，通过它可以进行读取、添加、删除缓存的操作。
caches.open('cache-name').then(function(cache) {
cache.add('/api/data');
cache.addAll([
'/css/style.css',
'/js/main.js',
'/img/logo.jpg'
]);
});缓存版本管理
为了避免缓存出现混乱和冲突，需要对缓存版本进行管理。可以将缓存存储在不同的缓存版本中，并在 Service Worker 更新时更新缓存版本。
// javascriptcn.com 代码示例
const CACHE_NAME = 'cache-name-v1';
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(keys => {
keys.forEach(key => {
if (key !== CACHE_NAME) {
caches.delete(key);
}
})
})
)
})
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => {
cache.addAll([
'/index.html',
'/css/style.css',
'/js/main.js',
'/img/logo.jpg'
]);
})
)
})
// 更新缓存
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request).then(response => {
return caches.open(CACHE_NAME).then(cache => {
cache.put(event.request, response.clone());
return response;
})
})
})
)
})总结
PWA 技术的出现，可以让 Web 应用有和 Native App 相同的离线缓存、推送通知等功能，缓存技术是 PWA 技术中的一个重要部分。在编写 PWA 时，我们应该对缓存策略、缓存库和缓存版本进行管理，提高应用性能、降低服务器压力、提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653f394b7d4982a6eb8c0f4d