教你如何构建一个离线应用？

作者： 麦乐

什么是离线应用？

离线应用是指通过离线缓存技术，让资源在第一次被加载后缓存在本地，下次访问它时就直接返回本地的文件，就算没有网络连接。

优点：

• 在没有网络的情况下也能打开网页。
• 由于部分被缓存的资源直接从本地加载，对用户来说可以加速网页加载速度，对网站运营者来说可以减少服务器压力以及传输流量费用。

离线应用的核心是离线缓存技术，目前比较成熟Service Workers。它可以通过 JavaScript 代码去控制缓存的逻辑。也就是说，这个过程可以交给前端来处理。

为什么需要？

离线应用其实就是一种缓存技术，那有的人可能会想，HTTP的缓存策略已经发展的相当成熟了，为什么还需要Service Workers？前端的开发者会觉得：“浏览器的事情，为什么要依赖于后端呢？后端就好好提供数据就行了，缓存这种事情我想自己控制”。

什么是Service Workers

Service Workers 是一个在浏览器后台运行的脚本，它生命周期完全独立于网页。它无法直接访问 DOM，但可以通过 postMessage 接口发送消息来和 UI 进程通信。 拦截网络请求是 Service Workers 的一个重要功能，通过它能完成离线缓存、编辑响应、过滤响应等功能。

Service Worker并非专门为缓存而设计，它还可以解决Web应用推送、后台长计算等问题。

判断浏览器是否支持 Service Workers 的最简单的方法是通过以下代码：

// 如果 navigator 对象上存在 serviceWorker 对象，就表示支持
if (navigator.serviceWorker) {
  // 通过 navigator.serviceWorker 使用
}

注册 Service Workers

要给网页接入 Service Workers，需要在网页加载后注册一个描述 Service Workers 逻辑的脚本。 通常它在 index.h