离线应用开发知识点笔记

最新推荐文章于 2025-05-26 23:08:15 发布

原创

最新推荐文章于 2025-05-26 23:08:15 发布 · 316 阅读

2 ·

CC 4.0 BY-SA版权

本文详细介绍了离线应用的开发，包括使用Cache Manifest进行本地缓存，通过applicationCache对象进行缓存更新及状态检测，以及如何在离线状态下进行数据交互。此外，还讲解了如何检测在线/离线状态，并提供了相应的事件监听方法。

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

/*
* 一：离线应用-本地缓存文件
*
* 缓存机制：Cache Manifest,在线时将对应文件缓存到本地，离线时读取本地缓存文件，使用manifest文件来管理缓存文件信息。
* 使用manifest文件管理缓存需要在服务端进行相应的配置，如IIS/NG
*      服务端设置：在http头中设置文件类型-> 关联扩展名.manifest  内容类型 text/cache-manifest
* manifest文件管理的是需要缓存文件的URL; 命名 xxx.manifest
* html页面引用：<html manifest='xxx.manifest'>
* manifest文件格式：
*   CACHE MANIFEST
*   #version 0.0.0
*
*   CACHE:
*   # 相对路径的资源文件(离线时需要缓存到本地的文件列表)
*   js/xxx.js
*   css/xxx.css
*   images/xxx.png /jpg,gif等
*
*   NETWORK:
*   # 列出在线时需要访问的资源文件
*   index.html
*
*   FALLBACK:
*   # 以成对形式列出不可访问文件的替补资源文件（前者不可访问者访问后者）
*   /prd/index.html   /stg/index.html
*
*
*
*   离线应用的开发流程
*   1.创建manifest类型文件，列出需要缓存到本地的资源文件
*   2.页面引用文件 <html manifest='xxx.manifest'>
*   3.对服务器设置，使其能读取manifest类型的文件
*
*   浏览器与服务器之间的数据交互流程
*   1.浏览器请求访问页面
*   2.服务端响应返回页面
*   3.浏览器解析页面，获取页面包含的所有资源文件，解析manifest文件，请求获取其文件URL列表的资源
*   4.浏览器获取manifest文件并更新本地存储，触发onUpdateReady事件
*   5.浏览器再访问该页面，如果manifest没发生改变，则直接读取本地的缓存资源
*
* */


/*
* 二：本地缓存的更新及状态检测---本地缓存对象applicationCach