V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
heyjude321
V2EX  ›  JavaScript

请教页面离线技术

  •  
  •   heyjude321 · 2022-04-28 15:54:21 +08:00 · 3008 次点击
    这是一个创建于 700 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

    支持上传 mhtml , 浏览 mhtml 。 显示效果和原先的页面一模一样。
    MossFox
        15
    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
        16
    MossFox  
       2022-04-28 18:57:03 +08:00
    @MossFox 整忘了,快速指定静态文件类型然后直接生成的工具是 Workbox wizard ,看这个 https://developer.chrome.com/docs/workbox/modules/workbox-cli/#wizard
    MossFox
        17
    MossFox  
       2022-04-28 18:57:30 +08:00
    @MossFox 整忘了,快速指定静态文件类型然后直接生成的工具是 Workbox wizard ,看上面页面的 wizard 条目就好
    ychost
        18
    ychost  
       2022-04-28 19:15:58 +08:00
    这就是 PWA 啊
    byte10
        19
    byte10  
       2022-04-28 21:14:50 +08:00
    我记得 H5 规范就有啊,2014 年的时候, 可以根据版本是否要刷新页面。当年就写了一个飞行棋游戏,在浏览器上访问过一次就好了,下次离线访问可以继续玩飞行棋
    supersu
        20
    supersu  
       2022-04-28 21:41:53 +08:00 via Android
    singlefile 曲线救国~
    aleen42
        21
    aleen42  
       2022-04-29 08:03:18 +08:00 via Android
    HTML5 manifest
    Cmdhelp
        22
    Cmdhelp  
       2022-04-29 10:46:37 +08:00
    localstorage
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1920 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 16:24 · PVG 00:24 · LAX 09:24 · JFK 12:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.