H5 离线缓存及 Nginx 服务器配置

欢迎移步 什么是Application Cache HTML5 的应用缓存（application cache），或者简称为appcache，是专门为开发离线Web 应用而设计的。Appcache 就是从浏览器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。 HTML5引入了应用程序缓存技术，意味着web应用可进行缓存，并在没有网络的情况下使用，通过创建cache manifest文件，可以轻松的创建离线应用。 Application Cache 的优势 Application Cache带来的三个优势是： 离线浏览 – 用户可在离线时浏览您的完整网站 提升页面载入速度 – 缓存资源为本地资源，因此加载速度较快 降低服务器压力 – 浏览器只会从发生了更改的服务器下载资源 而且主要浏览器皆以支持Application Cache，就算不支持也不会对程序造成什么影响。 离线Web应用的运行机制 离线Web应用的运行机制是每个需要离线使用的网页都指定一个后缀名为.manifest的文本文件。这个文本文件罗列了该网页离线使用时所需的所有资源文件（HTML、图片JavaScript 等等）。支持离线Web 应用的浏览器会自动读取.manifest文件，下载文件中所罗列的资源文件，并将其缓存在本地以备网络断开时使用。 manifest 文件内容示例 在 HTML 的开始标签中，我们指定一个.manifest文件： 该文件的文件名随意，但后缀名建议使用.manifest。 一个简单的manifest文件例子如下： CACHE MANIFEST #v1 CACHE: basic_page_layout_ch4.html css/main.css img/atwiNavBg.png img/kingHong.jpg NETWORK: * FALLBACK: //offline.html 理解manifest 文件 manifest文件必须以CACHE MANIFEST开头。第二行就是一句注释，注明了manifest文件的版本号。这句注释的用途稍后详细介绍。 CACHE:部分 罗列了所有离线使用所需的文件。这些文件的路径都是相对offline.manifest而言的，所以文件路径可能需要根据情况稍作修改。使用绝对路径也是可以的。 NETWORK:部分 罗列了所有不需要被缓存的文件。你可以将其看成是一个“在线白名单”。 此处罗列的文件在网络畅通的情况下都会直接跳过缓存。如果你想网站内容在网络畅通的情况下及时更新（而不是仅在离线缓存中查找），可以在此处使用*。星号被称为在线白名单通配符。 FALLBACK:部分 使用/字符定义了一个URL 模板。它的作用是访问每个页面时都会问“缓存中有这个页面吗？”，如果有则显示缓存页面，如果没有则显示指定的offline.html文件。 页面被自动加载到离线缓存 根据实际情况，还有一种更简单的办法来设置offline.manifest文件。任何指定了离线manifest 文件的页面（就是在标签中追加了manifest="/offline.manifest"的页面）在被用户访问时都会被自动加入到本地缓存。浏览器会缓存用户访问过的每一个网页以确保这些网页在离线状态下仍可访问。 这种方法只会下载和缓存用户访问的HTML 页面，不会缓存页面内引入的图片、JavaScript 或者其他资源文件。如果这些资源文件是必需的，那么请按照上节中的方法在CACHE:部分专门声明这类文件。 版本注释的用途 对网站内容或任何资源文件做了修改之后，你必须得对offline.manifest文件也做点修改并将其重新上传服务器。这样就能让服务器为浏览器提供新版本文件，而浏览器则会下载该新版本文件并再次触发离线存储进程。可以像下面这样在offline.manifest文件的头部加了一句注释，每次修改网站都会对应地修改该版本号： # Cache Manifest v1 如果开发者对网站内容或资源做了修改，那么也得通知浏览器更新缓存文件，否则浏览器仍然会使用之前已有的缓存文件。而通知浏览器更新缓存文件的方式通常是更新manifest文件，浏览器如果发现manifest文件发生了变化，就会更新缓存文件。大多数情况下manifest中的缓存文件清单不会发生变化，那我们就通过修改注释的方式来改变manifest文件，注释中的版本号，既能触发文件变化，又能指明当前版本，一举两得。其实注释中还可以加入更新时间等更详细信息，有助于维护。 nginx 服务器配置 离线存储是通过manifest文件来管理的，需要服务器端的支持，不同的服务器开启支持的方式也是不同的。对于Nginx需要修改配置目录下的mime.types文件，添加manifest文件映射： text/cache-manifest manifest; 重启nginx后，服务器支持manifest。 查看离线缓存的效果 以下面配置为例： CACHE MANIFEST # 对大文件进行离线缓存 CACHE: lib/ionic/js/ionic.bundle.min.js js/html2canvasA.min.js NETWORK: * FALLBACK: //index.html 通过chrom 访问站点，即可看到离线缓存后的效果： 查看缓存文件

本文章由javascript技术分享原创和收集