创建离线web应用

1.定义清单manifest

离线web应用因为有很多资源文件是在线加载的，所以需要提前将这些资源文件缓存起来。
清单manifest可以列出离线工作所需的所有资源：

CACHE MANIFEST
index.html
banner.png
apply.png

FALLBACK:
*.png offline.png

CACHE:
cherries.png

NETWORK：
ready.png

其中，
FALLBACK区域：如果缓存中没有找到相关资源，则使用备用图片。
CACHE区域：需要提前缓存的文件
NETWORK区域：浏览器会尝试从服务器请求相关资源

可以根据浏览器的window.navigator.onLine属性判断浏览器离线还是在线。

    if(window.navigator.onLine){
        console.log('online');
    }
    else{
        console.log('offline');
    }

这个属性只有在浏览器确定它是离线状态才是明确的。

window.applicationCache.update() 更新缓存，确保项目中的资源为最新
*调用此方法时，浏览器会检查清单文件是否有变化，如果有变化就会重新载入缓存

window.applicationCache.swapCache() 交换缓存，将已更新的缓存与当前缓存交换
*调用此方法时页面不会自动刷新，只有下次从缓存中请求资源时才会使用

*目前chorme浏览器对离线web应用的支持不是很好，备用区域和操作离线缓存暂时不可用

最后编辑于：2017.12.06 16:40:49

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。