html5支持离线应用吗-前端问答-PHP中文网

首页

web前端

前端问答

html5支持离线应用吗

青灯夜游

Aug 01, 2022 pm 05:57 PM

html5离线应用

html5支持离线应用。离线应用是html5新增的特性，利用本地缓存机制，使得用户可以在网页或应用在没有网络的情况下依然可以使用。为了能够让Web应用程序在离线状态的时候也能正常工作，必须把所有构成Web应用程序的资源文件，诸如HTML文件，CSS文件，JavaScript脚本文件放在本地缓存中，这样当服务器没有和网络连接时，也可以利用本地缓存中的资源文件来正常运行应用程序。

html5支持离线应用吗

本教程操作环境：windows7系统、HTML5版、Dell G3电脑。

HTML5新增了离线应用，利用本地缓存机制，离线应用使得我们可以在网页或应用在没有网络的情况下依然可以使用。当客户端本地与web应用程序的服务器没有建立连接时，也能正常在客户端本地使用该web应用程序进行有关操作。

为了能够让Web应用程序在离线状态的时候也能正常工作，必须把所有构成Web应用程序的资源文件，诸如HTML文件，CSS文件，JavaScript脚本文件放在本地缓存中，当服务器没有和网络连接时，也可以利用本地缓存中的资源文件来正常运行Web应用程序。

离线应用的使用需要以下几个步骤：

离线检测（确定是否联网）
访问一定的资源
有一块本地空间用于保存数据（无论是否上网都不妨碍读写）

使用HTML5离线web应用

1、检查浏览器的支持情况的方法

  if(window.applicationCache){
        //浏览器支持离线应用
  }

2、关于描述文件
描述文件用来列出需要缓存和不需要缓存的资源，以备离线时使用。
描述文件的扩展名以前用.manifest，现在推荐使用.appcache，并且描述文件需要配置正确的MIME-type，即"text/cache-manifest"，必须在web服务器上进行配置（文件编码必须是UTF-8）。不同的服务器有不同的配置方法，具体这里不详述。

首行必须以以下字符串开始

    CACHE MANIFEST

剩下的就是要缓存的文件的URL，一行一个（相对URL是相对于清单文件而言的，不是相对于文件）

    #以“#”开头的是注释
    common.css
    common.js

这样这个文件中列举的所有的文件都会被缓存

在清单中，可以使用特殊的区域头来标识头信息之后的清单项的类型，上面的最简单的缓存属于"CACHE:"区域。
像这样

    #该头信息之后的内容需要缓存    CACHE:
    common.css
    connom.js

以"NETWORK:"开头的区域列举的文件，总是从线上获取，不缓存

NETWORK:头信息支持通配符"*",表示任何未明确列举的资源，都将通过网络加载

    #该头信息之后的内容不需要缓存，总是从线上获取
    NETWORK:
    a.css
    #表示以name开头的资源都不要缓存
    name/

以"FALLBACK:"开头的区域中的内容，提供了获取不到缓存资源时的备选资源路径
该区域中的内容，每一行包含两个URL（第一个URL是一个前缀，任何匹配的资源都不被缓存，第二个URL表示需要被缓存的资源）

    FALLBACK:
    name/  example.html

一个清单可以有任意多个区域，且位置没有限制。

3、搭建离线应用程序
假设我们要构建一个包含css，js，html的单页应用，同时要为这个单页应用添加离线支持。

要将描述文件与页面关联起来，需要使用html标签的manifest特性指定描述文件的路径

    <html manifest=&#39;./offline.appcche&#39;>

开发离线应用的第一步就是检测设备是否离线

HTML5新增了navigator.onLine属性
当该属性为true的时候表示联网，值为false的时候，表示离线

  if(navigator.onLine){      //联网  }else{      //离线  }

** 注：IE6及以上浏览器及其他标准浏览器都支持这个属性 **

online事件（IE9+浏览器支持）

当网络从离线变为在线的时候触发该事件，在window上触发该事件，不需要刷新

 window.online = function(){        //需要触发的事件    }

offline事件（IE9+浏览器支持）
当网络从在线变为离线的时候触发该事件，和online事件一样，在window上触发该事件，不需要刷新

window.offline = function(){      //需要触发的事件  }

应用缓存

应用缓存（Application Cache）是从浏览器的缓存中分出来的一块缓存区（大小根据具体浏览器而定，一般是5M）

应用缓存和网页缓存的区别：

应用缓存为整个web应用程序服务，网页缓存服务于单个网页
应用缓存只缓存指定页面需要的指定资源（可人为控制），任何网页都具有网页缓存（浏览器默认行为）
应用缓存不会随着清除浏览器缓存而消失
应用缓存不会像网页缓存那样，老数据会被最新一次的新数据替代
应用缓存可以离线访问，网页缓存必须在线访问
应用缓存可靠，可控，网页缓存不可控

应用缓存的优势

离线浏览
速度更快--已缓存资源加载更快
减少负载--浏览器只从服务器下载更新过的文件

一个web应用首次下载并缓存之后，任何加载请求都优先来自于缓存，因此可以实现离线缓存。如果不需要使用离线缓存了，就需要在服务器端删除描述文件，或者删除HTML页面中的manifest属性。

一旦应用被缓存，则缓存始终不变。那么，怎样才能改变缓存

用户清空应用缓存
manifest文件被修改
使用update()方法更新缓存

如果服务器上的文件有所修改的话，那么修改描述文件中注释行的日期或者版本号是一个不错的使浏览器重新缓存文件的办法

此外，我们还可以使用HTML5提供的API来操作和更新缓存

applicationCache API

applicationCache API是一个操作应用缓存的接口。新的window.applicationCache对象可以触发一系列与缓存状态相关的事件。
这个对象有一个status属性，值为常量，表示缓存状态

0：没有与页面相关的应用缓存（未缓存）
1：应用缓存未得到更新（空闲）
2：正在下载描述文件并检查更新（检查中）
3：应用缓存正在下载描述文件中指定的资源（下载中）
4：应用缓存已经更新了资源，而且所有资源都已下载完毕，可以通过swapCache()来使用了（更新就绪）
5：应用缓存的描述文件不存在了，页面无法再访问应用缓存（已过期）

这个对象有以下事件，表示其状态的改变

每次载入一个设置了manifest属性的HTML文件，首先会触发checking事件
如果应用程序已经缓存，并且清单文件没有改动，则浏览器触发noupdate事件
如果应用程序已经缓存，并且清单文件发生改动，则浏览器触发downloading事件，下载完毕后触发updateready事件
如果应用程序未缓存，则downloading事件和progress事件都会触发，但是下载完成后触发cached事件而不是updateready事件
如果处于离线，无法检测清单状态，则触发error事件，如果引用一个不存在的清单文件，也会触发error事件
如果处于在线，应用也缓存了，但是清单文件不存在，则会触发obsolete事件，并将应用程序从缓存中清除。

一般来讲，这些事件会随着页面加载按上述顺序依次触发

update()方法

通过update()方法也可以手工干预，让应用缓存为检查更新而触发上述事件

    applicationCache.update();

update()一经调用，应用缓存就会去检查描述文件是否更新，触发checking事件，然后页面就会像刚刚加载一样，继续执行后续操作。如果触发了cached事件，则说明应用缓存已经准备就绪，不会再发生其他操作。

swapCache()方法

如果触发了updateready事件，则说明新版本的应用缓存已经可用，需要调用swapCache()方法来启用新的应用缓存。

    applicationCache.onupdateready = function(){
        applicationCache.swapCache();
    };

浏览器检查清单文件，以及更新缓存的操作是异步的，因此可能是在载入旧缓存之后进行，因此可能需要载入两次才能显示最新的内容，因此需要提示用户

    window.applicationCache.onupdateready = function(){
        var con = comfirm(&#39;有新内容可用，是否重新加载？&#39;);
        if(con){
            location.reload();
        }
    }

相关推荐：《html视频教程》

以上是html5支持离线应用吗的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

反应：现代前端发展基础Apr 19, 2025 am 12:23 AM

React是构建现代前端应用的JavaScript库。1.它采用组件化和虚拟DOM优化性能。2.组件使用JSX定义，状态和属性管理数据。3.Hooks简化生命周期管理。4.使用ContextAPI管理全局状态。5.常见错误需调试状态更新和生命周期。6.优化技巧包括Memoization、代码拆分和虚拟滚动。

React的未来：Web开发的趋势和创新Apr 19, 2025 am 12:22 AM

React的未来将专注于组件化开发的极致、性能优化和与其他技术栈的深度集成。1)React将进一步简化组件的创建和管理，推动组件化开发的极致。2)性能优化将成为重点，特别是在大型应用中的表现。3)React将与GraphQL和TypeScript等技术深度集成，提升开发体验。

REACT：构建UI组件的强大工具Apr 19, 2025 am 12:22 AM

React是用于构建用户界面的JavaScript库，其核心思想是通过组件化构建UI。1.组件是React的基本单位，封装UI逻辑和样式。2.虚拟DOM和状态管理是组件工作的关键，状态通过setState更新。3.生命周期包括挂载、更新和卸载三个阶段，合理使用可优化性能。4.使用useState和ContextAPI管理状态，提高组件复用性和全局状态管理。5.常见错误包括状态更新不当和性能问题，可通过ReactDevTools调试。6.性能优化建议包括使用memo、避免不必要的重新渲染、使用us

使用与HTML的React：渲染组件和数据Apr 19, 2025 am 12:19 AM

在React中使用HTML渲染组件和数据可以通过以下步骤实现：使用JSX语法：React使用JSX语法将HTML结构嵌入JavaScript代码中，编译后操作DOM。组件与HTML结合：React组件通过props传递数据，动态生成HTML内容，如。数据流管理：React的数据流是单向的，从父组件传递到子组件，确保数据流动可控，如App组件传递name到Greeting。基本用法示例：使用map函数渲染列表，需添加key属性，如渲染水果列表。高级用法示例：使用useState钩子管理状态，实现动

React的目的：构建单页应用程序（SPA）Apr 19, 2025 am 12:06 AM

React是构建单页面应用（SPA）的首选工具，因为它提供了高效、灵活的用户界面构建方式。1）组件化开发：将复杂UI拆分成独立、可复用的部分，提高可维护性和复用性。2）虚拟DOM：通过比较虚拟DOM与实际DOM的差异，优化渲染性能。3）状态管理：通过状态和属性管理数据流，确保数据的一致性和可预测性。

反应：JavaScript库用于Web开发的功能Apr 18, 2025 am 12:25 AM

React是由Meta开发的用于构建用户界面的JavaScript库，其核心是组件化开发和虚拟DOM技术。1.组件与状态管理：React通过组件（函数或类）和Hooks（如useState）管理状态，提升代码重用性和维护性。2.虚拟DOM与性能优化：通过虚拟DOM，React高效更新真实DOM，提升性能。3.生命周期与Hooks：Hooks（如useEffect）让函数组件也能管理生命周期，执行副作用操作。4.使用示例：从基本的HelloWorld组件到高级的全局状态管理（useContext和

React的生态系统：库，工具和最佳实践Apr 18, 2025 am 12:23 AM

React生态系统包括状态管理库（如Redux）、路由库（如ReactRouter）、UI组件库（如Material-UI）、测试工具（如Jest）和构建工具（如Webpack）。这些工具协同工作，帮助开发者高效开发和维护应用，提高代码质量和开发效率。

React和前端开发：全面概述Apr 18, 2025 am 12:23 AM

React是由Facebook开发的用于构建用户界面的JavaScript库。1.它采用组件化和虚拟DOM技术，提高了UI开发的效率和性能。2.React的核心概念包括组件化、状态管理（如useState和useEffect）和虚拟DOM的工作原理。3.在实际应用中，React支持从基本的组件渲染到高级的异步数据处理。4.常见错误如忘记添加key属性或不正确的状态更新可以通过ReactDevTools和日志调试。5.性能优化和最佳实践包括使用React.memo、代码分割和保持代码的可读性与可维

See all articles