zoukankan      html  css  js  c++  java
  • html5离线应用详摘

    html5离线应用详摘

    在html文件里配置如下:

    <html manifest=”name.manifest>

    在name.manifest文件里配置如下:

    CACHE MANIFEST

    #2014-07-27 v1.0

    index.html

    index.css

    index.js

    images/self.jpg

     

    NETWORK

    *
     

    ①CACHE MANIFEST全部大写。
     

    ②“#”开头的行是注释。
     

    ③缓存文件路径对应明确。
     

    ④ 文件后缀名可随便起,推荐使用.manifest或者.appcache。不过最重要的取决于web服务器的配置,让它能认识这两个扩展名。如果不是自己 的服务器,得问主机托管公司配置了什么扩展名来支持描述文件。不同的服务器配置MIME的类型方法不一样,以下我用模拟服务器软件wampserver, 在Apache->httpd.conf下写入的字段如下:AddType text/cache-manifest .manifest(放在哪 里都可以,建议放在相同类型字段处) 。
     

    ⑤ 不同的浏览器对离线应用缓存的限制有很大不同,移动端ipad和iphone中的Safari限制的5MB;桌面端,Firefox默认最大50MB,而 用户可调高这个限制(选项->高级->网络);chrome目前只有5MB,如果缓存达到空间限制,已经下载要缓存的文件会被完全删除,离线 相当于白做。
     

    ⑥必须给离线应用包含的每个页面都添加同样的属性,比如说:缓存中包含index.html、self.html,那么这两个文件都要添加<html manifest=”name.manifest>,当然,离线应用可以有任意多个,每个应用分别对应自己的描述文件即可。
     

    ⑦ 更新缓存内容,只要更改name.manifest文件下的任何地方(包括注释),name.manifest文件就变成新的文件,浏览器发现新的描述文 件会静默地下载里面配置的所有文件,然后再用新下载的文件代替原来缓存的内容,下次用户访问同一个页面(或者刷新该页面),就会显示新内容,如果想让用户 马上切换到新下载的内容,需要用到javascript,请转到⑩。
     

    ⑧NETWORK最好不要省略,“ * ”表示所有未缓存的内容,当然,也可以一个一个罗列不想要被缓存的内容。列表中不能使用“ * ”,因为html5规范制定者担心有人会无意中缓存庞大的站点。
     

    ⑨FALLBACK 表示根据计算机是否在线而互换,“FALLBACK”区块可以在描述文件中的任何地方出现,第一个文件是在联网时访问的页面(浏览器会照常向web服务器 请求该文件);第二个文件是在不能上网时访问的页面(浏览器会在上次联网时自动把该文件下载并缓存起来);当然“ FALLBACK: ”也可省略。 “ FALLBACK: ”下可使用通配符“ / ”。比如:

    FALLBACK:

    / offline.html

    目前在Firefox中通配符还可以用“ * ”,还可以通过指定子目录来匹配更小范围内的文件:

    FALLBACK:

    http://www.wei.com/folder/* offline.html

    也可以指定只匹配某些类型的文件:

    FALLBACK:

    *.jpg offline.jpg
     

    ⑩使用相对有限的javascript接口可以与离线应用功能交互,这个javascript接口由applicationCache对象定义。在此例举onupdateready事件(表示已经取得了更新内容) 。通过javascript指定更新:

    <script>

    window.onload=function(){

    applicationCache.onupdateready=function(){

    if(confirm(一个新版本的离线缓存已经更新完成,是否刷新以查看最新效果)){

    window.location.reload();

    }

    };

    };

    </script>

    注:可以模拟confirm显示一个更友好美观的用户界面。

     

     

    幕尾话:本文采摘自采摘者的左思右想+html5秘籍(原名:[html5:The Missing Manual])——美Matthew MacDonald 著,李松峰 朱巍 译,人民邮电出版-2012年8月

     

    ------------------------------- 非常华丽的分割线 ----------------------------

    ...没有了 (≧▽≦)/...

  • 相关阅读:
    《架构之美》读后感(一)
    《架构即未来》读后感(三)
    《架构即未来》读后感(二)
    《架构即未来》读后感(一)
    《架构漫谈》读后感(三)
    《架构漫谈》读后感(二)
    SOA
    软件杯-视频全量目标分析和建模需求分析说明
    阅读笔记一线架构师实践指南03
    阅读笔记一线架构师实践指南02
  • 原文地址:https://www.cnblogs.com/barrior/p/4078324.html
Copyright © 2011-2022 走看看