深入讲解离线缓存及其用法

最新推荐文章于 2025-05-27 11:18:12 发布

AwesomeDevin

最新推荐文章于 2025-05-27 11:18:12 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：经验 web 前端开发进阶文章标签：离线缓存 web web体验优化

本文链接：https://blog.youkuaiyun.com/Daivon_Up/article/details/80149344

前端开发进阶同时被 3 个专栏收录

33 篇文章

订阅专栏

经验

21 篇文章

订阅专栏

web

7 篇文章

订阅专栏

why:

应用程序缓存为应用带来的优势：

离线浏览：用户可在应用离线时使用它们
速度：已缓存资源加载速度块
减少服务器负载：浏览器只从服务器下载更新过的资源

usages:

在html标签添加manifest属性

<!DOCTYPE HTML> 
    <html manifest="../js/demo.manifest">
            ...
    </html>

编写manifest文件

manifest文件可分为三部分：
(1) CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
(2)NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
(3)FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

CACHE MANIFEST
    #version 1.1   /*版本号*/
    CACHE:
        html/index.html /*需要缓存的文件*/
    NETWORK:
        js/jquery.js /*不需要缓存的文件*/
    FALLBACK: 
        html/index.html /*当页面无法访问时的回退页面*/

注意事项：

1.浏览器对缓存数据的容量限制可能不太一样
2.如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器会继续加载之前的缓存
3.引用的manifest文件必须和html文件同源，同域
4.浏览器的自动缓存会导致更改了的html文件必须更新版本才能更新页面
5.更新版本后，必须刷新一次才会启动新版本
6.当manifest文件发生改变时，资源请求本身也会触发更新

离线缓存与传统浏览器缓存区别：

区别：
1、离线缓存是针对整个应用，浏览器缓存是单个文件
2、离线缓存断网了还是可以打开页面，浏览器缓存不行
3、离线缓存可以主动通知浏览器更新资源

本地存储和离线存储有什么不同

本地存储与离线缓存都是为了方便网页的加载，提高用户体验等。
本地存储一般存储的都是数据，而离线缓存一般存储的是网页等。

更新离线缓存两种方式

1.修改版本号
2.js
var appCache = window.applicationCache
appCache.update() //开始更新
if(appCache.status == window.applicationCache.UPDATEREADY){
    appCache.swapCache() //得到最新版本缓存列表，并且成功下载资源，更新缓存到最新
}