jQuery Mobile学习笔记（八）——安装及离线

于 2017-09-14 17:57:23 发布
阅读量389 收藏
点赞数
本文介绍如何构建离线Web应用，使用户能在无网络环境下访问。通过HTML5的ApplicationCache API实现应用缓存，确保关键资源可在本地存储并快速访问。文章详细解释了清单文件的创建与使用方法，以及如何更新资源。

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

本章学习创建一个不通过应用商店发布的离线Web应用。使用这种方案，用户可以通过手机浏览器访问Web应用然后将它安装到手机上，下一次可以通过同样的URL或者应用图标来访问这个应用时，应用将不再从服务器端加载，而是直接从本地启动。
1.定义软件包
需要使用HTML5的一个API，叫做Application Cache，应用程序缓存，也成为离线API。
软件包其实是一组文件，是用户访问应用站点时必须由浏览器下载到本地的文件。

2.HTML清单
软件包内的文件是根据一个被称为缓存清单（cache manifest）的文本文件来发布的。清单文件的第一行必须是CACHE MANIFEST，随后是所有需要被下载到设备上的资源的URL列表，URL可以是相对路径或者绝对路径。
样例：

CACHE MANIFEST: 

# jQuery core
http://code.jquery.com/jquery-1.6.1.min.js 

# jQuery Mobile files without custom theme 
http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css
http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js
http://code.jquery.com/mobile/1.0/images/ajax-loader.png
http://code.jquery.com/mobile/1.0/images/icons-18-black.png
http://code.jquery.com/mobile/1.0/images/icons-18-white.png
http://code.jquery.com/mobile/1.0/images/icons-36-black.png
http://code.jquery.com/mobile/1.0/images/icons-36-white.png 

# My app files, relative to the HTML document 
images/logo.png
data/countries.json
   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

清单文件的名称通常叫offline.appcache,并且只有以text/cache-manifest的MIME类型提供给客户端才有效。
如果支持PHP，那么只需要把文件的扩展名改为.php，然后使用下面这个模板，不需要其他特殊配置就可以生效了：

<?php header('Content-Type: text/cache-manifest'); 
?>CACHE MANIFEST:
   
   
  • 1
  • 2

下一步需要在HTML文件中定义清单文件的URL，通过设置HTML元素的manifest属性来完成的：

<html manifest="offline.appcache">
      <-- 应用正文 --> 
</html>
   
   
  • 1
  • 2
  • 3

3.下载应用
支持应用缓存的浏览器找到清单说明后，就会在后台下载清单文件。后台的下载进程和正常的页面加载是完全分开的。下载进程会把清单里面的每一个文件都下载下来，保存在设备上一个只有它能访问的地方。
只要有一个资源没有下载成功，那么整个软件包都将无效，所有的资源都不会被保存在本地。

4.访问在线资源

CACHE MANIFEST: 

# jQuery core
http://code.jquery.com/jquery-1.6.1.min.js 

# jQuery Mobile files without custom theme 
http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css
http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js
http://code.jquery.com/mobile/1.0/images/ajax-loader.png
http://code.jquery.com/mobile/1.0/images/icons-18-black.png
http://code.jquery.com/mobile/1.0/images/icons-18-white.png
http://code.jquery.com/mobile/1.0/images/icons-36-black.png
http://code.jquery.com/mobile/1.0/images/icons-36-white.png 

# My app files, relative to the HTML document 
images/logo.png 

# Resources that should be downloaded from the web 
NETWORK: 
data/countries.json
   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

countries.json每次都不会下载到本地，而是每次都从服务器端获取。如果没有联网，这个文件就访问不到了。
NETWORK段落支持通配符*或者文件夹的资源描述文件。
如果所有资源都在网络上获取，可以使用以下方式：

NETWORK: 
*
   
   
  • 1
  • 2

5.更新资源
因文件需要更新而修改清单的方式包括增加空格、修改资源的名字（加上版本信息），甚至是增加一些注释，包含一个随机数或者最后修改时间。
比如：

CACHE MANIFEST 
# webapp updated 2012-01-01
   
   
  • 1
  • 2

只要有一个字节改变，旧的清单就会失效，浏览器就会重新下载所有的文件（不支持单个文件下载），然后刷新2次后生效。

6.JavaScript对象
有一个全局变量applicationCache可以帮助我们了解应用缓存的状态。
先检查applicationCache对象是否可用：

if (window.applicationCache!=undefined) {
      // The API is available 
}
   
   
  • 1
  • 2
  • 3

查询当前状态：

if (window.applicationCache!=undefined) {
      // The API is available 
      if (applicationCache.status==applicationCache.UPDATEREADY) { 
         // There is an update waiting for reload 
      } 
}
   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

0：UNCACHED：页面第一次加载，或者没有可用的清单文件
1：IDLE：缓存闲置1
2：CHECKING：本地清单文件正在比对服务器端的清单文件进行检查
3：DOWNLOADING：资源下载中或者升级
4：UPDATEREADY：有更新已经被下载，但要到下一次加载时才生效

applicationCache事件：
checking：浏览器正在检查清单文件
downloading：浏览器开始下载清单文件上的资源
progress：其中一个资源下载完毕（可以根据这个下载进度条）
cached：第一次下载已经顺利完成
noupdate：和服务器端清单文件比较后发现没有可用的更新
updateready：存在可用的更新，并且新的资源文件已经下载完毕，重新加载后生效
error：下载资源过程中出现错误
obsolete：检查更新后，本地清单文件失效，web应用从本次存储中删除，下一次不再进行离线访问
可以使用addEventListener方法来进行事件绑定：

if (window.applicationCache!=undefined) {
      // The API is available 
      applicationCache.addEventListener('updateready', function() { 
         // There is an update waiting for reload 
         if (confirm("There is an update ready. Do you want to load it now?")) { 
            history.reload(); 
         }
      }); 
}
   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

安装应用图标：
应用下载完毕后，可以引导用户将应用图标添加到主屏幕或者应用菜单上。
图标快捷方式名一般是HTML页面的title元素的值，所以有必要保持title的简洁（1、2个词）来适应屏幕的大小。
图标的大小问题见下面的实例

全屏
只在IOS平台上有效，且用户必须从主屏幕上启动应用程序。HTML页面上定义以下meta标签：

<meta name="apple-mobile-web-app-capable"
    content="yes">
   
   
  • 1
  • 2

全屏检测
ios平台，通过navigator.standalone属性强制应用在全屏下进行安装和使用。以下代码放到mobileinit中即可。

if (navigator.standalone!=undefined) { 
    // It's iOS 
    if (!navigator.standalone) { 
       // It's in Safari
       $.mobile.changePage($("#install"), {transition: "none"}); 
    } 
}
   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

修饰Web应用
更改（屏幕顶部）手机的状态栏的颜色：

<meta name="apple-mobile-web-app-status-bar-style" content="black">
   
   
  • 1

content：default（灰色）、black、black-translucent（透明的黑色区域，一般不用）

启动图片：

<link rel="apple-touch-startup-image" href="images/launch.png">
   
   
  • 1

更合适的用法是自适应：

<link rel="apple-touch-startup-image" href="images/launch-iphone.png" 
    media="(max-device-width: 480px)">
<link rel="apple-touch-startup-image" href="images/launch-iPad-p.png"
    media="screen and (min-device-width: 481px) and (max-device-width: 1024px) 
    and (orientation:portrait)"> 
<link rel="apple-touch-startup-image" href="images/launch-iPad-l.png"
    media="screen and (min-device-width: 481px) and (max-device-width: 1024px) 
    and (orientation:landscape)">
   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

一个完整的例子：
一个提供离线访问，并且定义了快捷方式图标和全屏配置的JQM Web应用的模板如下：

<!DOCTYPE HTML> 
<-- 包括应用程序离线缓存定义的HTML --> 
<html manifest="offline.appcache"> 
<head> 
 <meta charset="UTF-8">
 <title>short title</title> 
 <meta name="viewport" content="width=device-width,user-scalable=no"> 

 <-- 使用自定义主题的JQM文件 --> 
 <link rel="stylesheet" 
     href="http://code.jquery.com/mobile/1.0/jquery.mobile.structure-1.0.min.css" /> 
 <link rel="stylesheet" href="custom_theme.css"> 
 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js">
     </script>

 <-- 应用图标Icons --> 
 <link rel="icon" href="icons/icon32.png">
 <link rel="shortcut icon" href="icons/icon32.png"> 

 <link rel="apple-touch-icon" href="icons/icon57.png" sizes="57x57"> 
 <link rel="apple-touch-icon" href="icons/icon114.png" sizes="114x114">
 <link rel="apple-touch-icon" href="icons/icon72.png" sizes="72x72">
 <link rel="apple-touch-icon" sizes="80x80" href="icons/icon80.png">
 <link rel="apple-touch-icon-precomposed" sizes="android-only" href="icons/icon57.png">

 <-- 如果需要全屏显示 --> 
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <link rel="apple-touch-startup-image" href="images/launch-iphone.png"
     media="(max-device-width: 480px)"> 
 <link rel="apple-touch-startup-image" href="images/launch-iPad-p.png"
     media="screen and (min-device-width: 481px) and (max-device-width: 1024px)
     and (orientation:portrait)"> 
 <link rel="apple-touch-startup-image" href="images/launch-iPad-l.png" 
     media="screen and (min-device-width: 481px) and (max-device-width: 1024px) 
     and (orientation:landscape)">

</head> 

<body> 

<!-- jQuery Mobile's pages -->

</body>
   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46

存储离线数据
使用Web Storage API。它兼容性好，支持localStorage和sessionStorage这两个基于键值对进行存储的集合。
localStorage是一个在设备上持久存储的字符串集合，sessionStorage也差不多，只是每次浏览器关闭后它会被清空。
localStorage可以存储：JSON、JS、CSS、HTML、转化为base64字符串的图片。
操作localStorage的方法是：getItem和setItem。

//保存数据
localStorage.setItem("name", "value");
//获取数据
var value = localStorage.getItem("name");
   
   
  • 1
  • 2
  • 3
  • 4
(function () {('pre.prettyprint code').each(function () { var lines = (this).text().split(′\n′).length;var numbering = $('
  • ').addClass('pre-numbering').hide(); (this).addClass(′has−numbering′).parent().append( numbering); for (i = 1; i
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值