1. 程式人生 > >打造支援apk下載和html5快取的 IIS(配合一個超簡單的android APP使用)詳解

打造支援apk下載和html5快取的 IIS(配合一個超簡單的android APP使用)詳解

為什麼要做這個看起來不靠譜的東西呢?

因為剛學android開發,還不能很好的熟練控制android介面的編輯和操作,所以我的一個急著要的運用就改為html5版本了,反正這個運用也是需要從伺服器獲取大量資料來展示在手機上面的,也就是說:必須聯網,才能正常工作,於是想了一下,反正都要聯網獲取資料,為什麼不直接用我相對熟悉一點的 html來做這個運用呢?省的花費不夠用的時間去學習android介面的控制,於是就簡單了:用蹩腳的手段做了一個android程式的啟動歡迎介面,內頁就是一個全屏的webview,啟動後就連上IIS伺服器獲取網頁展示,就可以了。

可是話說回來,這樣不如直接寫一個手機版網頁站點,用手機內建瀏覽器開啟看就行了嘛,為什麼還得大費周章弄APP呢?因為......這個APP還要有通知欄提醒功能,執行一個後臺服務獲取伺服器上提供的預警等資訊,所以光網頁版是不夠的,於是就生出了這個怪異的APP。

做好的app放在伺服器上,本來圖省事,apk檔案壓縮成zip包,給客戶下載,結果......無語的是,好多客戶手機上沒有解壓軟體,而且還不會自己下載安裝解壓軟體,沒辦法,只好把iis加上支援apk下載的功能了,之前試過IIS預設安裝後,IIS是不支援apk檔案下載的,還好資料好查,添加個apk下載支援也超簡單,就順手弄了。

另外,考慮到網頁版運用消耗流量肯定很大,為了節省流量,就順手引入了html5的快取功能,但是這個功能中的一個關鍵檔案:快取列表 檔案,貌似用直接用txt做副檔名的不行。非得用那個預設的副檔名(不知道其他副檔名行不行,但是貌似都得設定那個副檔名的MIME型別才可以),這個副檔名的支援也是IIS預設沒有的,也要手工新增,還好都不算複雜。

但是網上都沒有找到圖片例項,於是手閒之餘,順便做個記錄,就抓了個簡單的圖,奉上,這才有了這篇文章。

如下圖:


apk下載支援:

副檔名: .apk

MIME型別:application/vnd.android.package-archive

html5快取支援

副檔名: .manifest

MIME型別:text/cache-manifest


apk下載支援沒什麼好說的了,直接把apk檔案扔到伺服器就行,下面簡單說下html5快取的一些注意要點:

1.html5可被快取的例子:

c.html

<!DOCTYPE html>
<html manifest="./mymanifest.manifest">
<body>
<script type="text/javascript" src="./js/demo_time.js">
</script>
<p id="timePara"><button onclick="getDateTime()">獲得日期和事件</button></p>
<p><img src="./i/w3school_banner.gif" /></p>
<p>請開啟<a href="./html5_html_manifest.html" target="_blank">這個頁面</a>,然後離線瀏覽,重新載入頁面。頁面中的指令碼和影象依然可用。</p>
</body>
</html>

偷了個懶,直接用w3school的例子來弄了: http://www.w3school.com.cn/example/html5/html5_html_manifest.html

它這個例子不知道怎麼的,貌似它IIS沒設定還是怎麼,反正我測試快取是失敗的。

上面檔案中引用到的檔案有:

./mymanifest.manifest

./js/demo_time.js

./i/w3school_banner.gif

為了測試 FALLBACK: 所以故意沒有放 ./html5_html_manifest.html 在伺服器上。按照以上弄好html主檔案後,下面就是編寫快取列表檔案:

2.快取列表檔案編寫

CACHE MANIFEST
# 2014-05-22 v1.0.0
CACHE:
./i/w3school_banner.gif
./js/demo_time.js


NETWORK:
login.asp


FALLBACK:
/ ./err/404.html

上面就是一個完整的快取列表檔案的例子,可以看到沒加入 ./html5_html_manifest.html ,為了測試最後一個FALLBACK的效果,前面幾個標籤沒什麼好說的,網路上例子和說明一大把,著重說下最後一個失效時回撥的頁面設定,這裡一行為一個單位,一行有兩個元素,第一個是網路正常或檔案存在時呼叫的頁面,後跟一個空格和第一個元素隔開,第二和元素就是網路不通,或者檔案不存在是的替換頁面,上面的例子中,第一個元素用 / 符號代替,表示所有未找到或網路未連線時無法訪問的檔案都用後面這個檔案 ./err/404.html 替換顯示。/ 在這裡是萬用字元的作用,類似 * 。

3.webview設定

當然,如果你的瀏覽器本身支援快取的話,那麼這裡下面的內容你就不必看了,上面設定完畢後,你的頁面就可以被順利快取了。

但是我打造的是自己引用webview做的APP,預設快取是關閉的,那麼就必須對webview進行設定,否則照樣不能快取:這裡只給出webview設定的程式碼片段了,詳細的呼叫webview的例子網上一大把,在此不做冗述。

   	  WebSettings  webseting  =  mWebView.getSettings();   

          webseting.setJavaScriptEnabled(true);  //js支援
          webseting.setSupportZoom(true);  
          webseting.setDefaultTextEncodingName("gb2312"); //預設內碼表
          mWebView.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY);  //滾動條
          mWebView.requestFocus();  
        //下面為快取開啟和設定的部分。
          webseting.setDomStorageEnabled(true);    /*如果需要儲存一些簡單的用key/value對即可解決的資料,DOM Storage是非常完美的方案。
           * 根據作用範圍的不同,有Session Storage和Local Storage兩種,
           * 分別用於會話級別的儲存(頁面關閉即消失)和本地化儲存(除非主動刪除,否則資料永遠不會過期)。 
*/
          webseting.setAppCacheMaxSize(1024*1024*8);//設定緩衝大小,我設的是8M 
          String  appCacheDir  =  this .getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();       //設定快取路徑
                  webseting.setAppCachePath(appCacheDir); //設定快取路徑 
                  webseting.setAllowFileAccess(true);   //設定可以訪問檔案讀取檔案
                  webseting.setAppCacheEnabled(true);   // 開啟APP快取 
                  webseting.setCacheMode(WebSettings.LOAD_DEFAULT|WebSettings.LOAD_CACHE_ELSE_NETWORK); //設定快取模式為:根據html5快取列表檔案更新快取和在網路未連線時使用快取。

完成以上4步(IIS設定算一步),你的APP才能正確的快取網頁。