请教页面离线技术

2022-04-28 15:54:21 +08:00
 heyjude321

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

3301 次点击
所在节点    JavaScript
22 条回复
noe132
2022-04-28 15:57:35 +08:00
可以。这个叫 service worker 。可以在没有网络的时候加载上一次缓存的资源,包括 html js css img 等等等。你还可以缓存所有修改请求,在有网络之后再同步回去。可以试试这个站 https://devdocs.io/ ,在设置里离线一些文档,然后断开网络,你会发现可以直接打开页面而不需要网络连接。
heliotrope
2022-04-28 16:01:10 +08:00
PWA
waiaan
2022-04-28 16:05:50 +08:00
localstorage 或者 indexedDB ?
3dwelcome
2022-04-28 16:06:18 +08:00
我也没用官分的缓存,用户 cookie 是保存在 localStrage 里,资源是保存在 indexedDb 里。确保 hash 没更新的情况下,所有数据只需要下载一次,并且永远不会过期。

当然无网络的情况,是没办法避免一楼 service worker 的。
murmur
2022-04-28 16:08:09 +08:00
有没有这种东西:exe

我都需要离线了,我自然排除浏览器,你离线了给我个阉割版,为啥不打包成 app 给我
3dwelcome
2022-04-28 16:10:28 +08:00
@murmur 这就是个很有意思的问题了,exe 是很好,就是没流量没入口,产品推广难度大了 N 倍。
waiaan
2022-04-28 16:18:47 +08:00
@waiaan
理解错了,如果网站要离线使用是 1 楼那种。
phony2r
2022-04-28 16:33:39 +08:00
service worker
learningman
2022-04-28 16:39:47 +08:00
pwa 标答
haah
2022-04-28 16:42:10 +08:00
简单呀!用 127.0.0.1 在本地存放一份,不就行了。
Loserzhu
2022-04-28 17:42:59 +08:00
@murmur 有没有这种可能:exe 提供 browser 环境. 即使离线,也可以完成基本操作。而恰好 steam 、epic 客户端就这么做的?
Curtion
2022-04-28 17:49:07 +08:00
需求完美和 Service Worker 契合
ClericPy
2022-04-28 17:50:49 +08:00
哈哈 果然自古一楼出真理, 又学到了

虽然我平时遇到这种情况, 直接另存为 mhtml 了事...
hamsterbase
2022-04-28 18:37:58 +08:00
@ClericPy

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

支持上传 mhtml , 浏览 mhtml 。 显示效果和原先的页面一模一样。
MossFox
2022-04-28 18:55:08 +08:00
如楼上说的一致,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
2022-04-28 18:57:03 +08:00
@MossFox 整忘了,快速指定静态文件类型然后直接生成的工具是 Workbox wizard ,看这个 https://developer.chrome.com/docs/workbox/modules/workbox-cli/#wizard
MossFox
2022-04-28 18:57:30 +08:00
@MossFox 整忘了,快速指定静态文件类型然后直接生成的工具是 Workbox wizard ,看上面页面的 wizard 条目就好
ychost
2022-04-28 19:15:58 +08:00
这就是 PWA 啊
byte10
2022-04-28 21:14:50 +08:00
我记得 H5 规范就有啊,2014 年的时候, 可以根据版本是否要刷新页面。当年就写了一个飞行棋游戏,在浏览器上访问过一次就好了,下次离线访问可以继续玩飞行棋
supersu
2022-04-28 21:41:53 +08:00
singlefile 曲线救国~

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/849836

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX