CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js
#Resourcesthatrequiretheusertobeonline.
NETWORK:
login.php
/myapi
http://api.twitter.com
#static.htmlwillbeservedifmain.pyisinaccessible
#offline.jpgwillbeservedinplaceofallimagesinimages/large/
#offline.htmlwillbeservedinplaceofallother.htmlfiles
FALLBACK:
/main.py/static.html
images/large/images/offline.jpg
*.html/offline.html
以“#”开头的行是注释行，但也可用于其他用途。例如更新缓存
应用缓存只在其清单文件发生更改时才会更新。例如，如果您修改了图片资源或更改了JavaScript函数，这些更改不会重新缓存。您必须修改清单文件本身才能让浏览器刷新缓存文件。使用生成的版本号、文件哈希值或时间戳创建注释行，可确保用户获得您的软件的最新版。
您还可以在出现新版本后，以编程方式更新缓存，如更新缓存部分中所述。
如果页面引入了缓存清单文件，那么清单文件必须包含当前页面需要的所有文件（css，js，image...），否则不会被加载，所以除去固定需要缓存的文件，建议在文件中的NETWORK一项加上星号*,表示其余所有文件
清单可包括以下三个不同部分：CACHE、NETWORK和FALLBACK。
CACHE：
这是条目的默认部分。系统会在首次下载此标头下列出的文件（或紧跟在CACHEMANIFEST后的文件）后显式缓存这些文件。
NETWORK：
此部分下列出的文件是需要连接到服务器的白名单资源。无论用户是否处于离线状态，对这些资源的所有请求都会绕过缓存。可使用通配符。
FALLBACK：
此部分是可选的，用于指定无法访问资源时的后备网页。其中第一个URI代表资源，第二个代表后备网页。两个URI必须相关，并且必须与清单文件同源。可使用通配符。
请注意：这些部分可按任意顺序排列，且每个部分均可在同一清单中重复出现。
以下清单定义了用户尝试离线访问网站的根时显示的“综合性”网页(offline.html)，也表明了其他所有资源（例如远程网站上的资源）均需要互联网连接。
CACHEMANIFEST
#2018-08-14:v3
#Explicitlycachedentries
index.html
css/style.css
#offline.htmlwillbedisplayediftheuserisoffline
FALLBACK:
//offline.html
#Allotherresources(e.g.sites)requiretheusertobeonline.
NETWORK:
*
#Additionalresourcestocache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png
请注意：系统会自动缓存引用清单文件的HTML文件。因此您无需将其添加到清单中，但我们建议您这样做。
请注意：HTTP缓存标头以及对通过SSL提供的网页设置的缓存限制将被替换为缓存清单。因此，通过https提供的网页可实现离线运行。
更新缓存
应用在离线后将保持缓存状态，除非发生以下某种情况：
用户清除了浏览器对您网站的数据存储。清单文件经过修改。请注意：更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改，应用缓存通过编程方式进行更新。
以上就是扣丁学堂HTML5开发manifest离线缓存示例详解的全部内容，希望对大家的学习有所帮助，也希望大家多多支持扣丁学堂。
作者：扣丁学堂
链接：https://www.jianshu.com/p/15784eeb2613
