jQuery Mobile學習筆記（八）——安裝及離線

本章學習創建一個不通過應用商店發佈的離線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

清單文件的名稱通常叫offline.appcache,並且只有以text/cache-manifest的MIME類型提供給客戶端纔有效。
如果支持PHP，那麼只需要把文件的擴展名改爲.php，然後使用下面這個模板，不需要其他特殊配置就可以生效了：

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

下一步需要在HTML文件中定義清單文件的URL，通過設置HTML元素的manifest屬性來完成的：

<html manifest="offline.appcache">
      <-- 應用正文 --> 
</html>

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

countries.json每次都不會下載到本地，而是每次都從服務器端獲取。如果沒有聯網，這個文件就訪問不到了。
NETWORK段落支持通配符*或者文件夾的資源描述文件。
如果所有資源都在網絡上獲取，可以使用以下方式：

NETWORK: 
*

5.更新資源
因文件需要更新而修改清單的方式包括增加空格、修改資源的名字（加上版本信息），甚至是增加一些註釋，包含一個隨機數或者最後修改時間。
比如：

CACHE MANIFEST 
# webapp updated 2012-01-01

只要有一個字節改變，舊的清單就會失效，瀏覽器就會重新下載所有的文件（不支持單個文件下載），然後刷新2次後生效。

6.JavaScript對象
有一個全局變量applicationCache可以幫助我們瞭解應用緩存的狀態。
先檢查applicationCache對象是否可用：

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

查詢當前狀態：

if (window.applicationCache!=undefined) {
      // The API is available 
      if (applicationCache.status==applicationCache.UPDATEREADY) { 
         // There is an update waiting for reload 
      } 
}

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(); 
         }
      }); 
}

安裝應用圖標：
應用下載完畢後，可以引導用戶將應用圖標添加到主屏幕或者應用菜單上。
圖標快捷方式名一般是HTML頁面的title元素的值，所以有必要保持title的簡潔（1、2個詞）來適應屏幕的大小。
圖標的大小問題見下面的實例

全屏
只在IOS平臺上有效，且用戶必須從主屏幕上啓動應用程序。HTML頁面上定義以下meta標籤：

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

全屏檢測
ios平臺，通過navigator.standalone屬性強制應用在全屏下進行安裝和使用。以下代碼放到mobileinit中即可。

if (navigator.standalone!=undefined) { 
    // It's iOS 
    if (!navigator.standalone) { 
       // It's in Safari
       $.mobile.changePage($("#install"), {transition: "none"}); 
    } 
}

修飾Web應用
更改（屏幕頂部）手機的狀態欄的顏色：

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

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

啓動圖片：

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

更合適的用法是自適應：

<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)">

一個完整的例子：
一個提供離線訪問，並且定義了快捷方式圖標和全屏配置的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>

存儲離線數據
使用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");

jQuery Mobile學習筆記（八）——安裝及離線

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

使用perf工具生成火焰圖

HttpSecurity 是如何組裝過濾器鏈的

數說海南——近6年海南各市縣人口簡單看

長序列中Transformers的高級注意力機制總結

WebStorm 創建 Vue 項目

大齡程序員思考

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

jQuery Mobile學習筆記（一）——移動平臺

jQuery Mobile學習筆記（三）——UI組件

調用http接口操作

jQuery Mobile學習筆記（二）——框架起步

Django發HTML郵件

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結