美文网首页
HTML 5 应用程序缓存

HTML 5 应用程序缓存

作者: InnoTech | 来源:发表于2018-03-19 17:19 被阅读0次

真是个好东西,在断线的情况下还能浏览网页

在index.html中

index.appcache中

index.appcache访问的mime-type是text/cache-manifest

apache里默认是配置好的 在apache\apache2.4.27\conf\mime.types

其原理从使用感受上来看先判断 index.appcache 文件有没有修改 要是修改了再判断index.appcache中列出的文件有没有修改,要是修改了 加载修改过的文件,没有修改都读缓存.要是index.cache列出了无效的文件,那么整个缓存会失败。


配置好之后 加载完网页 断网 刷新页面还能加载出来

事件和状态:

function getCacheStatus()

{

    var appCache = window.applicationCache;

    switch (appCache.status)

    {

        case appCache.UNCACHED: // UNCACHED == 0

            return 'UNCACHED';

        case appCache.IDLE: // IDLE == 1

            return 'IDLE';

        case appCache.CHECKING: // CHECKING == 2

            return 'CHECKING';

        case appCache.DOWNLOADING: // DOWNLOADING == 3

            return 'DOWNLOADING';

        case appCache.UPDATEREADY: // UPDATEREADY == 4

            return 'UPDATEREADY';

        case appCache.OBSOLETE: // OBSOLETE == 5

            return 'OBSOLETE';

    }

    return 'UKNOWN CACHE STATUS';

}

window.onload = function()

{

    var appCache = window.applicationCache;

    appCache.addEventListener('checking',function(e){console.log(e); });

    appCache.addEventListener('progress',function(e){console.log('progress',e); });

    appCache.addEventListener('updateready',function(e){

        console.log(e);

        appCache.swapCache();

        ////window.location.reload();

    });

    setInterval(function()

    {

        appCache.update();

        console.log("updating");

    }, 6000);

    console.log(window.navigator.onLine);

    window.addEventListener("offline", function(e){console.log(e);});

    window.addEventListener("online", function(e){console.log(e);});

};

相关文章

网友评论

      本文标题:HTML 5 应用程序缓存

      本文链接:https://www.haomeiwen.com/subject/yappqftx.html