• Chapter10 离线应用

    普通类
    • 支持
    • 批判
    • 提问
    • 解释
    • 补充
    • 删除
    • 通过描述文件缓存资源

    离线应用的一箱基本技术就是缓存，步骤是①创建描述文件——②修改网页，引用描述文件——③配置Web服务器

    创建描述文件

    这是HTML5离线应用的关键。

    第一行一定是“CACHE MANIFEST”（！必须全部大写）

    然后再列出需要缓存的文件，如下（PS：要注意文件的路径以及避免拼写错误）：

    CACHE MANIFEST

    #pages  (#开头的是注释)

    PersonalTest.html

    PersonalTest_Score.html

    #styles & scripts

    PersonalTest.css

    PersonalTest.js

    #pictures & fonts

    Images/emotional_bear.jpg

    Fonts/museo_slab_500-webfont.eot

    Fonts/museo_slab_500-webfont.woff

    Fonts/museo_slab_500-webfont.ttf

    Fonts/museo_slab_500-webfont.svg

    将描述文件存储到网站根目录下，名字可以随便起，但推荐两个拓展名：.manifest / .appcache

    使用描述文件

    <!DOCTYPE html>

    <html lang="en" manifest="personality.appcache">

    ……

    必须给离线应用包含的每个页面都添加相同的属性

    把描述文件放到Web服务器

    使用Web服务器测试离线应用是否真的起作用了。此外，还需要接触对描述文件本身的缓存，否则的话更改描述文件将不会起到作用

    更新描述文件

    离线工作应用的第二个难题是更新离线应用的内容

    必须满足的条件是浏览器没有缓存描述文件，且该文件的保存日期是新的，内容要更新，最好的办法就是添加注释，比如更新版本号

    CACHE MANIFEST

    # version 1.00.001

    #pages  (#开头的是注释)

    PersonalTest.html

    ……

    • 实用缓存技术

    访问未缓存的文件

    毕竟缓存的空间有限，因此我们需要对缓存的文件有选择。这种情况下，必须在描述文件中配置特定的区块告诉浏览器联网获取那些没有缓存的资源，否则这些资源将自动被忽略

    使用方法：

    CACHE MANIFEST

    #pages

    PersonalTest.html

    ……

    NETWORK:

    Images/logo.png  

    或者直接使用通配符，告诉浏览器所有为缓存的资源都必须联网访问

    NETWORK:

    *  

    添加后备内容

    描述文件还支持”FALLBACK:“区块，可以根据计算机是否在线而互换。前者是在线使用的，后面是离线后备文件名。浏览器会缓存第二个文件，但是只有在不能上网的时候才会使用它

    FALLBACK:

    PersonalScore.html PersonalScore_offline.html 

    后备区块内容页支持通配符匹配('/'表示任意网页，在firefox中也可以使用‘*’替代)

    FALLBACK:

    / offline.html

    检测连接

    利用后备区块，让浏览器根据应用是否在线加载相同JavaScript函数的不同版本

    FALLBACK:

    online.js offline.js

    在原始网页中引用<script src="online.js"></script>

    这个 online.js 文件包含函数

    function isSiteOnline(){

    return true;
    }

    如果没有联网，浏览器会使用offline.js

    这个 offline.js 文件包含函数

    function isSiteOnline(){

    return false;
    }

    通过JavaScript制定更新

    使用一些JavaScript接口可以与离线应用进行功能交互，接口由applicationCache对象定义

    事件
    接口
    触发条件
    后续事件
    onChecking
    Event

    用户代理检查更新或者在第一次尝试下载manifest文件的时候，本事件往往是事件队列中第一个被触发的

    noupdate, downloading, obsolete, error
    onNoUpdate
    Event
    检测出manifest文件没有更新
    无
    OnDownloading
    Event
    用户代理发现更新并且正在取资源，或者第一次下载manifest文件列表中列举的资源
    progress, error, cached, updateready
    OnProgress
    ProgressEvent

    用户代理正在下载资源manifest文件中的需要缓存的资源

    progress, error, cached, updateready
    OnCached
    Event
    manifest中列举的资源已经下载完成，并且已经缓存
    无
    OnUpdateReady
    Event

    manifest中列举的文件已经重新下载并更新成功，接下来js可以使用swapCache()方法更新到应用程序中

    无
    OnObsolete
    Event

    manifest的请求出现404或者410错误，应用程序缓存被取消

    无
    onError
    Event

    manifest的请求出现404或者410错误，更新缓存的请求失败

    无

    manifest文件没有改变，但是页面引用的manifest 文件没有被正确地下载

    在取manifest列举的资源的过程中发生致命的错误

    在更新过程中manifest文件发生变化

    用户代理会尝试立即再次获取文件

    window.onload = function(){

        applicationCache.onupdateready = function(){

            if(confirm("应用有新版本了，是否需要更新？")){

                window.location.reload();

            }

        }

    }

    • 标签：
    • 更新
    • 文件
    • 使用
    • 浏览器
    • 离线应用
    • manifest
    • HTML5
    • 缓存
    • 离线
    • 描述
    • 资源
    • 应用
  • 加入的知识群：
    学习元评论 (0条)

    评论为空
    聪明如你，不妨在这 发表你的看法与心得 ~



    登录之后可以发表学习元评论。
      
暂无内容~~
顶部