<commit_before><!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="../css/reveal/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">

    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? '../css/reveal/print/pdf.css' :
            '../css/reveal/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
    </script>
</head>

<body>
    <img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
    <map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
    <div class="reveal">
        <div class="slides">
            <section>
                <h2>HTML5 的离线存储怎么使用？</h2>
                <h3>小课堂【郑州第62期】</h3>
                <p>分享人：陈璐瑶</p>
            </section>
            <section>
                <p>目录</p>
                <p>1.背景介绍</p>
                <p>2.知识剖析</p>
                <p>3.常见问题</p>
                <p>4.解决方案</p>
                <p>5.编码实战</p>
                <p>6.扩展思考</p>
                <p>7.参考文献</p>
                <p>8.更多讨论</p>
            </section>
            <section>
                <h3>1.背景介绍</h3>
            </section>
            <section>
                <p>
                    HTML 5 之前的网页，都是无连接，必须联网才能访问，这其实也是web的特色，对于PC是时代问题并不大，但到了移动互联网时代，设备终端位置不再固定，依赖无线信号，网络的可靠性变得降低，比如坐在火车上，过了一个隧道（15分钟），便无法访问网站，这对于web的伤害是很大的，比如对于
                    <a href="http://yanhaijing.com/es5/#about">《ecmascript合集》</a>这样的为阅读而生的页面。 html5便引入了cache manifest 文件。那么什么是cache manifest呢，接下来会讲到。
                </p>
            </section>
            <section>
                <h3>2.知识剖析</h3>
            </section>
            <section>
                <p>什么是cache manifest</p>
                <p>manifest是一个后缀名为manifest的文件，在文件中定义那些需要缓存的文件，支持manifest的浏览器，会将按照manifest文件的规则，像文件保存在本地，从而在没有网络连接的情况下，也能访问页面。
                    当我们第一次正确配置app cache后，当我们再次访问该应用时，浏览器会首先检查manifest文件是否有变动，如果有变动就会把相应的变得跟新下来，同时改变浏览器里面的app cache，如果没有变动，就会直接把app
                    cache的资源返回，基本流程是这样的:
                </p>
                <a href="http://caniuse.com/#search=manifest">manifest 浏览器支持</a>
            </section>
            <section>
                <h3>3.常见问题</h3>
            </section>
            <section>
                <h4>如果使用</h4>
                <p>html新增一个manifest属性，可以用来指定当前页面的manifest文件。 创建一个和html同名的manifest文件，比如页面为index.html，那么可以建一个index.manifest的文件，然后给index.html的html标签添加如下属性即可：

                </p>
                <pre>
                    <code>
                        html lang="en" manifest="index.manifest"
                    </code>
                </pre>
                <h4>
                    Manifest文件
                </h4>
                <pre>
                    <code>
                        CACHE MANIFEST
                        # 注释：需要缓存的文件，无论在线与否，均从缓存里读取
                        CACHE:
                        chched.js
                        cached.css

                        # 注释：不缓存的文件，无论缓存中存在与否，均从新获取
                        NETWORK:
                        uncached.js
                        uncached.css

                        # 注释：获取不到资源时的备选路径，如index.html访问失败，则返回404页面
                        FALLBACK:
                        index.html 404.html
                    </code>
                </pre>
                <p>1、 CACHE MANIFEST 写在manifest文件开头 2、#号开头的是注释，一般会在第二行写个版本号，用来在缓存的文件更新时，更改manifest的作用，可以是版本号，时间戳或者md5码等等。 3、CACHE是必须的，作用是标识出哪些文件需要缓存，可以是相对路径也可以是绝对路径
                    4、NETWORK可选，这一部分是要直接读取的文件，可以使用通配符 * 。 5、FALLBACK可选，指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。
                </p>
            </section>
            <section>
                <h3>4.解决方案</h3>
            </section><commit_msg>fix bugs<commit_after><!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="../css/reveal/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">

    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? '../css/reveal/print/pdf.css' :
            '../css/reveal/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
    </script>
</head>

<body>
    <img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
    <map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
    <div class="reveal">
        <div class="slides">
            <section>
                <h2>HTML5 的离线存储怎么使用？</h2>
                <h3>小课堂【郑州第62期】</h3>
                <p>分享人：陈璐瑶</p>
            </section>
            <section>
                <p>目录</p>
                <p>1.背景介绍</p>
                <p>2.知识剖析</p>
                <p>3.常见问题</p>
                <p>4.解决方案</p>
                <p>5.编码实战</p>
                <p>6.扩展思考</p>
                <p>7.参考文献</p>
                <p>8.更多讨论</p>
            </section>
            <section>
                <h3>1.背景介绍</h3>
            </section>
            <section>
                <p>
                    HTML 5 之前的网页，都是无连接，必须联网才能访问，这其实也是web的特色，对于PC是时代问题并不大，但到了移动互联网时代，设备终端位置不再固定，依赖无线信号，网络的可靠性变得降低，比如坐在火车上，过了一个隧道（15分钟），便无法访问网站，这对于web的伤害是很大的，比如对于
                    <a href="http://yanhaijing.com/es5/#about">《ecmascript合集》</a>这样的为阅读而生的页面。 html5便引入了cache manifest 文件。那么什么是cache manifest呢，接下来会讲到。
                </p>
            </section>
            <section>
                <h3>2.知识剖析</h3>
            </section>
            <section>
                <p>什么是cache manifest</p>
                <p>manifest是一个后缀名为manifest的文件，在文件中定义那些需要缓存的文件，支持manifest的浏览器，会将按照manifest文件的规则，像文件保存在本地，从而在没有网络连接的情况下，也能访问页面。
                    当我们第一次正确配置app cache后，当我们再次访问该应用时，浏览器会首先检查manifest文件是否有变动，如果有变动就会把相应的变得跟新下来，同时改变浏览器里面的app cache，如果没有变动，就会直接把app
                    cache的资源返回，基本流程是这样的:
                </p>
                <a href="http://caniuse.com/#search=manifest">manifest 浏览器支持</a>
            </section>
            <section>
                <h3>3.常见问题</h3>
            </section>
            <section>
                <h4>如何使用</h4>
                <p>html新增一个manifest属性，可以用来指定当前页面的manifest文件。 创建一个和html同名的manifest文件，比如页面为index.html，那么可以建一个index.manifest的文件，然后给index.html的html标签添加如下属性即可：

                </p>
                <pre>
                    <code>
                        html lang="en" manifest="index.manifest"
                    </code>
                </pre>
                </section>
                <section>
                
                <h4>
                    Manifest文件
                </h4>
                <pre>
                    <code>
                        CACHE MANIFEST
                        # 注释：需要缓存的文件，无论在线与否，均从缓存里读取
                        CACHE:
                        chched.js
                        cached.css

                        # 注释：不缓存的文件，无论缓存中存在与否，均从新获取
                        NETWORK:
                        uncached.js
                        uncached.css

                        # 注释：获取不到资源时的备选路径，如index.html访问失败，则返回404页面
                        FALLBACK:
                        index.html 404.html
                    </code>
                </pre>
                <p>1、 CACHE MANIFEST 写在manifest文件开头 2、#号开头的是注释，一般会在第二行写个版本号，用来在缓存的文件更新时，更改manifest的作用，可以是版本号，时间戳或者md5码等等。 3、CACHE是必须的，作用是标识出哪些文件需要缓存，可以是相对路径也可以是绝对路径
                    4、NETWORK可选，这一部分是要直接读取的文件，可以使用通配符 * 。 5、FALLBACK可选，指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。
                </p>
            </section>
            <section>
                <h3>4.解决方案</h3>
            </section>
{'fraction_non_alphanumeric': 0.13549911399881867, 'fraction_numerical': 0.014412285883047844, 'mean_word_length': 1.427178899082569, 'pattern_counts': {'":': 0, '<': 203, '<?xml version=': 0, '>': 203, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2980583', 'n_tokens_mistral': 3707, 'n_tokens_neox': 3803, 'n_words': 322}