简介
PWA（Progressive Web App）是一种结合了提供类似于原生应用体验的特性和能在 Web 上进行展示的网站。其中离线访问是 PWA 的一个主要特性，他能够允许用户在离线的情况下继续访问应用。在本文中，我们会详细探讨 PWA 离线访问的原理以及缓存方案，并提供实例代码来帮助理解。
离线访问原理
PWA 技术实现离线访问背后的核心是 Service Worker。Service Worker 是一个独立的 JavaScript 运行环境，与 Web 页面运行的浏览器线程分离。它可以拦截页面请求和其他资源请求，并能够让开发者决定如何响应它们，基于这个特性，我们可以通过 Service Worker 来控制网络请求与响应。
在 PWA 中，我们通常将服务 Worker 注册在 Web 应用主页面，具体实现方法如下：
-- ---------------- -- ---------- -
------------------------------- -- -- -
------------------------------------------------------
------------------ -- -
-------------------------- ------------ ---------- ---- ------ -- -------------------
-- --- -- -
-------------------------- ------------ ------- -- ----
--
--
-在注册 Service Worker 后，我们就可以通过该环境来处理 Web 请求和响应。在离线情况下 Service Worker 将会拦截离线访问的请求，并且响应本地缓存中处理好的内容给用户。
Service Worker 还具有另外一个重要的功能 —— 缓存资源。在这里，缓存是指网络请求和响应的快照，缓存资源是 Service Worker 的重要资源之一。Service Worker 缓存元数据和 HTTP 响应的主体。由于 Service Worker 是独立的线程，因此它可以在离线情况下继续为 Web 应用提供服务。
缓存方案
PWA 离线访问离不开缓存方案，我们也称之为缓存策略。缓存策略是一个与 Service Worker 紧密相关的概念。不同的缓存方案可以对 Service Worker 的性能、资源利用率和 Web 应用可扩展性产生不同的影响。
在 PWA 中，我们通常使用 caches API 来实现缓存。caches API 提供了一个底层缓存接口，这个接口可以让开发者缓存和检索以 URL 为标识的缓存对象。缓存对象可以是网络请求的响应或者其他资源。
缓存策略的实现可以通过以下两种方法来实现：
缓存优先
缓存优先策略即是默认情况下使用缓存中的内容如果它们可用的话。在这个策略中，Service Worker 会先检查本地缓存是否存在指定的资源，如果存在则直接返回缓存内容，如果不存在则发起网络请求去获取该资源的最新版本并且对其进行缓存。
为保持缓存的新鲜性，应该定期刷新缓存。在这个方案中，资源从远程服务器上下载后，缓存的最新内容只有在再次访问时才会自动更新。
该策略可以通过下面的代码来实现：
------------------------------ ----- -- -
------------------
---------------------------
-------------------- -- -
-- ---------------- -
------ --------------
-
------ --------------------
--
-
--网络优先
网络优先策略是优先使用网络获取最新版本的资源。在这个策略中，Service Worker 会首先尝试直接从服务器上获取资源的最新版本，此时不会使用与缓存相关的应用逻辑。如果请求失败则会检查本地缓存是否可用，根据缓存是否可用来决定服务是否可用。
该策略的实现可以通过下面的代码来实现：
------------------------------ ----- -- -
------------------
--------------------
--------- -- -
------ ----------------------------
--
-
--结论
本文深入了解了 PWA 离线访问的实现和相关的缓存方案。需要注意的是，在实现该方案时需要精心设计你的逻辑和您应用的工作方式。合理的利用 Service Worker 和合适的缓存策略能大幅度提高 Web 应用的性能和可靠性。
参考资料
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f503ebc5c563ced569fd66