什么是离线浏览？
在网络不可用的情况下，我们的浏览器可以继续加载以前访问过的页面，并且还可以执行存储在浏览器缓存中的 JavaScript 脚本，这就是离线浏览。HTML5 提供了一个应用缓存 (Application Cache)，使得我们能够方便的将 Web 应用程序从在线模式切换到离线模式。
<!DOCTYPE html>
<html manifest="example.appcache">
</html>
如何启用应用缓存?
使用应用缓存将需要一个 manifest 文件，并在 HTML 文件中指定 manifest 的路径。在 manifest 文件中，我们将列出需要缓存的文件，浏览器将自动将这些文件缓存到本地。
以下是一个最基本的 manifest 文件：
CACHE MANIFEST
# 缓存文件版本号
CACHE:
# 需要离线访问的文件列表
/css/styles.css
/js/scripts.js
/images/logo.png
NETWORK:
# 不需要缓存，但需要在离线时联网获取的文件列表
/api/data.json
FALLBACK:
# 离线时使用的替代页面
/offline.html
在对应的 HTML 文件中，我们使用 manifest 属性来引用 manifest 文件：
<!DOCTYPE html>
<html manifest="example.appcache">
<head>
<meta charset="UTF-8">
<title>Offline App</title>
</head>
<body>
<p>This is my offline app.</p>
</body>
</html>
如何使用 JavaScript 实现离线功能？
在我们的网页中，可以通过离线缓存来记录用户访问的 URL，以便下次在离线浏览时快速加载页面，需要注意的是，在浏览器刚开始离线工作时，应该先检查浏览器是否支持应用缓存，并加载相关的资源：
var appCache = window.applicationCache;
function handleCacheEvent(e) {
// 根据事件类型处理缓存情况
}
function handleNetworkEvent(e) {
// 处理联网时的情况
}
if (appCache) {
appCache.addEventListener('cached', handleCacheEvent, false);
appCache.addEventListener('checking', handleCacheEvent, false);
appCache.addEventListener('downloading', handleCacheEvent, false);
appCache.addEventListener('updateready', handleCacheEvent, false);
appCache.addEventListener('obsolete', handleCacheEvent, false);
appCache.addEventListener('error', handleCacheEvent, false);
appCache.addEventListener('noupdate', handleNetworkEvent, false);
appCache.addEventListener('downloading', handleNetworkEvent, false);
appCache.addEventListener('cached', handleNetworkEvent, false);
appCache.addEventListener('updateready', handleNetworkEvent, false);
appCache.addEventListener('obsolete', handleNetworkEvent, false);
appCache.addEventListener('error', handleNetworkEvent, false);
}
在启用了应用缓存之后，我们还需要使用 JavaScript 来检查离线浏览时的状态，并且执行我们需要的操作。
例如，在仅在离线时才加载的脚本上使用：
<script src="offline-script.js" onload="init()"></script>
function init() {
if (navigator.onLine) {
// 在线时的操作
} else {
// 离线时的操作
}
}
还可以使用 HTML5 的 localStorage 来保存某些数据，以在下次访问时还原应用程序状态：
var offlineData = localStorage.getItem('offline-data');
if (offlineData) {
// 还原应用程序状态
} else {
// 进行初始化操作
}
如何在浏览器离线工作时执行 JavaScript？
由于我们无法保证离线时原始的 JavaScript 文件已经加载到缓存中，而我们需要確保 JavaScript 文件在离线模式下仍然能够用来执行相应任务，这时我们可以使用脚本模板和模板标签，来达到实时编译并运行 JavaScript 代码。在 HTML 文件的头部，我们使用脚本模板:
<!DOCTYPE html>
<html manifest="example.appcache">
<head>
<meta charset="UTF-8">
<title>Offline App</title>
<script type="text/javascript" id="template"></script>
</head>
<body>
...
</body>
</html>
然后，我们使用 JavaScript 来接收模板中的字符串，并且通过 eval() 函数来运行脚本代码：
var temperatures = [0.1, 0.5, 0.8];
for (let i = 0; i < temperatures.length; i++) {
let script = "var temperature = " + temperatures[i] + ";";
let template = document.getElementById("template");
template.textContent = script;
try {
eval(script);
// 在离线模式下使用 temperature 来进行计算
} catch (e) {
console.error("Error while evaluating script:", e);
}
}
结论
离线浏览使得 Web 应用程序更具有可用性和可靠性。通过使用应用缓存，我们可以将 Web 应用程序缓存到本地，以保证在网络不可用时仍然能够继续使用。在应用程序离线时，我们可以使用 JavaScript 和 HTML5 的 localStorage 来产生交互效果，并且通过脚本模板和模板标签使用 AJAX 请求离线时需要的资源，并且使用 eval() 函数来动态执行代码。在开发 Web 应用程序时，我们应该尽量提高应用程序的可用性，并且把互联网作为补充而不是关键，在应用程序离线时仍然能够完整地运行。