html5 manifest 离线应用程序

最新推荐文章于 2021-12-13 16:00:52 发布

曹振华

最新推荐文章于 2021-12-13 16:00:52 发布

阅读量522

点赞数 1

分类专栏： html5 文章标签： html5 manifest 离线应用程序

html5 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1）配置IIS服务器

进入IIS，找到需要配置的网站，如下界面

双击HTTP相应标头，添加【名称】【值】分别是【.manifest】【text/cache-manifest】，进入如下界面

代码实现

创建index.css、index.html、index.js、index.manifest

index.css

span {
    font-size:20px;
}

index.js

function pageLoad() {
    if (navigator.onLine) {
        alert('当前在线');
        window.applicationCache.addEventListener('checking', function () {
            console.log('正在检测是否有更新...');
        }, true);
        window.applicationCache.addEventListener('downloading', function () {
            console.log('正在下载可用的缓存...');
        }, true);
        window.applicationCache.addEventListener('noupdate', function () {
            console.log('没有最新的缓存更新！');
        }, true);
        window.applicationCache.addEventListener('progress', function () {
            console.log('本地缓存正在更新中...');
        }, true);
        window.applicationCache.addEventListener('updateready', function () {
            console.log('本地缓存已更新成功！');
            alert('刷新页面获取最新版本！');
        }, true);
        window.applicationCache.addEventListener('error', function () {
            console.log('本地缓存更新时出错！');
        }, true);
    } else {
        alert('当前离线');
    }
}

index.manifest

CACHE MANIFEST
#version 0.0.71
CACHE:
index.js
index.css

index.html

<!doctype html>
<html manifest="index.manifest">
<head>
    <title>index</title>
    <link href="index.css" rel="stylesheet" />
    <script src="index.js"></script>
</head>
<body οnlοad="pageLoad();">
    <div>
        <span>Hello World71!</span>
    </div>
</body>
</html>

验证效果

将<span>Hello World71!</span>修改成<span>Hello World72!</span>

界面显示效果如下，没有获取到更新，还是读取的本地缓存数据

修改index.manifest

将#version 0.0.71 修改成#version 0.0.72

查看效果，从服务器获取最新版本，刷新页面界面效果更新了

曹振华

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 manifest 离线应用程序

1）配置IIS服务器进入IIS，找到需要配置的网站，如下界面双击HTTP相应标头，添加【名称】【值】分别是【.manifest】【text/cache-manifest】，进入如下界面代码实现创建index.css、index.html、index.js、index.manifestindex.cssspan { font-size:20px;}
复制链接

扫一扫

专栏目录