PWA 简介
PWA（Progressive Web App）是一种新型的 Web 应用程序，是基于 Web 技术打造的应用程序，通过 Service Worker，可以实现离线缓存、推送通知等功能。PWA 在移动端使用更加流畅，具有类似 Native App 的体验，但比 Native App 更加轻量、易维护。
PWA 中缓存的重要性
对于使用 PWA 技术打造的应用，缓存是至关重要的，可以提高应用性能、降低服务器压力、提升用户体验。缓存分为两种：静态资源缓存和动态数据缓存。静态资源缓存可以加快网站加载速度，减少重复性请求；动态数据缓存可以降低服务器压力，减少网络请求，提高了应用的响应速度。
缓存策略
缓存策略是决定缓存行为的一组规则。
常用的缓存策略有以下几种：
- Cache First 策略
这种缓存策略会优先使用缓存，如果缓存中有数据，则返回缓存数据，否则再去请求数据并缓存。
-- -------------------- ---- -------
------------------------------ ----- -- -
------------------
----------------------------------------- -- -
-- ---------- -
------ ---------
-
------ ---------------------------------- -- -
------------------------------------ -- -
------------------------ ------------------
--
------ ---------
--
--
-
--- Network First 策略
这种缓存策略会优先请求新数据，如果请求失败，则返回缓存数据。
-- -------------------- ---- -------
------------------------------ ----- -- -
------------------
---------------------------------- -- -
-- --------- -- --------------- --- ---- -
------------------------------------ -- -
------------------------ ------------------
--
------ ---------
- ---- -
------ ----------------------------
-
----------- -- -
------ ----------------------------
--
-
--- 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 更新时更新缓存版本。
-- -------------------- ---- -------
----- ---------- - ----------------
--------------------------------- ----- -- -
----------------
----------------------- -- -
---------------- -- -
-- ---- --- ----------- -
-------------------
-
--
--
-
--
-------------------------------- ----- -- -
----------------
---------------------------------- -- -
--------------
--------------
-----------------
--------------
---------------
---
--
-
--
-- ----
------------------------------ ----- -- -
------------------
----------------------------------------- -- -
------ -------- -- ---------------------------------- -- -
------ ---------------------------------- -- -
------------------------ ------------------
------ ---------
--
--
--
-
--总结
PWA 技术的出现，可以让 Web 应用有和 Native App 相同的离线缓存、推送通知等功能，缓存技术是 PWA 技术中的一个重要部分。在编写 PWA 时，我们应该对缓存策略、缓存库和缓存版本进行管理，提高应用性能、降低服务器压力、提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653f394b7d4982a6eb8c0f4d