什么是PWA应用
PWA全称Progressive Web App，是一种新的Web开发模式，它结合了Web网页和Native App的优势，能够在离线情况下进行访问，可以像Native App一样受到设备的通知，还可以被添加到主屏幕等。因此PWA应用在移动端的应用中越来越受到青睐。
PWA应用中缓存的意义
PWA应用在体验上要提供一种接近Native App的用户体验，其中非常重要的一点就是缓存。PWA应用能够让用户无缝地进行交互和浏览，就是因为我们使用了缓存技术。当用户离线时，PWA应用能够让用户继续使用上一次浏览过的页面和内容，从而让用户享受连续的体验。
PWA应用中缓存的方式
PWA应用中缓存主要分为两种方式：
Runtime缓存: 在使用PWA应用时，我们可以通过缓存一些重要的页面和资源来提高网站的访问速度，以保证访问时的流畅性。这种类型的缓存是在运行时进行的，相比于静态资源在页面加载时缓存要求高些，它可以实现对动态生成的页面和数据的缓存，从而提高用户体验。
Install缓存：PWA应用在第一次加载时就可以将必要的文件缓存到本地，在第二次进入该应用时可以很快地打开应用，这种缓存方式就是Install缓存。Install缓存是在安装时进行的，比Runtime缓存速度快得多，有点像Native App的安装过程，但不需安装到本地操作系统。
PWA应用中更新的注意事项
PWA应用的缓存也有一个问题，那就是当内容更新时，我们不能让用户使用旧的版本。当我们选择更新PWA应用缓存时，我们必须注意避免以下几个问题：
1. 缓存的版本
当我们的应用更新时，需要保证更新后的缓存能够被使用。但是老的缓存文件不能直接被清除，因为这可能导致应用出现异常，因此我们需要给新的版本创建一个新的缓存。我们需要返回原来缓存的ID，并创建一个新的缓存版本。
-- -------------------- ---- -------
--------------------------------- ----- -- -
----------------
----------------------------- -- -
------ ------------
------------------------ -- -
-- ---------- --- ----------- -
------ -------------------------
-
--
--
--
--
---上述代码会清除旧版本的缓存并保留新的版本。
2. 缓存策略
在每次更新缓存时，我们希望尽可能减少用户的带宽负担，所以我们需要确保新的缓存及更新资源可以在第一时间加载到客户端。如果我们混合了新旧两个版本的缓存请求，浏览器会优先使用旧的缓存资源，而不是新的资源。为了避免这种情况，在更新缓存版本之前，我们必须显式地清除旧的资源缓存。
-- -------------------- ---- -------
------------------------------ ----- -- -
------------------
----------------------------------------- -- -
-- ---------- -
------ --------- -- ----------
-
------ ---------------------------------- -- -
-- --------- -- --------------- --- ---- -
----- ------------- - -----------------
---------------------------------- -- -
------------------------ --------------- -- ----
---
-
------ ---------
---
--
--
---3. 更新通知
当我们更新缓存和其它资源时，我们需要使用 fetch 事件来运行新的更新程序。然后，我们需要检查缓存的版本是否过期，如果过期，则需要让客户端重新加载新的版本。最后，我们需要显示更新应用程序的通知。
-- -------------------- ---- -------
------------------------------ --------------- -
------------------ ------ - - -------------------
------------------
--------------------------------------------------- -
-- ---------- -
------ ---------
-
------ -------------------------------------------- -
-------------------------------------------- -
-- ---------------------------------------------- --- --- -
--------------------
-- -------------
------------------------ ------------------
-
---
------ ---------
---
--
--
---
--------------------------------- --------------- -
--------------------------
----------------
--------------------------------------- -
------ ------------
---------------------------------- -
-- ---------- --- ----------- -
------ -------------------------
-
--
--
------------------ -
------ ---------------------
--
--
---
-------------------------------- --------------- -
--------------------------
----------------
-------------------------------------------- -
------------------ -----------
---------------------------
------ ----------------------------
------------------ -
------ -------------------
--
--
---
----------------------------- --------------- -
----------------- ------------ ----------
----- --------- - ---------- - ----------------- - --------- -------- ------- ------- -------- -- --- ------- ---------------
----- ----- - ----------------
----- ---- - ---------------
----- ----- - ------------------------------
----- --- - -----------
----- --- - -------------------------
--------------------------------------------------------- -
----- -----
----- ------
---- ----
----- ----- -----
----
---
------------------------------------------ --------------- -
------------------------- -----------
----- --- - ----------------------------
------------------------- ------ -----
---------------------------
----------------------------------
----- ---------
-------------------- ----
----------------------- -- -
--- -------- - -----
--- ---- - - -- - - --------------------- ---- -
----- ------------ - -----------------
-- ----------------- --- ---- -
-------- - -------------
------
-
-
-- ---------- -
------------------- ---------
------ -----------------
- ---- -- -------------------- -
---------------- ------ --------
------ ------------------------
-
---
---总结
在PWA应用中，我们需要充分利用缓存技术来优化用户的体验。缓存有助于更快地加载Web应用程序，而且如果在离线状态下，缓存可以让用户继续访问前一次浏览过的页面和内容。但在缓存更新过程中，我们必须注意这些陷阱，以便确保应用程序在更新后能够顺利运行且用户可以顺畅地访问。在实际开发中，我们可以借助现有的缓存框架来实现缓存，比如workbox.js，它为我们在PWA应用中使用缓存并更新缓存提供了更简单的工具和使用方式。
应用缓存在未来的Web开发中将扮演越来越重要的角色，为我们提供更多的选择和机会，以满足用户的需求来提供良好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649638d848841e989431dff1