Javascript 在脱机模式下加载html页面的ajax调用的替代方法是什么？

我通过下面的代码导航到一个HTML页面。这段代码在联机模式下（当我有internet时）可以正常工作，但在脱机模式下，当没有网络连接时，它不工作

<script>
    $(document).ready(function () {
        var homeUrl = "./js/app/views/abc.html";
        $.ajax({
            url: homeUrl, success: function (result) {
                $('#myapp').html(result);
            }
        });
    });
</script>

$（文档）.ready（函数（）{
var homeUrl=“./js/app/views/abc.html”；
$.ajax({
url:homeUrl，成功：函数（结果）{
$（'#myapp'）.html（结果）；
}
});
});

我想用下面的代码来修复它，但我认为这不是一个好的解决方案，因为我需要将整个HTML内容写成一个字符串，所以这很容易出错，很复杂，而且对于多个页面来说很难做到。有没有更好的办法

<script>
    $(document).ready(function () {
        var result = "Whole html content of abc.html";
        $('#myapp').html(result);
    });
</script>

$（文档）.ready（函数（）{
var result=“abc.html的全部html内容”；
$（'#myapp'）.html（结果）；
});

您是否尝试将其存储在localStorage中？基本上，无论何时调用该端点，都将其结果保存在本地存储中

然后，当浏览器脱机且服务器调用返回错误时，您可以从localStorage获取存储的结果，并使用该结果呈现页面

var homeUrl=“./js/app/views/abc.html”；
var cacheKey='myUniqueCacheKey'；
$.ajax({
url:homeUrl，
成功：功能（结果）{
setItem（缓存键，字符串（结果））；
$（'#myapp'）.html（结果）；
},
错误：函数（err）{
var htmlString=localStorage.getItem（cacheKey）；
if（err.condition&&htmlString）{
$（'#myapp'）.html（htmlString）；
}否则{
//在这里执行正常的错误处理
}
}
});

我想你说的是

服务人员

？我不知道那是什么看，官方文件：也研究PWA（渐进式web应用程序）和离线第一个东西，比如什么是互联网，第一次不可用？如果互联网第一次不可用，用户的浏览器无法连接到服务器以获取定义网站的源代码文件，包括上述代码。除非您计划在用户的计算机上手动安装源代码，否则您要求的是解决一个不可能的问题。