HTML5+CSS3之离线web应用

不需要网络连接仍可访问网站内容似不似很酷?H5为其提供了可能!

让我们假设有一个在线笔记应用,当用户的手机网络断开时,他可能正在编辑一则笔记。使用

HTML5的离线 Web应用,他就可以继续离线编辑笔记,然后等到网络再次连接时将本地
数据发送到服务器。

 

一、离线web应用概述

离线Web应用的运行机制是每个需要离线使用的网页都指定一个后缀名为 .manifest 的
文本文件。这个文本文件罗列了该网页离线使用时所需的所有资源文件(HTML、图片
JavaScript等等)。支持离线 Web应用的浏览器会自动读取 .manifest 文件,下载文件中
所罗列的资源文件,并将其缓存在本地以备网络断开时使用。

 

二、让网页可离线使用

首先,我们需要为每一个需要离线访问的网页指定一个.manifest文件,后缀名建议使用 .manifest。

 

<html lang="en" manifest="/offline.manifest"

 

如果使用的是 Apache服务器,你可能还需要修改一下 .htaccess 文件,追加一行代码:
AddType text/cache-manifest .manifest
这样就保证了 .manifest 文件拥有正确的 MIME类型,即 text/cache-manifest 。

在 .htaccess 文件中还可以加入以下代码:

<Files offline.manifest>
ExpiresActive On
ExpiresDefault "access"
</Files>

可以阻止浏览器缓存缓存文件

现在,我们给.manifest文件添加一些内容:

CACHE MANIFEST
#v1
CACHE:
basic_page_layout_ch4.html
css/main.css
img/atwiNavBg.png
img/kingHong.jpg
img/midnightRun.jpg
img/moulinRouge.jpg
img/oscar.png
img/wyattEarp.jpg
img/buntingSlice3Invert.png
img/buntingSlice3.png
NETWORK:
*
FALLBACK:
//offline.html

 

三、理解 manifest 文件

manifest 文件必须以 CACHE MANIFEST 开头。

第二行就是一句注释,注明了 manifest 文件的版本号。

CACHE: 部分罗列了所有离线使用所需的文件。这些文件的路径都是相对.manifest而言的,当然也可以使用绝对路径

 

NETWORK: 部分罗列了所有不需要被缓存的文件。你可以将其看成是一个“在线白名单”。
此处罗列的文件在网络畅通的情况下都会直接跳过缓存。如果你想网站内容在网络畅通
的情况下及时更新(而不是仅在离线缓存中查找),可以在此处使用*。星号被称为在线
白名单通配符。

FALLBACK: 部分使用/字符定义了一个 URL模板。它的作用是访问每个页面时都会问“缓存
中有这个页面吗?”,如果有则显示缓存页面,如果没有则显示指定的 offline.html 文件。

 

四、页面被自动加载到离线缓存

根据实际情况,还有一种更简单的办法来设置 offline.manifest 文件。任何指定了离
线 manifest 文件的页面(就是在标签中追加了 manifest="/offline.manifest" 的页
面)在被用户访问时都会被自动加入到本地缓存。浏览器会缓存用户访问过的每一个网
页以确保这些网页在离线状态下仍可访问。简化的 manifest文件如下:

1 CACHE MANIFEST
2 # Cache Manifest v1
3 FALLBACK:
4 //offline.html
5 NETWORK:
6 *

选择使用这个方法时有一点需要注意,这种方法只会下载和缓存用户访问的 HTML页面,
不会缓存页面内引入的图片、JavaScript或者其他资源文件。如果这些资源文件是必需的,
那么请按照上节中的方法在 CACHE: 部分专门声明这类文件。

 

五:版本注释的用途

对网站内容或任何资源文件做了修改之后,你必须得对 offline.manifest 文件也做点
修改并将其重新上传服务器。这样就能让服务器为浏览器提供新版本文件,而浏览器则
会下载该新版本文件并再次触发离线存储进程。在.manifest 文件的头部加了一句注释,每次
修改网站都会对应地修改该版本号:

# Cache Manifest v1

 

由于离线存储需要做大量的测试,所以这一节只能讲解一下基本过程,具体还需要动手去试试验证下效果。

 

转载于:https://www.cnblogs.com/lewis-messi/p/8327912.html

已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页