service-worker - Web 浏览器在后台在线时执行同步操作

Question

我希望在后台同步一个索引数据库以供离线访问。我想在应用程序在线时执行此操作，并让它在用户甚至不知道它正在运行的后台运行

我查看了服务人员的 backgroundSync，但这似乎是为了离线使用。

我真正想要的是浏览器中的 cron 任务，这样我就可以将数据从远程服务器同步到本地浏览器内的数据库

Answer 1

这是一种不同的方法，它从后端的 API 中获取 json 结果，存储在 localStorage 中，并将结果数组传递给自定义函数以进行渲染。

如果 localStorage 在浏览器中不可用，它会在每次调用该函数时获取结果...所以当“force”参数设置为 true 时它会这样做。

它还使用 cookie 来存储检索数据时的最后时间戳。给定代码的持续时间设置为 15 分钟(900,000 毫秒)。

它还假定在 api 的 json 结果中有一个名为 .data 的成员，其中包含要缓存/更新的数据数组。

$.ajax 需要 jquery，但我确信它可以很容易地重构为使用 fetch、axios 或任何其他方法:

function getTrans(force=false) {
    var TRANS=undefined
    if(force || window.localStorage===undefined || 
        (window.localStorage!==undefined && localStorage.getItem("TRANS") === null) ||
        $.cookie('L_getTrans')===undefined ||
        ($.cookie('L_getTrans')!==undefined && Date.now()-$.cookie('L_getTrans')>900000)) {
        $.ajax({
            url: 'api/',type: 'post',
            data: {'OP':'getTrans'},
            success: function (result) { 
                TRANS = result.data ?? []
                if(window.localStorage!==undefined) {
                    localStorage.setItem('TRANS', JSON.stringify(TRANS))
                    $.cookie('L_getTrans',Date.now())
                }
                renderTransactionList(TRANS)
            },
            error: function (error) { console.error(error) }
        });
    } else {
        TRANS = JSON.parse(localStorage.getItem('TRANS'))
        renderTransactionList(TRANS)
    }
}

希望它对你们中的一些人有所帮助，甚至是有趣。