首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >HTML5简明教程(五)离线应用

HTML5简明教程(五)离线应用

作者头像
娜姐
发布2021-01-14 10:40:06
发布2021-01-14 10:40:06
8640
举报
文章被收录于专栏:娜姐聊前端娜姐聊前端

HTML5支持离线功能,当网络不可用时,网页还能够正常访问,部分功能还将继续使用。实现离线应用,最重要的是缓存资源,因此,离线应用核心需要定义一份描述文件,指定需要缓存的具体资源。

创建离线应用的三个步骤如下:

1. 创建描述文件

描述文件是一个以.manifest.appcache为后缀的文本文件,其列出了所有需要缓存的内容。

描述文件第一行必须是CACHE MANIFEST#代表注释。

代码语言:javascript
复制
CACHE MANIFEST

index.html

# styles & scripts
script.js
style.css

# images
images/bg.png

# FALLBACK指定后备资源
# 在线状态使用page.html,离线状态使用page_offline.html
FALLBACK:
page.html page_offline.html

# NETWORK指定不缓存的资源
# * 的含义为:除了上面列出的资源,其他资源都需要从Web服务器下载
NETWORK:
*
2. 引用描述文件

修改口入主页面,引用描述文件,这样,浏览器在请求页面时会下载描述文件。

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en" manifest="test.manifest">
...
</html>
3. 配置Web服务器

Web服务器必须以正确的MIME类型提供描述文件,即,response的content-type属性值必须是text/cache-manifest

如果Web服务器以其他格式返回描述文件,浏览器会忽略该文件。

maifest.png

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 创建描述文件
  • 2. 引用描述文件
  • 3. 配置Web服务器
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档