现在的位置: 首页 > 编程语言 > 正文

为什么web应用程序需要离线运行?怎样让用户知道你的应用程序可以离线运行呢

2020年06月04日 编程语言 ⁄ 共 2831字 ⁄ 字号 评论关闭

  web应用程序的主要制约之一就是连接性。在HTML5到来之前我们就曾想挖掘浏览器的能力,以使web应用程序能像桌面应用程序一样功能强大和易于使用,但浏览器始终让我们感到失望。下面学步园小编来讲解下为什么web应用程序需要离线运行?怎样让用户知道你的应用程序可以离线运行呢?

  为什么web应用程序需要离线运行

  老实讲,一般来说,桌面电脑的web应用程序即使能够完全离线运行也不能带来多大的好处,因为桌面电脑一般都是一直连线的。我特别期待看到的是,移动设备web应用程序能够从离线应用程序缓存技术得到多大的好处。

  在许多地方,移动电话普及率都在持续增长。如果能够自然地填补网络断线的鸿沟,移动设备浏览器中的web应用程序对用户来说就更加友好了。

  在一些特定场景中,使整个应用程序能够离线运行,意味着我们只需创建一个跨平台的浏览器解决方案,而不必创建多个内建应用程序。

  试想一下,一位销售员需要随时随地向她的顾客展示商品目录单。她可以使用任何她想要的电子设备,她首次浏览商品目录单时需要连线,之后便能够随时随地离线浏览。

  应用程序缓存技术并不只是在离线状态下才有用武之地。我们可以将应用程序缓存作为一个超级缓存,用于本地存储资源,这样可以加速应用程序启动。服务器上更新了的资源可以在后台线程重新加载,加载完成之后便替换掉本地旧的资源并更新到正在运行的应用程序上。这种方式非常适用于桌面电脑的重量级web应用程序。

  清单文件

  要使用应用程序缓存,你不需要编写大量代码。你可以在一个简单的文本文件中定义需要离线使用的资源,这个文件被称作清单(manifest)文件。

  清单文件格式

  一个简单的清单文件具有如下格式:

  CACHEMANIFEST

  #Version1.0

  CACHE:

  /home/index

  /content/style.css

  /scripts/main.js

  NETWORK:

  /service/status

  FALLBACK:

  /logo.png/logo_offline.png

  其中,你必须将CACHEMANIFEST头放在清单文件的第一行。

  以数字符号#开头的行是注释行。这通常用于显式地修改清单文件以通知浏览器更新缓存。比如,在你更新了一张图片但没有修改图片的名称时,这种方式非常有用,因为浏览器并没有其他方式可以检测到服务器上的图片已被更新。

  接下来,清单文件包含了以下三节:CACHE,NETWORK以及FALLBACK。在CACHE节你可以指定需要缓存的资源。需要一直从服务器下载的资源(即使在断线的情况下)则在NETWORK中指定。如果有大量的资源需要一直从服务器下载,你可以在NETWORK节中使用通配字符(即一个星号*)表示。在FALLBACK节中,你可以指定在离线状态下可以使用的备用资源。

  清单文件的格式并不特别严格。以上介绍的几个部分可以是任意次序的,它们甚至可以在一个清单文件中多次使用。

  怎样让用户知道你的应用程序可以离线运行呢

  据我所知,没有哪种浏览器会通知用户当前应用程序是能离线运行的。不过,我们可以自己通知用户:通过监听应用程序缓存的特定事件,当应用程序已经可以离线工作时通知用户。我们甚至可以将应用程序缓存生命周期的每个阶段都通知用户。

  应用程序缓存相关事件的处理是直截了当的。其中一个特别有用的事件是progress事件。每当一个资源下载完毕时这个事件被触发,其包含三个非常有用的属性,我们可以用这三个属性来显示下载进度:lengthComputable、loaded以及total。首先,我们需检查lengthComputable属性来判断loaded和total属性是否可用,接着我们使用loaded和total属性计算出资源下载的百分比进度。

  window.applicationCache.onchecking=function(e){

  updateCacheStatus('Checkingforanewversionoftheapplication.');

  };

  window.applicationCache.ondownloading=function(e){

  updateCacheStatus('Downloadinganewofflineversionoftheapplication');

  };

  window.applicationCache.oncached=function(e){

  updateCacheStatus('Theapplicationisavailableoffline.');

  };

  window.applicationCache.onerror=function(e){

  updateCacheStatus('Somethingwentwrongwhileupdatingtheofflineversionoftheapplication.Itwillnotbeavailableoffline.');

  };

  window.applicationCache.onupdateready=function(e){

  window.applicationCache.swapCache();

  updateCacheStatus('Theapplicationwasupdated.Refreshforthechangestotakeplace.');

  };

  window.applicationCache.onnoupdate=function(e){

  updateCacheStatus('Theapplicationisalsoavailableoffline.');

  };

  window.applicationCache.onobsolete=function(e){

  updateCacheStatus('Theapplicationcannotbeupdated,nomanifestfilewasfound.');

  };

  window.applicationCache.onprogress=function(e){

  varmessage='Downloadingofflineresources..';

  if(e.lengthComputable){

  updateCacheStatus(message+Math.round(e.loaded/e.total*100)+'%');

  }else{

  updateCacheStatus(message);

  };

  };

  以上就是关于“为什么web应用程序需要离线运行?怎样让用户知道你的应用程序可以离线运行呢”的内容,希望对大家有用。更多资讯请关注学步园。学步园,您学习IT技术的优质平台!

抱歉!评论已关闭.