更新时间:2022-06-27 来源:黑马程序员 浏览量:
今天的web前端培训,我们说一下移动web离线应用。在过去很长一段时间里,浏览器端的应用程序无法完全与APP相媲美,一个重要的原因在于,如果断了网,浏览器端的程序就无法运行,所有的工作都必须停止,而HTML5的离线应用功能,改变了这一现状。
HTML5使用Application Cache接口提供应用程序缓存技术,这意味着Web应用可进行缓存,并在没有网络的情况下轻松地创建离线应用。Application Cache是从浏览器的缓存中分出来的一块缓存区,要想在这块缓存中保存数据,可以使用一个描述文件列出要下载和缓存的资源,并且通过该缓存的状态手动更新资源文件的缓存。离线缓存功能的使用有一个前提,就是需要访问的Web页面至少被在线访问过一次。
使用Application Cache缓存接口的优势如下:
(1)实现离线浏览:用户可在离线时浏览完整的网站。
(2)更快的加载速度:缓存资源为本地资源,因此加载速度较快。
(3)服务器负载更少:浏览器只会从发生了更改的服务器下载资源。
那么,离线应用的存储方式和2.1节中讲解的Web Storage有什么区别? localStroage支持String类型的数据的持久化,是否也可以做离线缓存?
Web Storage主要用于浏览器缓存,而Application Cache用于存储静态资源,其中localStorage在某个场景下可用于离线存储,例如,向客户端保存用户名和密码,但是相比Application Cache而言有局限性。对于离线应用,需要缓存的不仅是字符串,还有一些应用程序、图片、CSS 文件等,实现这些功能,使用Application Cache更合适。
另外,离线存储与浏览器缓存的区别在于:离线存储为Web提供服务,而浏览器缓存只缓存单个页面;离线存储可以指定需要缓存的文件,浏览器缓存无法指定。