PWA（Progressive Web App）是基于 Web 技术构建的一种应用，它的核心特性是离线访问和本地缓存。在网络不稳定或者没有网络的情况下，也可以使用 PWA 应用来访问页面。本文将详细介绍 PWA 如何实现离线访问页面，并提供示例代码，以便开发者实际使用和学习。
什么是离线访问
在网络不可用的情况下，Web 应用通常无法正常工作，这是因为它需要从服务器上加载资源、获取数据等等。而离线访问就是指在没有网络的情况下，用户可以继续使用应用，并且可以访问已经缓存的资源。
如何实现离线访问
使用 Service Worker
Service Worker 是浏览器的一种特殊类型的 JavaScript Worker，它可以侦听和拦截对网络请求和响应的操作，并且可以对它们进行处理。使用 Service Worker 可以缓存 Web 应用的资源和数据，并在网络不可用时从缓存中读取，从而实现离线访问的功能。
为了使用 Service Worker，我们需要先注册它。具体可以使用以下代码：
if (navigator.serviceWorker) {
// 注册 Service Worker
navigator.serviceWorker.register('sw.js').then(function(registration) {
console.log('ServiceWorker 注册成功，作用域为：', registration.scope);
}).catch(function(error) {
console.log('ServiceWorker 注册失败：', error);
});
}在这段代码中，我们使用 navigator.serviceWorker 判断浏览器是否支持 Service Worker，如果支持则调用它的 register() 方法来注册 Service Worker，并且指定 Service Worker 脚本的路径。一旦 Service Worker 在浏览器中注册成功后，它就会开始工作，并且在 Service Worker 范围内拦截资源和数据的请求和响应。
实现离线资源缓存
在 Service Worker 中缓存资源和数据可以实现离线访问的功能。具体实现方式如下：
-- -------------------- ---- -------
-- --------------
----- --------- - ------------------
----- ----------- - -
----
--------------
-----------------
-------------
--
-------------------------------- --------------- -
----------------
------------------------------------------- -
---------------- ------- -------
------ --------------------------
--
--
---
------------------------------ --------------- -
------------------
--------------------------------------------------- -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---在这段代码中，我们首先定义了一个名称为 my-pwa-cache-v1 的缓存，在缓存中需要缓存的资源和数据为 index.html、css/style.css 和 js/main.js 等。
在 Service Worker 注册成功后，它将开始缓存需要离线访问的资源和数据。使用 caches.open() 方法打开一个新的缓存，然后使用 cache.addAll() 方法将需要缓存的 URL 添加到缓存中。如果有任何一个资源无法缓存，则缓存进程将立即停止并抛出错误。
接下来，在 fetch 事件中，我们可以使用 caches.match() 方法从缓存中读取匹配的请求，并返回整个响应流。如果请求的资源不存在于缓存中，则使用 fetch() 方法从网络上获取资源。
使用 Cache Storage API
使用 Service Worker 缓存资源和数据是 PWA 实现离线访问的最常用方法。但是，还有另外一种方法，就是使用 Cache Storage API。
Cache Storage API 是一个可以让我们在客户端缓存资源的 JavaScript API。使用 Cache Storage API 可以避免没有注册 Service Worker 的风险，因为它是在页面上直接使用的，而不是注册 Service Worker。
实现方式如下：
-- -------------------- ---- -------
-- --------------- -
----- --------- - --------------
----- ----------- - -
----
--------------
-----------------
-------------
--
------------------------------------------- -
------------------ ------- --- --------
--------------------------
---
-在这段代码中，我们定义了一个名称为 my-cache-v1 的缓存，在缓存中需要缓存的资源和数据为 index.html、css/style.css 和 js/main.js 等。
使用 caches.open() 方法打开一个新的缓存，然后使用 cache.addAll() 方法将需要缓存的 URL 添加到缓存中。如果有任何一个资源无法缓存，则缓存进程将立即停止并抛出错误。
总结
本文详细介绍了 PWA 如何实现离线访问页面，提供了使用 Service Worker 和 Cache Storage API 的两种方法。通过使用这些技术，我们可以缓存需要离线访问的资源和数据，从而实现离线访问的功能。对于开发者来说，可以参考本文提供的示例代码，实际使用和学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64520334675af4061b5b6088