1 – 添加 HTML5
doctype
第一件要做的事情是创建一个符合规范的 HTML5
文档。HTML5
doctype 相比于 xhtml 版本的 doctype 而言，要简单明了得多：
<!DOCTYPE html>
<html>
...
创建一个名为 index.html 的文档，或者猛击这里下载这份示例代码压缩包
。关于 HTML5
的缓存请详细参考 The cache manifest syntax
章节。
2 – 添加 .htaccess 支持
我们需要创建用于缓存页面的 manifest 清单文件。但在此之前，先要在 .htaccess 文件中添加以下代码：
AddType text/cache-manifest .manifest
该指令可以确保每个 manifest 文件为 text/cache-manifest MIME 类型。如果 MIME类型不对，那么整个清单将没有任何效果，页面将无法离线使用。
3 – 创建 manifest 文件
现在我们就来创建这个 manifest 清单文件，事情将会更加有趣。新建一个文本文档并另存名为 offline.manifest，然后粘贴以下代码，稍后我会解释。
CACHE MANIFEST
#This is a comment
CACHE
index.html
style.css
image.jpg
image-med.jpg
image-small.jpg
notre-dame.jpg
现在这份 manifest 文件已经能够完美工作了。原理很简单：在 CACHE 声明之后，罗列出所有需要缓存的文件。这对于缓存简单页面已经来说足够。但是 HTML5
缓存还有更多可能。
比如，考虑以下 manifest 文件：
CACHE MANIFEST
#This is a comment
CACHE
index.html
style.css
NETWORK:
search.php
login.php
FALLBACK:
/api offline.html
其中 CACHE 声明用于缓存 index.html 和 style.css 文件。同时 NETWORK 声明用于指定无需缓存的文件，比如登录页面。
最后一个是 FALLBACK 声明，这个声明允许你在资源不可用的情况下，将用户重定向到特定文件，这个示例代码中是 offline.html。
4 – 关联 manifest 文件到 html 文档
现在，manifest 文件和 html 文档都已就绪。唯一需要做的是将 manifest 文件关联到 html 文档。
使用 html 元素的 manifest 属性：
<html manifest="/offline.manifest">
5 – 测试一下
完成后，使用 Firefox
3.5+ 本地访问 index.html 文件，会看到以下浏览器
提示信息：
其他高级浏览器不会提醒是否允许缓存，而是默认自动缓存。
浏览器兼容情况参考：
-
IE
: 不支持
-
Firefox
: 3.5+
- Safari: 4.0+
- Chrome: 5.0+
- Opera: 10.6+
- iPhone: 2.1+
- Android: 2.0+
分享到：
相关推荐
总结，Apache2与HTML5的结合为离线应用的创建提供了强大支持。通过理解Apache2的配置和HTML5的离线特性，开发者可以构建出即使在网络不稳定或无网络连接的情况下也能正常运行的应用，显著提升用户体验。在实际操作中...
在这个demo中，我们可以学习如何设置和使用HTML5离线缓存，以及如何结合Web Workers来创建一个离线可用且响应快速的Web应用。通过阅读博客文章（http://blog.csdn.net/mockingbirds/article/details/48412967），...
这项技术的核心在于利用HTML5的`Application Cache`（应用缓存）或者称为`Cache Manifest`（缓存清单），通过创建一个清单文件来指定需要离线存储的资源。 **一、离线存储的必要性** 随着移动设备的普及，用户可能...
本文将深入探讨如何使用 HTML5 的离线存储功能来构建支持移动 Web 应用程序离线工作的应用。 离线存储主要是通过两种技术实现的：`AppCache`（Application Cache）和`IndexedDB`。AppCache 提供了一个静态资源的...
通过以上步骤，你就可以利用Google Maps API 3和"demo.html"创建一个基本的离线地图应用。不过，请注意，Google的使用条款可能限制了离线地图的使用，因此在实际应用前，务必查阅并遵守相关条款。此外，为了提供更好...
五、离线应用的实现步骤 1. 创建Service Worker：编写service-worker.js文件，注册并监听事件，如install、activate和fetch事件。 2. 缓存策略：在Service Worker中定义缓存策略，比如在install事件中添加要缓存的...
这个过程涉及到HTML5的一些关键特性，特别是应用程序缓存（App Cache），这使得Web App可以存储必要的资源以便离线使用。下面我们将深入探讨如何创建这样的离线Web App。 首先，理解Web App的优势至关重要。它们...
总之，"html5+ App开发之 Android 平台离线集成 5+ SDK"涉及到多个步骤和技术，包括DCloud SDK的集成、离线打包、安全检测、后端整合以及调试和发布。理解并熟练掌握这些知识点，将有助于你成功地开发出功能丰富、...
通过以上步骤，我们可以利用QT5的QWebEngineView和离线百度地图数据，构建一个能够在无网络环境下运行的地图应用。这个过程涉及到了网络编程、HTML/JavaScript、C++多线程以及地图数据处理等多个技术领域，对于提升...
HTML5 离线存储是该技术标准的一个关键特性，旨在增强Web应用程序的离线可用性，使得用户在没有互联网连接的情况下也能访问和使用部分Web应用。这一特性主要依赖于三个方面：离线资源缓存、在线状态检测以及本地数据...
在本文中，我们将深入探讨如何使用QT5的QWebEngineView组件来实现离线百度地图API V2.0。QWebEngineView是QT5中的一个关键模块，它提供了一个用于显示网页内容的高性能视图，同时也支持JavaScript执行，使得与Qt应用...
通过以上步骤，你可以成功地使用OpenLayers加载离线地图，并通过mui将其打包成移动应用。这个实例不仅教你如何操作，还展示了如何将Web技术与移动开发相结合，以满足不同场景的需求。对于前端开发者来说，掌握这些...
本文将重点介绍Web SQL在HTML5中的基本用法，并通过示例来展示如何实现离线数据的基本CRUD（创建、读取、更新、删除）操作。 #### 一、Web SQL简介 Web SQL是一种基于客户端的数据库存储技术，允许开发者在用户的...
总结来说，这个"openlayers发布离线地图DEMO"展示了如何使用OpenLayers库加载本地存储的瓦片数据，创建一个无需网络连接就能显示的地图应用。这对于那些需要在无网络环境或带宽有限的场合使用地图的应用场景非常有用...
通过以上步骤，Webview就能正确地支持HTML5的离线应用功能。用户在有网络时访问应用，Webview会自动下载并缓存相关资源。当网络断开时，Webview将从本地缓存中加载这些资源，从而实现离线应用的功能。这种功能对于...
Python，作为一个多用途且强大的编程语言，结合HTML和PyQT5库，可以创建出功能丰富的桌面应用。PyQT5是Python的一个图形用户界面工具包，它提供了QWebEngineView组件，允许开发者将网页技术融入到桌面应用中，同时...
在IT行业中，ArcGIS是一款...通过以上步骤，我们可以构建一个基于JavaScript、ArcGIS API for JavaScript和HTML的离线地图应用，让内网用户能够在没有互联网连接的情况下，依然能够浏览和操作地图，满足GIS应用的需求。
HTML5的一大亮点是其离线存储功能，也称为离线应用缓存。这种技术允许应用程序在用户首次访问时下载必要的资源，如HTML、CSS、JavaScript文件等，然后在离线状态下仍然可以访问这些内容，提升了用户体验。这对于那些...