摘要：使用离线应用构建应用服务端服务器配置创建文件客户端构建，并在标签上添加属性，属性值是服务器上配置的缓存资源列表的文件名配置相关事件，创建离线文件内容将状态代码转化成状态离线应用创建即使没有互联网连接也可以使用的应用程序。
HTML5新增了localstroage和application cache做离线缓存，两种缓存各有应用的场景，今天我们说说application cache这种方案。
web当中使用缓存的原因之一是为了支持离线应用，其它优点：
减少网络资源的请求（减少服务器压力）
相比网络加载资源，加载本地资源速度更快，体验更好
在断网的情况下，能提供良好的用户体验（断网加载）
通常缓存的资源包括：HTML文档，JS文件，CSS文件，图片，多媒体
application cache 缓存的资源文件，通常保存在浏览器持久性存储资源的地方，也就是在本地硬盘上面
使用HTML5离线WEB应用API：
1、检查浏览器是否支持
if(window.applicationCache){
// 则支持离线缓存
}
2、在html文档的HTML元素上添加manifest特性，如下：
3、在application.appcache文件中，定义缓存文件清单，比如：
CACHE MANIFEST
4、支持离线行为
HTML5引入了一些新的事件，可以让应用程序检测网络是否正常连接。这样就可以控制应用程序在离线和在线的时候有不同的行为，HTML5当中可以通过检测window.navigator对象来做判断，navigator.onLine是一个标明浏览器是否在线的布尔属性，我们可以通过以下代码作相应的判断：
function loadDemo(){
if(navigator.onLine){
log("online")
}else{
log("offline")
}
}
// 添加事件
window.addEventListener("online",function(e){
log("online")
});
5、manifest文件
离线应用当中包含一个manifest的文件，文件当中列出了浏览器为离线应用缓存的所有资源列表。manifest的文件MIME类型是text/cache-manifest
文件示例：
CACHE MANIFEST # 要换成的文件 about.html html5.css index.html a.gif b.jpg #不缓存的文件 # 每次都会从服务器拉去新的文件，因为浏览器会缓存，为了保证每次的内容都是服务器上最新的，应当在这里 NETWORK signup.html #获取不到资源文件时候的备选资源路径，一般出现404的时候会使用 FALLBACK signup.html offline.html #当访问signup.html出现404的时候，会转到offline.html /app/ajax offline.html #当访问/app/ajax路径下的内容出现404的时候，会转到offline.html
6、applicationCache API
applicationCache API是一个操作应用缓存的接口。
window.applicationCache.status，代表了缓存的状态，一共有6种，如下表：
| 数值型属性 | 缓存状态 | 说明 |
|---|---|---|
| 0 | UNCACHED（未缓存） | 没有指定缓存清单 |
| 1 | IDLE（空闲） | 带有缓存清单应用的状态，表示所有文件都已被缓存 |
| 2 | CHECKING（检查中） | |
| 3 | DOWNLOADING（下载中） | 1 |
| 4 | UPDATEREADY（更新就绪） | 1 |
| 5 | OBSOLETE（过期） | 1 |
相关事件
| 事件 | 关联的缓存状态 |
|---|---|
| Onchecking | CHECKING |
| Ondownloading | DOWNLOADING |
| Onupdateready | UPDATEREADY |
| Onobsolete | OBSOLETE |
| Oncached | IDLE |
没有更新或者更新发生错误，
onerror
onnoupdate
onprogress
window.applicationCache.update——会请求浏览器更新缓存，包括检查新版本的manifest文件，并下载必要的新资源，如果没有缓存，或者缓存已过期，则会抛出错误。
7、运行中的应用缓存
如果应用使用了离线缓存，浏览器在应用缓存中已经成功缓存了manifest列表当中的内容之后，它会优先的从缓存当中获取资源，之后，浏览器只干一件事，就是检查manifest文件是否已经被改变过，流程如下：
首次访问，浏览器加载页面及其资源
解析页面的时候，浏览器会解读HTML元素的manifest属性，然后加载CACHE 和FALLBACK部分列出的文件，到xxx.com应用的缓存，浏览器大于5M的存储空间
再次访问应用网站的时候，浏览器会从缓存当中加载资源文件，同时，如果应用在线，则会检查manifest文件是否更新过
离线状态，浏览器会从资源缓存中加载，而访问NETWORK资源时，会加载FALLBACK的内容。
当应用处于在线状态，修改了缓存文件列表当中的某一个文件，但是，没有更新manifest(没发生变化)，那么浏览器依然会从浏览器缓存当中加载这个文件。这时候，需要稍微再manifest文件当中修改字符（一般是版本号），浏览器才会加载最新的manifest文件
当修改了缓存的文件，也修改了manifest文件，但刷新浏览器的时候，依然看到的是原来缓存的内容，因为页面从应用缓存中加载资源时发生在服务器执行服务器检查之前，浏览器是不会自动更新加载页面的。可以把浏览器关掉，再次打开，也可以通过updateready事件绑定监听，提示用户进行刷新。
使用HTML5离线应用（applicationCache ）构建应用 服务端：
1、服务器配置
2、创建manifest文件
客户端：
3、构建HTML，并在HTML标签上添加manifest属性，属性值是服务器上配置的缓存资源列表的文件名
4、配置相关事件，创建离线Javascript
Js文件内容：
window.applicationCache.onchecking = function(e){
log("")
}
window.applicationCache.onnoupdate = function(e){};
window.applicationCache.onupdateready = function(e){};
window.applicationCache.onobsolete = function(e){};
window.applicationCache.ondownloading = function(e){};
window.applicationCache.oncached = function(e){};
window.applicationCache.onerror = function(e){}
window.addEventListener("online",function(e){
});
window.addEventListener("offline",function(e){
});
/*
将applicationCache状态代码转化成状态
*/
showCacheStatus = function(n){
statusMessages = ["Uncached","Idle","Checking","Donwloading","Update Ready","Obsolete"];
return statusMessages[n];
}
let install = function(){
log("checking for updates");
try{
window.applicationCache.update();
}cache(e){
applicationCache.onerror();
}
}
...
HTML5离线WEB应用创建即使没有互联网连接也可以使用的应用程序。为确保应用中所需文件能够成功缓存，需要将这些文件指定在manifest文件中，随后在应用程序的主页面中进行引用。然后，添加监听器监听在线和离线状态的变化，进而基于因特网连接是否让网站执行不同的操作。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/109581.html
摘要：使用离线应用构建应用服务端服务器配置创建文件客户端构建，并在标签上添加属性，属性值是服务器上配置的缓存资源列表的文件名配置相关事件，创建离线文件内容将状态代码转化成状态离线应用创建即使没有互联网连接也可以使用的应用程序。 HTML5新增了localstroage和application cache做离线缓存，两种缓存各有应用的场景，今天我们说说application cache这种方案...
摘要：我喜欢移动，而且也是那些坚持使用技术构建移动应用程序的人之一。我们准备做这样的一个渐进式应用是典型的旨在提高用户离线体验的应用。当我们开始构建应用时，你就能理解上面的场景了。的作用范围是针对相对路径的。最佳的做法是在应用的入口。 我喜欢移动app，而且也是那些坚持使用Web技术构建移动应用程序的人之一。 经过技术的不断迭代（可能还有一些其它的东西），移动体验设计愈来愈平易近人，给予用户...
摘要：技术实现离线应用的核心是离线缓存技术，历史上曾先后出现两种离线缓存技术。新的线程取得控制权后，将会触发其事件。接入用构建接入的离线应用时，要解决的问题在于如何生成之前提到的文件。 内容主要引用自吴浩麟著《webpack深入浅出》 离线应用 离线应用的优点： 在没有网络的情况下能打开网页。 由于部分缓存的资源直接从本地加载，所以对用户来说可以加快网页的加载速度，减少服务器压力。 技术实...
摘要：原文地址译文出自我的个人博客概述在本文中，您将学习如何使用和创建离线优先数据驱动的渐进式应用程序。在离线的情况下也可以使用后台同步功能将应用程序与服务器同步。保存数据到中现在我们保存数据到刚创建的数据库中的对象中。 原文地址：Build an offline-first, data-driven PWA译文出自：我的个人博客 概述 在本文中，您将学习如何使用 Workbox 和 In...
阅读 2553·2021-11-17 17:01
阅读 1940·2021-09-28 09:35
阅读 3461·2021-09-01 11:04
阅读 587·2020-06-22 14:41
阅读 2767·2019-08-30 15:55
阅读 2371·2019-08-30 15:43
阅读 2210·2019-08-26 13:54
阅读 2340·2019-08-26 13:48
