标签：储存 缓存 applicationCache Service 离线 HTML5 使用 浏览器
离线缓存的目的是当浏览器处于离线状态或网络连接较慢时，利用应用程序缓存机制让web程序能在离线状态下正常访问。使用离线缓存技术一般是为了让用户在：
- 离线状态也能正常访问
- 提高访问速度
- 减轻服务器响应压力
实现离线缓存，目前主要使用 Service Workers方案，而文后提到的manifest属性方案已弃用，建议不要使用，这里只是作为了解。
历史方案：利用manifest属性实现App Cache（已弃用）
一般具有
window.applicationCache对象的浏览器才支持该特性。该方案已弃用，了解即可。
启用应用程序缓存的做法是在应用程序页面的html标签上增加manifest属性来引入缓存配置文件：
<html manifest="example.appcache">
...
</html>
复制代码然后编辑.appcache文件用于描述如何启动缓存，下面是完整缓存清单：
# 缓存清单：后续列出的文件会在第一次下载完毕后缓存起来
CACHE MANIFEST
index.html
cache.html
style.css
image1.png
# 缓存白名单：列出不需要缓存的文件
NETWORK:
network.html
# 定了一个后备页面，当资源无法访问时，浏览器会使用该页面。
# 该段落的每条记录都列出两个 URI—第一个表示资源，第二个表示后备页面。
FALLBACK:
/ fallback.html
/userpage user_404.html
复制代码CACHE MANIFEST，NETWORK 和 FALLBACK 段落可以以任意顺序出现在缓存清单文件中，并且每个段落可以在同一清单文件中出现多次。
缓存清单写好了，我们还需要按时更新，否则一直使用缓存会导致界面内容老旧，更新缓存使用JavaScript脚本来更新：
- indow.applicationCache.status记录缓存状态
- window.applicationCache.update()手动更新
function onUpdateReady() {
alert('found new version!');
}
window.applicationCache.addEventListener('updateready', onUpdateReady);
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
onUpdateReady();
} else {
window.applicationCache.update()
}
复制代码Service Workers
之前的尝试 — AppCache — 看起来是个不错的方法，因为它可以很容易地指定需要离线缓存的资源。但是，它假定你使用时会遵循诸多规则，如果你不严格遵循这些规则，它会把你的APP搞得一团糟。关于APPCache的更多详情，请看Jake Archibald的文章： Application Cache is a Douchebag.
Service worker 最终要去解决这些问题。虽然 Service Worker 的语法比 AppCache 更加复杂，但是你可以使用 JavaScript 更加精细地控制 AppCache 的静默行为。
使用的前提
在支持service workers的浏览器中，很多特性可能默认是关闭的，如果该浏览器支持该特性但相关代码不生效，你需要先开启浏览器的相关设置。比如chrome：访问 chrome://flags并开启 experimental-web-platform-features。
此外，出于页面安全考虑，services workers要求必须在HTTPS协议下才能使用。
使用细节
service worker有点类似于web worker，代码也是在独立于主线程的worker中运行。
如果'serviceWorker' in navigator说明浏览器支持Service Worker，使用该特性一般需要：
- 注册worker：navigator.serviceWorker.register
- 安装和激活：定义缓存文件。使用
install事件进行安装监听，该事件会在注册之后触发。 - 劫持请求：当页面使用到缓存的资源时，会触发
fetch事件，这时候你就可以告诉service worker该如何使用该资源，你可以在请求发起前定义响应内容，这也是Service Worker的精细之处，你可以返回缓存到的资源，也可以重新发起网络请求而不使用缓存，或者网络不可用时返回一些准备好的意外页。 - 更新缓存：简单的使用版本编号就可以控制缓存版本。
- 删除旧缓存：还有个
activate事件，当之前版本还在运行的时候，一般被用来做些会破坏它的事情，比如摆脱旧版的缓存。
具体使用细节请参考使用 Service Workers。这是一个简单的使用案例： sw-test。
参考：
作者：Dongoog
链接：https://juejin.cn/post/6968487148831899679
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
标签：储存,缓存,applicationCache,Service,离线,HTML5,使用,浏览器 来源： https://blog.csdn.net/z591102/article/details/117513002
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。