前言
随着移动互联网的普及和网速的提高，越来越多的用户选择在移动端上使用网站和应用程序。作为前端开发者，我们需要面对的一个重要问题就是用户在没有网络连接的情况下无法访问我们的网站或应用程序。这时候离线 PWA APP 就应运而生了。本文将介绍如何通过使用 Service Workers 和 Cache API 来构建一个完美的离线 PWA APP，帮助前端开发者更好地解决离线问题。
Service Workers
Service Workers 是一个 JavaScript 文件，运行在独立的 worker 上下文中，独立于网页主线程，因此不能访问 DOM。Service Workers 可以用来处理离线缓存、推送通知以及后台数据同步等任务。
要想使用 Service Workers，我们需要在网站的根目录下创建一个 service-worker.js 文件，并在网站的入口页面注册这个 Service Worker。具体注册代码如下：
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
console.log('Service Worker 注册成功：', registration.scope);
}).catch(function(err) {
console.log('Service Worker 注册失败：', err);
});
}在 Service Worker 中处理同步请求的方式如下：
// javascriptcn.com 代码示例
// 监听 fetch 请求
self.addEventListener('fetch', function(event) {
event.respondWith(
// 判断是否离线
caches.match(event.request)
.then(function(resp) {
// 如果缓存命中则直接返回
if (resp) {
return resp;
}
// 发起新的请求
return fetch(event.request)
.then(function(response) {
// 如果请求成功则将响应缓存起来
return caches.open('v1').then(function(cache) {
cache.put(event.request, response.clone());
return response;
});
})
.catch(function(err) {
console.error(err);
});
})
);
});上述代码实现的主要逻辑是：监听 fetch 请求，如果能在本地缓存中找到请求的资源，则直接返回缓存的资源，否则发起新的请求。通过 Service Workers，我们可以轻松地实现离线缓存功能，从而实现离线访问网站或应用程序。
Cache API
Cache API 是浏览器提供的一个 API，用于在 Service Worker 中操作缓存。Cache API 主要包括 caches.open()、cache.addAll()、cache.match()、cache.put() 等方法。
caches.open()
caches.open() 用于打开一个缓存，返回的是一个 Promise 对象。我们可以通过该对象的 put() 方法将某个请求的响应缓存到该缓存中，如下所示：
// 打开一个名为 my-cache 的缓存
caches.open('my-cache').then(function(cache) {
// 将某个请求的响应缓存到 my-cache 中
cache.put(request, response.clone());
});cache.addAll()
cache.addAll() 用于将一组请求的响应缓存到某个缓存中，如下所示：
// javascriptcn.com 代码示例
var urlsToCache = [
'/',
'/styles/main.css',
'/script/main.js'
];
// 打开一个名为 my-cache 的缓存，将 urlsToCache 中的资源缓存到 my-cache 中
caches.open('my-cache').then(function(cache) {
cache.addAll(urlsToCache);
});cache.match()
cache.match() 用于在缓存中查找某个请求，如下所示：
// javascriptcn.com 代码示例
// 在名为 my-cache 的缓存中查找 request 请求对应的响应
caches.match(request).then(function(response) {
if (response) {
// 如果找到就返回缓存中的响应
return response;
}
// 找不到就发起新的请求
return fetch(request);
});cache.put()
cache.put() 用于将某个请求的响应缓存到某个缓存中，如下所示：
caches.open('my-cache').then(function(cache) {
// 将某个请求的响应缓存到 my-cache 中
cache.put(request, response.clone());
});构建离线 PWA APP
现在让我们来看一下如何使用 Service Workers 和 Cache API 来构建一个完美的离线 PWA APP。
首先，在网站的入口页面注册 Service Worker，代码如下：
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
console.log('Service Worker 注册成功：', registration.scope);
}).catch(function(err) {
console.log('Service Worker 注册失败：', err);
});
}然后，在 service-worker.js 文件中实现网络请求的缓存与离线访问功能，代码如下：
// javascriptcn.com 代码示例
// 安装 Service Worker
self.addEventListener('install', function(event) {
event.waitUntil(
// 打开缓存
caches.open('v1')
.then(function(cache) {
// 将需要缓存的静态资源加入到缓存中
return cache.addAll([
'/',
'/index.html',
'/styles/main.css',
'/script/main.js'
]);
})
);
});
// 激活 Service Worker
self.addEventListener('activate', function(event) {
event.waitUntil(
// 删除旧版本缓存
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.filter(function(cacheName) {
return cacheName !== 'v1';
}).map(function(cacheName) {
return caches.delete(cacheName);
})
);
})
);
});
// 处理 HTTP 请求
self.addEventListener('fetch', function(event) {
event.respondWith(
// 判断请求是否在缓存中
caches.match(event.request).then(function(response) {
if (response) {
// 如果在缓存中则直接返回缓存中的响应
return response;
}
// 否则发起新的请求
return fetch(event.request)
.then(function(response) {
// 如果请求成功则将响应缓存起来
return caches.open('v1').then(function(cache) {
cache.put(event.request, response.clone());
return response;
});
})
.catch(function(err) {
console.error(err);
});
})
);
});在以上代码中，我们首先实现了 Service Workers 的安装和激活逻辑，其中在安装 Service Worker 时将需要缓存的静态资源加入到缓存中。然后在处理 HTTP 请求时，我们先判断是否在缓存中能够找到请求的资源，如果找到则直接返回缓存中的响应，否则发起新的请求。如果请求成功，我们会将请求的响应缓存起来，以便在离线状态下能够访问。
总结
本文介绍了如何通过使用 Service Workers 和 Cache API 来构建一个完美的离线 PWA APP，希望能够帮助前端开发者更好地解决离线问题。同时，我们也应该意识到，离线缓存并不是万无一失的，需要我们进行进一步的测试和优化。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652b4ee67d4982a6ebd47892