美文网首页Web前端之路让前端飞技术干货
HTML5简明教程(五)离线应用

HTML5简明教程(五)离线应用

作者: 娜姐聊前端 | 来源:发表于2017-05-11 16:50 被阅读92次

    HTML5支持离线功能,当网络不可用时,网页还能够正常访问,部分功能还将继续使用。实现离线应用,最重要的是缓存资源,因此,离线应用核心需要定义一份描述文件,指定需要缓存的具体资源。

    创建离线应用的三个步骤如下:

    1. 创建描述文件

    描述文件是一个以.manifest.appcache为后缀的文本文件,其列出了所有需要缓存的内容。

    描述文件第一行必须是CACHE MANIFEST#代表注释。

    CACHE MANIFEST
    
    index.html
    
    # styles & scripts
    script.js
    style.css
    
    # images
    images/bg.png
    
    # FALLBACK指定后备资源
    # 在线状态使用page.html,离线状态使用page_offline.html
    FALLBACK:
    page.html page_offline.html
    
    # NETWORK指定不缓存的资源
    # * 的含义为:除了上面列出的资源,其他资源都需要从Web服务器下载
    NETWORK:
    *
    

    2. 引用描述文件

    修改口入主页面,引用描述文件,这样,浏览器在请求页面时会下载描述文件。

    <!DOCTYPE html>
    <html lang="en" manifest="test.manifest">
    ...
    </html>
    

    3. 配置Web服务器

    Web服务器必须以正确的MIME类型提供描述文件,即,response的content-type属性值必须是text/cache-manifest

    如果Web服务器以其他格式返回描述文件,浏览器会忽略该文件。

    maifest.png

    下一节:HTML5简明教程(六)Web Socket和Web Worker

    微信公众号:

    相关文章

      网友评论

        本文标题:HTML5简明教程(五)离线应用

        本文链接:https://www.haomeiwen.com/subject/cgjstxtx.html