Html5离线缓存详细讲解
<h2>实例 - 完整的 Manifest 文件</h2><p> <img src="https://img2018.cnblogs.com/blog/1483908/201905/1483908-20190523101639445-1700454537.png"></p>
<p> <img src="https://img2018.cnblogs.com/blog/1483908/201905/1483908-20190523102631676-1645496358.png"></p>
<p> </p>
<p> </p>
<p><span style="font-size: 14pt"><strong>1,什么是应用程序缓存（Application Cache）</strong></span></p>
<p> HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。</p>
<p> 离线缓存：</p>
<p> 离线缓存可以将站点的一些文件缓存到本地，它是浏览器自己的一种机制，</p>
<p> 将需要的文件缓存下来，以便后期即使没有连接网络，被缓存的页面也可以展示。</p>
<p> 即使有网络，优先本地存储的资源</p>
<p><span style="font-size: 14pt"><strong>2,应用程序缓存为应用带来三个优势：</strong></span></p>
<p><span style="font-size: 14pt"><strong> </strong></span>* 离线浏览 - 用户可在应用离线时使用它们</p>
<p> * 速度 - 已缓存资源加载得更快</p>
<p> * 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。</p>
<p> * 【</p>
<p> 在没有网络的时候可以访问到缓存的对应的站点页面，包括html，js，css，img等等文件<br> 在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（from cache）头。这跟HTTP的缓存使用策略是不同的<br> 资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高用户访问速度，而且大大节约用户的使用流量。 <br> 】</p>
<p><span style="font-size: 14pt"><strong>3，如何实现离线缓存：</strong></span></p>
<p><span style="font-size: 14pt"><strong> <span style="font-size: 15px"> </span></strong><span style="font-size: 15px">a）Cache Manifest 基础</span></span></p>
<p><span style="font-size: 14pt"><span style="font-size: 15px"> 如需启用应用程序缓存，请在文档的<html> 标签中包含 manifest 属性：</span></span></p>
<p><span style="font-size: 14pt"><span style="font-size: 15px"> <img src="https://img2018.cnblogs.com/blog/1483908/201905/1483908-20190523102920022-191988518.png"></span></span></p>
<p> * 在需要缓存的html根节点上面添加属性 manifest ，属性值是一个 . appcache 文件；</p>
<p> Appcache 是一个控制缓存文件</p>
<p> * 在同目录下创建demo.appcache 文件，幷添加配置项</p>
<p> <span style="font-size: 15px"> b）Manifest 文件</span></p>
<p><span style="font-size: 15px"> </span>manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。</p>
<p> manifest 文件可分为三个部分：</p>
<p> CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存</p>
<p> NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存</p>
<p> FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）</p>
<p> </p>
<p> <span style="color: rgba(255, 0, 0, 1)"> * CACHE MANIFEST</span></p>
<p> 第一行，CACHE MANIFEST，是必需的：</p>
<p> CACHE MANIFEST</p>
<p> /theme.css</p>
<p> /logo.gif</p>
<p> /main.js</p>
<p> 上面manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，一个 JavaScript 文件</p>
<p> </p>
<p> <span style="color: rgba(255, 0, 0, 1)">* NETWORK</span></p>
<p> NETWORK:</p>
<p> login.php</p>
<p> 可以使用星号来指示所有其他资源/文件都需要因特网连接：</p>
<p> NETWORK:</p>
<p> *</p>
<p> </p>
<p> <span style="color: rgba(255, 0, 0, 1)">* FALLBACK</span></p>
<p> FALLBACK:</p>
<p> /html/ /offline.html</p>
<p> 第一个 URI 是资源，第二个是替补。</p>
<p><span style="font-size: 14pt"><strong>4，更新缓存：</strong></span></p>
<p><span style="font-size: 14pt"><strong> </strong></span>一旦应用被缓存，它就会保持缓存直到发生下列情况：</p>
<p> 用户清空浏览器缓存</p>
<p> manifest 文件被修改</p>
<p> 由程序来更新应用缓存</p>
<p> <span style="font-size: 14pt"><strong>5，在服务器端将.appcache文件的mime类型配置成 text/cache-manifest</strong></span></p>
<p> <strong>下面以phpstudy为例</strong></p>
<p><strong> <img src="https://img2018.cnblogs.com/blog/1483908/201905/1483908-20190523211329609-1157728765.png"></strong></p>
<p> 打开，mime.types ,在后面添加----</p>
<p> <img src="https://img2018.cnblogs.com/blog/1483908/201905/1483908-20190523211514625-243617569.png"></p>
<p><span style="font-size: 16px"><strong>6，在网页中打开</strong></span></p>
<p> <img src="https://img2018.cnblogs.com/blog/1483908/201905/1483908-20190523211900752-1983512393.png"></p>
<p> </p>
<p> </p>
<p> </p>
<p><strong><span style="font-size: 18px; color: rgba(0, 0, 0, 1); background-color: rgba(255, 0, 0, 1)">以 "#" 开头的是注释行</span></strong></p><br><br>
来源：https://www.cnblogs.com/xiaotaiyangye/p/10910353.html
頁:
[1]