请教页面离线技术

[heyjude321]

请教，有无这样一种技术： 初次访问某个网址时，保存数据到浏览器本地存储，关闭网页后，再次访问该网址，即使此时没有网络，也可以从本地存储加载数据进网页，让用户可以做一些基本的操作。 请问可以实现吗？

[noe132]

可以。这个叫 service worker 。可以在没有网络的时候加载上一次缓存的资源，包括 html js css img 等等等。你还可以缓存所有修改请求，在有网络之后再同步回去。可以试试这个站 https://devdocs.io/ ，在设置里离线一些文档，然后断开网络，你会发现可以直接打开页面而不需要网络连接。

[heliotrope]

PWA

[waiaan]

localstorage 或者 indexedDB ？

[3dwelcome]

我也没用官分的缓存，用户 cookie 是保存在 localStrage 里，资源是保存在 indexedDb 里。确保 hash 没更新的情况下，所有数据只需要下载一次，并且永远不会过期。

当然无网络的情况，是没办法避免一楼 service worker 的。

[murmur]

有没有这种东西：exe

我都需要离线了，我自然排除浏览器，你离线了给我个阉割版，为啥不打包成 app 给我

[3dwelcome]

@murmur 这就是个很有意思的问题了，exe 是很好，就是没流量没入口，产品推广难度大了 N 倍。

[waiaan]

@waiaan
理解错了，如果网站要离线使用是 1 楼那种。

[phony2r]

service worker

[learningman]

pwa 标答

[haah]

简单呀！用 127.0.0.1 在本地存放一份，不就行了。

[Loserzhu]

@murmur 有没有这种可能：exe 提供 browser 环境. 即使离线，也可以完成基本操作。而恰好 steam 、epic 客户端就这么做的？

[Curtion]

需求完美和 Service Worker 契合

[ClericPy]

哈哈 果然自古一楼出真理, 又学到了

虽然我平时遇到这种情况, 直接另存为 mhtml 了事...

[hamsterbase]

@ClericPy

我觉得你可以试试看我的产品 hamsterbase/hamsterbase （纯离线 + 自部署）

支持上传 mhtml , 浏览 mhtml 。 显示效果和原先的页面一模一样。

[MossFox]

如楼上说的一致，Service worker 可用帮助缓存。如果需要快速生成可用的 Service Worker ，使用 Google 的 workbox-cli 可用直接指定要缓存的文件类型，帮你创建好 sw.js ，几乎可用不用手写代码。

https://developer.chrome.com/docs/workbox/modules/workbox-cli/

留意一下，采用这种方法的话，如果静态文件有更新，每一次也要充新生成一下 sw.js 。在用户完全退出页面后可自动完成更新。
(如果要强制在页面刷新的时候就丢掉旧的 Service Worker 并载入新的静态文件 (即 skip waiting)，可在检测已有新的 service worker 在等待的时候，向新安装的那个 postMessage 来实现，具体参考谷歌的文档就好)

因为这个 [页面刷新时不会立即应用更新] 可能是个坑，所以我就多啰嗦了一点。下面是我以前写过的一个解决此问题的例子，要是会用到的话可用参考下。

```
window.addEventListener('load', async () => {
try {
let reg = await navigator.serviceWorker.register('/sw.js');
if (reg) {
// listen for update
reg.addEventListener('updatefound', () => {
let worker = reg.installing;
worker.addEventListener('statechange', () => {
if (worker.state === 'installed') {
worker.postMessage({
type: "SKIP_WAITING"
});
}
});
});
// one update already installed
if (reg.waiting) {
reg.waiting.postMessage({
type: "SKIP_WAITING"
});
}
}
} catch (err) {
console.log(err);
}
});

```

[MossFox]

@MossFox 整忘了，快速指定静态文件类型然后直接生成的工具是 Workbox wizard ，看这个 https://developer.chrome.com/docs/workbox/modules/workbox-cli/#wizard

[MossFox]

@MossFox 整忘了，快速指定静态文件类型然后直接生成的工具是 Workbox wizard ，看上面页面的 wizard 条目就好

[ychost]

这就是 PWA 啊

[byte10]

我记得 H5 规范就有啊，2014 年的时候， 可以根据版本是否要刷新页面。当年就写了一个飞行棋游戏，在浏览器上访问过一次就好了，下次离线访问可以继续玩飞行棋

[supersu]

singlefile 曲线救国~

[aleen42]

HTML5 manifest

[Cmdhelp]

localstorage