H5的离线缓存技术

本文深入探讨HTML5离线存储机制,介绍.appcache文件如何实现资源缓存,提升访问速度与用户体验,尤其是在网络不稳定的情况下。文章详细解释了Manifest文件的结构与功能,包括CACHE、NETWORK、FALLBACK部分的作用,以及如何利用Manifest进行资源缓存,实现离线浏览。此外,还提供了更新缓存的方法,以及如何使用JavaScript操作离线缓存。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

离线存储可以将站点的一些文件存储在本地,是浏览器自己的一种机制,将需要的文件缓存下来

  • 在没有网络的时候可以访问到缓存的对应的站点页面,包括html,js,css,img等等文件
  • 在有网络的时候,浏览器也会优先使用已离线存储的文件,返回一个200(from cache)头。这跟HTTP的缓存使用策略是不同的。
  • 资源的缓存可以带来更好的用户体验,当用户使用自己的流量上网时,本地缓存不仅可以提高用户访问速度,而且大大节约用户的使用流量。

 

HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源;把需要离线存储在本地的文件列在一个manifest配置文件中

 

什么是Manifest:

Manifest(清单)是一个简单的文本文件,它的扩展名是任意的,定义需要缓存的文件、资源,当第一次打开时,浏览器会自动缓存相应的资源。

 

Manifest 的特点:

  • 离线浏览:即当网络断开时,可以继续访问你的页面。
  • 访问速度快:将文件缓存到本地,不需每次都从网络上请求。
  • 稳定性:做了Manifest缓存,遇到突发网络故障或者服务器故障,继续访问本地缓存。

manifest属性,可以用来指定当前页面的manifest文件。

创建一个和html同名的manifest文件,比如页面为index.html,那么可以建一个cache.manifest的文件,然后给index.html的html标签添加如下属性即可:

<html lang="en" manifest="cache.manifest"> <html manifest="http://www.example.com/index.manifest">

1、manifest 的引入可以使用绝对路径/相对路径,如果是绝对路径,manifest文件必须和当前站点挂在同一个域名下。

2、manifest文件可以保存为任意的扩展名,但mime-type 必须是 text/cache-manifest

              mime-type(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型

<html lang="en" manifest="index.manifest">  或  <html lang="en" manifest="index.cache"> 在服务器上部署时需要在服务器上添加相应的mime-type

3、manifest 标签应该包含到你需要缓存资源的页面,当第一次打开该页面时,浏览器会解析该页面中的mainfest,并缓存里面列举的资源,同时该页面也会自动会被浏览器缓存,即使该页面没有在Manifest中列出。

如果page-url 页面中包含了 Manifest 属性则浏览器会将该页面中列举出来的资源分别保存,所以Manifest最好使用在SPA(单页应用)项目中。

在Chrome中,可以使用

chrome://appcache-internals/ 查看你缓存在本地的资源文件。

 

Manifest文件结构:

manifest文件,基本格式为三段: CACHE, NETWORK(可选),与 FALLBACK(可选)

CACHE MANIFEST为固定格式,必须写在前面。----------以#号开头的是注释,可以是版本号,时间戳等等。

        一般写版本号,用来在缓存的文件更新时,更改manifest:浏览器已经缓存下来的缓存,只有当manifest文件发生了改变才会更新本地缓存,即使你的代码发生了更新,本地浏览器也是不知道的,所以每次发布代码时你可以更改下#后面的信息比如版本号或者时间,告诉浏览器相应的更新本地缓存。

1、第一行是CACHE MANIFEST 这是必须需要的。  一般写版本号

2、CACHE(必须) 标识出哪些文件需要缓存,相对路径/绝对路径。当第一次加载时,会被浏览器缓存在本地。

3、Network  这一部分是要绕过缓存直接读取的文件,可以使用通配符 *,大多数网站使用 * 。 当使用* 时 表示出 CACHE指定文件外,其它所有页面都需要联网访问。

4、FALLBACK  (可选) 当资源无法访问时,浏览器使用后备资源去替代。第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。

下面的例子中,如果无法建立因特网连接,则用 “404.html” 替代 /html5/ 目录中的所有文件。

FALLBACK:
/html5/ /404.html

下面的例子中,当任何页面无法访问时跳转到 “404.html”页。

FALLBACK:
*.html /404.html


注意: 1 必须在第一行 2、3、4 直接的顺序是随意的,并且在同一个manifest文件中可以出现多次,多次和一次效果一样。
    添加 manifest  属性的页面会自动被浏览器缓存,不需要再CACHE节点中再次添加。


如何更新缓存

如下三种方式,可以更新缓存:

  • 更新manifest文件
  • 通过javascript操作
  • 清除浏览器缓存

给manifest添加或删除文件,都可更新缓存,如果更改了js而没有新增或删除,可通过版本号,来更新manifest文件。

html5中引入了js操作离线缓存的方法,可以通过js代码手动更新本地缓存。

window.applicationCache.update();

如果用户清除了浏览器缓存(手动或用其他一些工具)会重新下载文件。

 

可使用代码手动更新manifest缓存,一旦webapp源码更新,会自动更新本地manifest缓存,使用户始终访问到最新的源码。

  webapp
使用HTML5编写的移动Web应用,一个webapp几乎可以不加修改的运行在PC/Android/iOS等。
优势:一套代码到处运行
劣势:某些底层功能缺失,运行速度不如原生的App
 window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
     window.applicationCache .swapCache();    //交换缓存   成功拿到新的缓存,在新的缓存中交换         if (confirm('A new version of this site is available. Load it?')) 
        window.location.reload();   //重新加载页面---刷新页面
      }
    } else {
      // Manifest didn't changed. Nothing new to server.
    }
  }, false);  异步加载
<think>好的,我现在需要帮助用户实现H5断网时的离线缓存功能,用户提到了HTML5离线缓存、断网页面、Service Worker或AppCache。首先,我得回顾一下相关的技术点,然后根据用户提供的引用内容来构建解决方案。 根据引用内容,Service Worker和AppCache都是实现离线缓存的方式,但AppCache已经被认为不够好,逐渐被Service Worker取代。引用[1]提到Service Worker是更好的选择,而AppCache可能会在后续HTML版本中被移除。引用[2]也说明Service Worker是现代浏览器的后台脚本,能够控制网络请求,而AppCache作为旧浏览器的备用方案。引用[3]和[4]则补充了AppCache的机制和实现方式。 用户的需求是在断网时页面能离线访问,所以需要选择合适的技术。首先应该推荐Service Worker,因为它是更现代、更强大的解决方案。不过,考虑到兼容性,可能需要结合AppCache作为备用,但根据引用[1]和[2],AppCache可能已经不是最优选,反而可能带来问题,所以或许应该专注于Service Worker的实现。 接下来,我需要分步骤说明如何实现Service Worker的离线缓存。首先,注册Service Worker,然后编写脚本拦截请求并缓存资源。引用[2]还提到了offline-plugin这个Webpack插件,可以简化配置,但用户可能希望手动实现,所以需要提供两种方法:原生实现和使用插件。 另外,引用[3]提到的.appcache文件是AppCache的配置方式,如果用户需要支持旧浏览器,可以补充这部分,但需要指出其缺点。同时,引用[4]提到其他库如PouchDB、Redux-Offline,但这些可能超出当前需求范围,暂时不需要涉及。 需要注意的问题包括缓存更新机制、版本控制,以及如何处理动态内容。Service Worker的生命周期管理也很重要,比如安装、激活、fetch事件的处理。在示例代码中,需要确保正确缓存核心资源,并在离线时返回缓存的版本。 最后,生成相关问题需要考虑用户可能的后续疑问,比如如何更新缓存、处理动态数据、兼容性问题和性能优化等。</think># HTML5离线缓存实现方案 ## 一、Service Worker实现方案(推荐) ### 1. 注册Service Worker ```javascript // 主线程注册代码 if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(registration => console.log('注册成功')) .catch(err => console.log('注册失败:', err)); } ``` ### 2. 编写Service Worker脚本 ```javascript // sw.js const CACHE_NAME = 'v1'; const ASSETS = [ '/', '/index.html', '/styles.css', '/app.js', '/offline.html' ]; self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(ASSETS)) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => response || fetch(event.request)) .catch(() => caches.match('/offline.html')) ); }); ``` ### 3. 更新机制 ```javascript self.addEventListener('activate', event => { const cacheWhitelist = [CACHE_NAME]; event.waitUntil( caches.keys().then(cacheNames => Promise.all( cacheNames.map(cacheName => { if (!cacheWhitelist.includes(cacheName)) { return caches.delete(cacheName); } }) )) ); }); ``` ## 二、AppCache实现方案(备用) ```html <!DOCTYPE html> <html manifest="example.appcache"> <head>...</head> <body> <!-- CACHE MANIFEST必须首行 --> CACHE MANIFEST # v1.0.0 CACHE: /index.html /styles.css /app.js NETWORK: * FALLBACK: / /offline.html </body> </html> ``` ## 三、混合方案建议 1. 优先使用Service Worker作为主要方案 2. 针对IE等不支持Service Worker的浏览器: ```javascript // 检测到不支持SW时加载AppCache if (!('serviceWorker' in navigator)) { const iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = '/appcache-loader.html'; document.body.appendChild(iframe); setTimeout(() => document.body.removeChild(iframe), 1000); } ``` ## 四、核心注意事项 1. 缓存策略: - 静态资源使用Cache First策略 - 动态请求使用Network First策略 - 离线页面需缓存到根路径 2. 版本控制: ```javascript const CACHE_NAME = `main-${version}`; ``` 3. 更新流程: ```javascript // 主线程检测更新 registration.update().then(() => { if (registration.installing) { registration.installing.postMessage('skipWaiting'); } }); ``` [^1][^2]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值