构建离线WEB应用

2019-05-17 admin

HTML5新增了localstroage和application cache做离线缓存,两种缓存各有应用的场景,今天我们说说application cache这种方案。

web当中使用缓存的原因之一是为了支持离线应用,其它优点:

  1. 减少网络资源的请求(减少服务器压力)
  2. 相比网络加载资源,加载本地资源速度更快,体验更好
  3. 在断网的情况下,能提供良好的用户体验(断网加载)

通常缓存的资源包括:HTML文档,JS文件,CSS文件,图片,多媒体 application cache 缓存的资源文件,通常保存在浏览器持久性存储资源的地方,也就是在本地硬盘上面

使用HTML5离线WEB应用API:

1、检查浏览器是否支持

    if(window.applicationCache){
        // 则支持离线缓存
    }

2、在html文档的HTML元素上添加manifest特性,如下:

    <html manifest='application.appcache'>
        <head></head>
        <body></body>
    </html>

3、在application.appcache文件中,定义缓存文件清单,比如:

    CACHE MANIFEST

4、支持离线行为 HTML5引入了一些新的事件,可以让应用程序检测网络是否正常连接。这样就可以控制应用程序在离线和在线的时候有不同的行为,HTML5当中可以通过检测window.navigator对象来做判断,navigator.onLine是一个标明浏览器是否在线的布尔属性,我们可以通过以下代码作相应的判断:

    function loadDemo(){
        if(navigator.onLine){
            log("online")
        }else{
            log("offline")
        }
    }

    // 添加事件
    window.addEventListener("online",function(e){
        log("online")
    });

5、manifest文件 离线应用当中包含一个manifest的文件,文件当中列出了浏览器为离线应用缓存的所有资源列表。manifest的文件MIME类型是text/cache-manifest 文件示例:

CACHE MANIFEST
# 要换成的文件
about.html
html5.css
index.html
a.gif
b.jpg

#不缓存的文件  # 每次都会从服务器拉去新的文件,因为浏览器会缓存,为了保证每次的内容都是服务器上最新的,应当在这里
NETWORK
signup.html

#获取不到资源文件时候的备选资源路径,一般出现404的时候会使用
FALLBACK
signup.html     offline.html  #当访问signup.html出现404的时候,会转到offline.html
/app/ajax       offline.html  #当访问/app/ajax路径下的内容出现404的时候,会转到offline.html

6、applicationCache API applicationCache API是一个操作应用缓存的接口。

window.applicationCache.status,代表了缓存的状态,一共有6种,如下表:

数值型属性 缓存状态 说明
0 UNCACHED(未缓存) 没有指定缓存清单
1 IDLE(空闲) 带有缓存清单应用的状态,表示所有文件都已被缓存
2 CHECKING(检查中)
3 DOWNLOADING(下载中) 1
4 UPDATEREADY(更新就绪) 1
5 OBSOLETE(过期) 1

相关事件

事件 关联的缓存状态
Onchecking CHECKING
Ondownloading DOWNLOADING
Onupdateready UPDATEREADY
Onobsolete OBSOLETE
Oncached IDLE

没有更新或者更新发生错误, onerror onnoupdate onprogress

window.applicationCache.update——会请求浏览器更新缓存,包括检查新版本的manifest文件,并下载必要的新资源,如果没有缓存,或者缓存已过期,则会抛出错误。

7、运行中的应用缓存 如果应用使用了离线缓存,浏览器在应用缓存中已经成功缓存了manifest列表当中的内容之后,它会优先的从缓存当中获取资源,之后,浏览器只干一件事,就是检查manifest文件是否已经被改变过,流程如下:

  • 首次访问,浏览器加载页面及其资源
  • 解析页面的时候,浏览器会解读HTML元素的manifest属性,然后加载CACHE 和FALLBACK部分列出的文件,到xxx.com应用的缓存,浏览器大于5M的存储空间
  • 再次访问应用网站的时候,浏览器会从缓存当中加载资源文件,同时,如果应用在线,则会检查manifest文件是否更新过
  • 离线状态,浏览器会从资源缓存中加载,而访问NETWORK资源时,会加载FALLBACK的内容。
  • 当应用处于在线状态,修改了缓存文件列表当中的某一个文件,但是,没有更新manifest(没发生变化),那么浏览器依然会从浏览器缓存当中加载这个文件。这时候,需要稍微再manifest文件当中修改字符(一般是版本号),浏览器才会加载最新的manifest文件
  • 当修改了缓存的文件,也修改了manifest文件,但刷新浏览器的时候,依然看到的是原来缓存的内容,因为页面从应用缓存中加载资源时发生在服务器执行服务器检查之前,浏览器是不会自动更新加载页面的。可以把浏览器关掉,再次打开,也可以通过updateready事件绑定监听,提示用户进行刷新。

使用HTML5离线应用(applicationCache )构建应用

    服务端:
    1、服务器配置
    2、创建manifest文件

    客户端:
    3、构建HTML,并在HTML标签上添加manifest属性,属性值是服务器上配置的缓存资源列表的文件名
    4、配置相关事件,创建离线Javascript

Js文件内容:

    window.applicationCache.onchecking = function(e){
        log("")
    }

    window.applicationCache.onnoupdate = function(e){};
    window.applicationCache.onupdateready = function(e){};
    window.applicationCache.onobsolete = function(e){};
    window.applicationCache.ondownloading = function(e){};
    window.applicationCache.oncached = function(e){};
    window.applicationCache.onerror = function(e){}

    window.addEventListener('online',function(e){

    });

    window.addEventListener("offline",function(e){

    });

    /*
        将applicationCache状态代码转化成状态
    */
    showCacheStatus = function(n){
        statusMessages =  ['Uncached','Idle','Checking','Donwloading','Update Ready','Obsolete'];

        return statusMessages[n];
    }

    let install = function(){
        log("checking for updates");
        try{
            window.applicationCache.update();
        }cache(e){
            applicationCache.onerror();
        }

    }
    ...

HTML5离线WEB应用创建即使没有互联网连接也可以使用的应用程序。为确保应用中所需文件能够成功缓存,需要将这些文件指定在manifest文件中,随后在应用程序的主页面中进行引用。然后,添加监听器监听在线和离线状态的变化,进而基于因特网连接是否让网站执行不同的操作。

[转载]原文链接:https://segmentfault.com/a/1190000019211266

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65174.html

文章标题:构建离线WEB应用

相关文章
关于Ajax应用开发需要注意的事项
接触Ajax,那时候的Ajax支持还不是很好,都要涉及底层,没有现成的框架给你调用。现在把常见的问题列举如下。 [b]1、编码问题[/b] 注意AJAX要取的文件是UTF-8编码的。GB2312编码传回BROWSE后中文会乱码。如果用VBS...
2015-11-11
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
HTML5移动应用开发的12大特性
1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少...
2015-11-11
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
2015年预测:Web体验与以往的五大不同
在过去的一年,我们见证了Uber的崛起、Apple加入了可穿戴设备的竞赛中、以及诸如Facebook收购Whatapp这类大的并购事件。那么在2015年我们将看到哪些巨大的改变?这里列出了五个对未来的预测 更清洁、简单的内容 2013年...
2015-11-11
CIO最为关注的六大企业移动应用平台
2014年10月18日,由北大信息化与管理研究中心、北大CIO班教务办、大华南IT高管共赢圈联合主办,CIO时代网承办的2014“北大CIO中国行-深圳站”活动顺利举行。会上,来自各大企业的CIO、移动应用专家等140余人共聚一堂,共同探讨...
2015-11-12
响应式Web设计的9项基本原则
响应式web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难。没有固定的页面尺寸、没有毫米或英寸,没有任何物理限制,让人感到无从下手。随着建立网站可用的各种小工具越来越多,像素设计局限于桌面和移动端也已经...
2015-11-12
2015年Web:追求原有“框架”外的新功能
Web目前正在经历一场巨大的变化,ServiceWorkers、传感器访问、推送通知等方式将打破Web原有的框架。而在2015年我们可以利用这几种方式快速的改变自己的网站。在不断增多的Web功能中寻求最合适自己的功能。 Web最初的设想是一...
2015-11-12
4种方法帮你的网站创建更丰富的Web体验
现在的网站已经从一个简单的文本页面开始进化了很多,我们可以制作出丰富的视觉效果来增加用户在桌面浏览器和移动浏览器的体验。 今天这篇文字就给大家分享4个实用的方法,来帮助你创建更好的Web体验。 对于那些还在用IE6的朋友,我只想说一句:go...
2016-01-13
Web缓存基础:术语、HTTP报头和缓存策略
简介 对于您的站点的访问者来说,智能化的内容缓存是提高用户体验最有效的方式之一。缓存,或者对之前的请求的临时存储,是HTTP协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求,这受控于对该内容所声明的缓存策略...
2016-01-13
回到顶部