什么是 PWA
PWA，全称为 Progressive Web App，是一种新型的 Web 应用程序开发方式。它可以在各种设备上运行，无需下载或安装，并具备原生应用的体验。同时，PWA 可以为用户提供更便捷的访问方式，具有离线访问、推送通知等功能，丰富了 Web 应用的特性。
PWA 的缓存策略
与原生应用一样，PWA 也可以离线运行，这一点是 PWA 与传统 Web 应用的最大区别。这得益于 PWA 引入了缓存策略，可以将 Web 应用的资源（HTML、CSS、JS、图片等）缓存到本地，用户随时可以访问这些缓存资源，即使网络不稳定或断开，也能保证应用的正常运行。
PWA 的缓存策略主要有两种：
1. 离线缓存
离线缓存是 PWA 中最基本的缓存策略，它的作用是当用户访问网站时，浏览器会将所有需要缓存的文件下载到本地，然后将它们存储在缓存中。这样就可以通过缓存来提供对这些文件的离线访问支持。
为了启用离线缓存，需要在 HTML header 中添加 manifest 属性，并提供一个 manifest 文件，它包含了需要缓存的文件列表、版本号等信息。
manifest 文件示例：
--------- ----- ------ ------ --- ----- -------------- ---------------------- --- ------- ------ --- ------- -------
manifest.json 文件示例：
-
------- --- -----
------------- --- -----
------------ ----
---------- -------------
------------------- -------
-------------- ----------
-------- -
-
------ ----------------
-------- ----------
------- -----------
-
--
-------- -
----
--------------
----------
-------------
--
---------- -------
-2. 网络优先
网络优先缓存策略是将资源优先从网络中获取，如果网络不可用或请求失败，则从缓存中获取资源。
为了启用网络优先缓存策略，需要在 Service Worker 中进行配置。
示例代码：
------------------------------ --------------- -
------------------
------------------------------------- -
------ ----------------------------
--
--
---PWA 的离线支持
除了缓存策略之外，PWA 还支持多种离线体验，可以为用户提供更好的使用体验。
1. 离线访问
当用户离线时，PWA 可以使用缓存资源来继续提供服务。
示例代码：
------------------------------ --------------- -
------------------
--------------------------------------------------- -
------ -------- -- ---------------------
--
--
---2. 预缓存
预缓存主要用于提前缓存资源，加速应用的加载速度。它可以在应用安装后初始化 Service Worker 并缓存所有需要的资源。
示例代码：
-------------------------------- --------------- -
----------------
-------------------------------------------- -
------ --------------
----
--------------
----------
-------------
---
------------------ -
------ -------------------
--
--
---
--------------------------------- --------------- -
----------------
--------------------
--
---总结
PWA 的离线支持与缓存策略是 PWA 开发的重要组成部分。离线支持提供优秀的离线体验，缓存策略则可以加速应用的加载速度，提高用户的满意度。
通过熟练掌握 PWA 的缓存策略和离线支持，可以让我们开发出更好的 PWA 应用，并提供更好的体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654c39407d4982a6eb5d41a7