當前位置:首頁 » 網頁前端 » web離線應用
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web離線應用

發布時間: 2023-07-28 08:58:34

⑴ web應用有哪些

常見的計數器、留言版、聊天室和論壇BBS等,都是Web應用程序,不過這些應用相對比較簡單,而Web應用程序的真正核心主要是對資料庫進行處理,管理信息系統(Management Information System,簡稱MIS)就是這種架構最典型的應用。

MIS可以應用於區域網,也可以應用於廣域網。基於Internet的MIS系統以其成本低廉、維護簡便、覆蓋范圍廣、功能易實現等諸多特性,得到越來越多的應用。

web開發就是我們說的做網站,它分為網頁部分,和邏輯部分也就是我們說的前台與後台,前台負責與用戶的交互,顯示數據,用到HTML顯示數據,CSS控制樣式,JS編寫復雜交互。後台編寫處理這些邏輯的程序。可以用C#,java,vb.php等語言。

(1)web離線應用擴展閱讀:

一、優點

1、網路應用程序不需要任何復雜的「展開」過程,你所需要的只是一個適用的瀏覽器;

2、網路應用程序通常耗費很少的用戶硬碟空間,或者一點都不耗費;

3、它們不需要更新,因為所有新的特性都在伺服器上執行,從而自動傳達到用戶端;

4、網路應用程序和伺服器端的網路產品都很容易結合,如email功能和搜索功能;

5、因為它們在網路瀏覽器窗口中運行,所以大多數情況下它們是通過跨平台使用的 (例如Windows,Mac,Linux等等)

二、應用擴展

信息化,互聯網,移動化,雲計算的不斷發展,使得公司的業務需求越來越多。

因此很多公司的頁面因為缺乏高度的可擴展性,因而流失了大量的用戶。如果你不希望重蹈這些公司的覆轍,你就急需要找到一條可以擴展自己web應用的途徑。

對Web應用來說,擴展能力很重要,隨著用戶群和工作量的增加,處理器在增加,它應該能夠進行擴展。對於Java應用來說,擴展更復雜,不只是簡單的購買和安裝20個新的處理器就可以的。

然而,Java平台能夠也確實支持應用擴展,通過外圍設備語言,例如Scala、Clojure和Groovy。利用JAVA編程語言,開發者很難使JAVA應用進行線性擴展。

另外,按需的雲計算本質使得可擴展的Web應用程序融入到了各種規模的業務中。進入到這個領域不能說沒有障礙,即使是很小的公司得到這類計算能力也很難,而且數據存儲一度曾經只適用於企業級用戶。

這使你得到想要的伺服器空間,不僅比以往更便宜,而且更容易。雲計算可以訂購更多的資源,而且就像行車路過訂購快餐一樣方便。

⑵ 哪個網站用了HTML5離線Web應用

HTML5 離線功能介紹
HTML5 是目前正在討論的新一代 HTML 標准,它代表了現在 Web
領域的最新發展方向。在 HTML5
標准中,加入了新的多樣的內容描述標簽,直接支持表單驗證、視頻音頻標簽、網頁元素的拖拽、離線存儲和工作線程等功能。其中一個新特性就是對離線應用開發
的支持。
在開發支持離線的 Web 應用程序時,開發者通常需要使用以下三個方面的功能:
離線資源緩存:需要一種方式來指明應用程序離線工作時所需的資源文件。這樣,瀏覽器才能在在線狀態時,把這些文件緩存到本地。此後,當用戶離線訪問應用程
序時,這些資源文件會自動載入,從而讓用戶正常使用。HTML5 中,通過 cache manifest
文件指明需要緩存的資源,並支持自動和手動兩種緩存更新方式。
在線狀態檢測:開發者需要知道瀏覽器是否在線,這樣才能夠針對在線或離線的狀態,做出對應的處理。在 HTML5 中,提供了兩種檢測當前網路是否在線的方式。
本地數據存儲:離線時,需要能夠把數據存儲到本地,以便在線時同步到伺服器上。為了滿足不同的存儲需求,HTML5 提供了 DOM Storage 和
Web SQL Database 兩種存儲機制。前者提供了易用的 key/value 對存儲方式,而後者提供了基本的關系資料庫存儲功能。

管 HTML5 還處於草稿狀態,但是各大主流瀏覽器都已經實現了其中的很多功能。Chrome、Firefox、Safari 和 Opera
的最新版本都對 HTML5 離線功能提供了完整的支持。IE8 也支持了其中的在線狀態檢測和 DOM Storage 功能。下面將具體介紹
HTML5 離線功能中的離線資源緩存、在線狀態檢測、DOM Storage 和 Web SQL Database,最後通過一個簡單的 Web
程序說明使用 HTML5 開發離線應用的方法。
回頁首
離線資源緩存

了能夠讓用戶在離線狀態下繼續訪問 Web 應用,開發者需要提供一個 cache manifest
文件。這個文件中列出了所有需要在離線狀態下使用的資源,瀏覽器會把這些資源緩存到本地。本節先通過一個例子展示 cache manifest
文件的用途,然後詳細描述其書寫方法,最後說明緩存的更新方式。
cache manifest 示例
我們通過 W3C 提供的示例來說明。Clock Web 應用由三個文件「clock.html」、「clock.css」和「clock.js」組成。
清單 1. Clock 應用代碼
<!-- clock.html -->
<!DOCTYPE HTML>
<html>
<head>
<title>Clock</title>
<script src="clock.js"></script>
<link rel="stylesheet" href="clock.css">
</head>
<body>
<p>The time is: <output id="clock"></output></p>
</body>
</html>

/* clock.css */
output { font: 2em sans-serif; }

/* clock.js */
setTimeout(function () {
document.getElementById('clock').value = new Date();
}, 1000);

當用戶在離線狀態下訪問「clock.html」時,頁面將無法展現。為了支持離線訪問,開發者必須
添加 cache manifest 文件,指明需要緩存的資源。這個例子中的 cache manifest
文件為「clock.manifest」,它聲明了 3
個需要緩存的資源文件「clock.html」、「clock.css」和「clock.js」。
清單 2. clock.manifest 代碼
CACHE MANIFEST
clock.html
clock.css
clock.js

添加了 cache manifest 文件後,還需要修改「clock.html」,把 <html> 標簽的 manifest 屬性設置為「clock.manifest」。修改後的「clock.html」代碼如下。
清單 3. 設置 manifest 後的 clock.html 代碼
<!-- clock.html -->
<!DOCTYPE HTML>
<html manifest="clock.manifest">
<head>
<title>Clock</title>
<script src="clock.js"></script>
<link rel="stylesheet" href="clock.css">
</head>
<body>
<p>The time is: <output id="clock"></output></p>
</body>
</html>

修改後,當用戶在線訪問「clock.html」時,瀏覽器會緩存「clock.html」、「clock.css」和「clock.js」文件;而當用戶離線訪問時,這個 Web 應用也可以正常使用了。
cache manifest 格式
下面說明書寫 cache manifest 文件需要遵循的格式。
首行必須是 CACHE MANIFEST。
其後,每一行列出一個需要緩存的資源文件名。
可根據需要列出在線訪問的白名單。白名單中的所有資源不會被緩存,在使用時將直接在線訪問。聲明白名單使用 NETWORK:標識符。
如果在白名單後還要補充需要緩存的資源,可以使用 CACHE:標識符。
如果要聲明某 URI 不能訪問時的替補 URI,可以使用 FALLBACK:標識符。其後的每一行包含兩個 URI,當第一個 URI 不可訪問時,瀏覽器將嘗試使用第二個 URI。
注釋要另起一行,以 # 號開頭。
清單 4 的代碼中給出了 cache manifest 中各類標識符的使用示例。
清單 4. cache manifest 示例代碼
CACHE MANIFEST
# 上一行是必須書寫的。

images/sound-icon.png
images/background.png

NETWORK:
comm.cgi

# 下面是另一些需要緩存的資源,在這個示例中只有一個 css 文件。
CACHE:
style/default.css

FALLBACK:
/files/projects /projects

更新緩存
應用程序可以等待瀏覽器自動更新緩存,也可以使用 Javascript 介面手動觸發更新。
自動更新

瀏覽器除了在第一次訪問 Web 應用時緩存資源外,只會在 cache manifest 文件本身發生變化時更新緩存。而 cache manifest 中的資源文件發生變化並不會觸發更新。
手動更新

開發者也可以使用 window.applicationCache 的介面更新緩存。方法是檢測
window.applicationCache.status 的值,如果是 UPDATEREADY,那麼可以調用
window.applicationCache.update() 更新緩存。示範代碼如下。
清單 5 手動更新緩存
if (window.applicationCache.status == window.applicationCache.UPDATEREADY)

window.applicationCache.update();


你可以去看看ITjob遠標的網站,應該有做的,html5應用很強大

⑶ 我想用web頁面版的離線百度地圖應用,有解決方案嗎

有。使用奧維互動地圖瀏覽器,可以下載網路地圖到電腦上,可以離線使用。

⑷ 如何使用下面的HTML5功能創建離線的網頁和應用程序

在這篇文章中,我們將展示如何創建乖巧離線的網頁和應用程序使用下面的HTML5功能:

AppCache本地存儲文件資源,離線訪問它們作為URL

索引型資料庫存儲結構化數據在本地,你可以訪問和查詢它

DOM存儲在本地存儲少量的文字信息,

離線事件來檢測,如果你€ 重新連接到網路

離線的'蛋糕'這個詞使用的食譜網站的搜索結果。

作為一個開發者,你可以使這些類型的場景相結合的離線技術:AppCache,索引型資料庫,DOM存儲,WebSockets的(或XHR)。在探索個人的技術,讓我們的探討的好處。

Metro風格的應用程序和網站,離線技術讓你來處理連接故障。想像一下,您的用戶填寫一個表格,他失去網路連接。您的網站或Metro風格的應用程序應該怎麼做呢?連接自由發展的心態可以讓您的應用程序是否連接到網路或不正確地獨立工作。你的應用程序將正常工作。

在更復雜的情況下,Web站點和應用程序允許用戶創建新的內容,並存儲新的數據,即使應用程序是完全離線。試想一下,無縫地工作在離線狀態下,如Outlook今天的Outlook Web Access(OWA)的Hotmail或GMail。

離線技術也可以通過本地緩存的資源服務,預緩存將來信息和轉移從雲(或網路)到客戶端設備的處理能力,提高整體性能。信息越多,你€™重新能夠緩存在本地,在本地搜索,並計算在本地伺服器和用戶的體驗將更快,需要更少的資源熱轉印機。

有一個Metro風格的應用程序離線工作的期望高於網站的離線工作。因為他們使用從商店的自我包含的程序包部署,用戶希望他們有某種類型的離線功能(如游戲,書籍,食譜等)。即使這些應用程序是無法創建或訪問新的內容,以前的內容應該是可見的(例如聯系人,會議,飼料,雜志等)。

本地緩存文件資源使用AppCache

AppCache使您能夠創建長壽命的本地緩存下載的文件資源,資源可以訪問而離線或使用的同時在線,以提高性能。試想一下,一個三歲的孩子使用一台筆記本電腦,下載一個互動式的Web的游戲(KidsBook)從您的家庭網路。如果應用程序的資源存儲在本地,孩子可以繼續在車上玩游戲,那裡沒有網路連接。

如果KidsBook使用AppCache,本場比賽將有緩存必要的資源(的JavaScript,HTML,CSS,音頻,視頻等)時,先下載後從網路上斷開時,播放的游戲。這可以讓孩子保持愉悅,即使設備本身沒有網路連接。

AppCache創作流程。

要看到如何啟用互動網頁游戲離線工作,檢查出KidsBook的IE Test Drive網站上的例子。

AppCache使用一個manifest文件,以緩存的內容從網站上指定資源的URI。幕後發生後,瀏覽器顯示網頁,它允許在清單文件中定義的資源被下載的緩存。這保證了資源下載到本地機器上,作為一個單位在一個事務中,創建一個本地的緩存。如果一個單一的資源下載失敗,沒有創建高速緩存。要更新存儲在緩存中的內容,在您的伺服器更新清單文件。當用戶下次訪問該網站時,瀏覽器比較明顯的伺服器上的文件的緩存副本。如果緩存的艙單副本是不同的伺服器副本,新版本更新清單文件中定義的內容高速緩存的使用。

AppCache還允許Internet Explorer和Metro風格的應用程序在離線狀態下使用傳統的URL的訪問緩存的資源。這可以讓你在瀏覽器窗口中鍵入一個URL,並沒有任何網路連接的情況下訪問此信息。此外,離線頁可以解決的URI使用本地緩存的信息。代碼示例來看看在HTML5應用程序緩存(「œAppCacheâ)部分中的IE10開發人員指南。

總體而言,AppCache提供了一定的優勢HTTP的緩存。HTTP緩存沒有噸保證緩存的資源之後將TIF(臨時Internet文件)將被清除。此外,HTTP緩存沒有€™噸正確地解決在離線狀態下的URL。然而,HTTP緩存可用於優化AppCache的行為,通過指定的緩存資源的生命周期。如果從網站上下載或復制的資源從緩存的本地高速緩存中創建一個新的版本時,這將決定。

Metro風格的應用可以受益於AppCache通過在本地緩存的Web資源的訪問的頁框,它允許離線訪問的內容。

高速緩存大型本地使用索引型資料庫的結構化數據

索引型資料庫是一個本地JavaScript對象存儲在本地機器上的資料庫,允許快速索引和搜索的對象。前面介紹的食譜網站,包括16食譜從父站點中提取的資料庫。想像一下,用一個RSS feed,一個WebSocket或XHR連接的,定期更新這個資料庫。這將使您的用戶能夠訪問到最新的食譜,即使他們有沒有網路連接。

索引型資料庫,您可以直接操作和索引的JavaScript對象。使用索引型資料庫搜索本地信息的優點是它不會強迫你總是在雲中搜索,降低了計算成本。這是假設你€™重新能夠維持,是緩存在本地系統中的數據的相關性。

⑸ html5的離線web應用的瀏覽器和伺服器交互的過程要是沒有緩存怎麼辦

html5的離線web應用的瀏覽器和伺服器交互的過程要是沒有緩存就需要每次交互都要實時介面調用,增加網路開銷。
一、離線存儲的作用
1、用戶可離線訪問應用,這對於無法隨時保持聯網狀態的移動終端用戶來說尤其重要
2、用戶訪問本地的緩存文件,通常意味著更快的訪問速度
3、僅僅載入被修改過的資源,避免同一資源對伺服器多次的請求,大大降低了對伺服器的訪問壓力
二、實現離線存儲
1、在html標簽里通過manifest屬性引用一個cache.manifest文件,該文件里聲明了瀏覽器需緩存的所有資源文件,如下所示:
<!DOCTYPE html>
<html lang='cn' manifest='cache.manifest'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>離線緩存示例頁面</title>
<!-- CSS文件引用 -->
</head>

<body>
<!-- 各種標簽 -->
</body>

<!-- 各種腳本文件 -->
</html>
2、關於cache.manifest的定義
CACHE MANIFEST
# 注釋:需要緩存的文件,無論在線與否,均從緩存里讀取
chched.js
cached.css

# 注釋:不緩存的文件,無論緩存中存在與否,均從新獲取
NETWORK:
uncached.js
uncached.css

# 注釋:獲取不到資源時的備選路徑,如index.html訪問失敗,則返回404頁面
FALLBACK:
index.html 404.html

⑹ web應用包括什麼

常見的計數器、留言版、聊天室和論壇BBS等,都是Web應用程序,不過這些應用相對比較簡單,而Web應用程序的真正核心主要是對資料庫進行處理,管理信息系統(Management Information System,簡稱MIS)就是這種架構最典型的應用。

一個Web應用程序是由完成特定任務的各種Web組件(web components)構成的並通過Web將服務展示給外界。在實際應用中,Web應用程序是由多個Servlet、JSP頁面、HTML文件以及圖像文件等組成。所有這些組件相互協調為用戶提供一組完整的服務。

(6)web離線應用擴展閱讀

web應用缺點

1、網路應用程序強調瀏覽器的適用性。如果瀏覽器方沒有提供特定的功能,或者棄用特定的平台或操作系統版本(導致不適用),就會影響大量用戶;

2、網路應用依靠互聯網遠程伺服器端的應用文件。因此,當連接出問題時,應用將不能正常使用。但是,如果使用HTML5 API,這些應用就可以被下載安裝而可離線使用。

3、許多網路應用程序不是開源的,只能依賴第三方提供的服務,因此不能針對用戶定製化、個性化,而且大多數情況下用戶不能離線使用,因而損失了很多靈活性;

4、它們完全依賴應用服務商的可及性。如果公司倒閉,伺服器停止使用,用戶也無法追索以前的資料。對比而看,即使軟體製造商倒閉了,傳統的安裝軟體也可以繼續運行,盡管不能再更新或有其他用戶服務。

⑺ html5新增了離線緩存機制這說法對嗎

這個不算是 新增吧。

隨著現代瀏覽器的推動,Flash放棄對移動端的支持,HTML5無疑成為當前Web前端炙手可熱的話題。各大游戲開發商、App開發商紛紛投入人力進行研究和技術儲備。相信不久的將來,HTML5會迎來一個快速發展和普及的春天。那麼,HTML5這個新一代的標准,又給我們帶來哪些緩存機制呢?

HTML5 之離線應用Manifest
我們知道,使用傳統的技術,就算是對站點的資源都實施了比較好的緩存策略,但是在斷網的情況下,是無法訪問的,因為入口的HTML頁面我們一般運維的考慮,不會對其進行緩存。HTML5的Cache Mainifest離線應用特性就能夠幫助我們構建離線也能使用的站點,所有的資源都使用瀏覽器本地緩存,當然前提是要求在聯網的情形下使用過一次站點。
如何實現離線訪問特性
實現的步驟非常簡單,主要3個步驟:
1)在伺服器上添加MIME TYPE支,讓伺服器能夠識別manifest後綴的文件
AddType text/cache-manifest manifest
2)創建一個後綴名為.manifest的文件,把需要緩存的文件按格式寫在裡面,並用注釋行標注版本
CACHE MANIFEST
# 直接緩存的文件
CACHE:
Path/to/cache.js
# version:2012-03-20
3)給 <html> 標簽加 manifest 屬性,並引用manifest文件
具體可以參考:HTML5 緩存: cache manifest
<html manifest=」path/to/name-of.manifest」>
離線應用訪問及更新流程
第一次訪問離線應用的入口頁HTML(引用了manifest文件),正常發送請求,獲取manifest文件並在本地緩存,陸續拉取manifest中的需要緩存的文件
再次訪問時,無法在線離線與否,都會直接從緩存中獲取入口頁HTML和其他緩存的文件進行展示。如果此時在線,瀏覽器會發送請求到伺服器請求manifest文件,並與第一次訪問的副本進行比對,如果發現版本不一致,會陸續發送請求重新拉取入口文件HTML和需要緩存的文件並更新本地緩存副本
之後的訪問重復第2步的行為
離線機制的緩存用途
從Manifest的機制來看,即使我們不是為了創建離線應用,也同樣可以使用這種機制用於緩存文件,可以說是給Web緩存提供多一種可以選擇的途徑。
存在的問題:緩存文件更新控制不靈活
就目前HTML5提供的manifest機制來講,一個頁面只能引用一個manifest頁面,而且一旦發現這個manifest改變了,就會把裡面所有定義的緩存文件全部重新拉取一遍,不管實際上有沒有更新,控制比較不靈活。針對這個問題,也有的同學提出了一些建議,比如把需要緩存的文件分模塊切分到不同manifest中,並分開用HTML引用,再使用強大的iframe嵌入到入口頁面,這樣就當某一個模式需要有更新,不會導致其他模塊的文件也重新拉取一遍。

HTML5 之本地存儲localstorage
HTML5給我們提供本地存儲localstorage特性,嚴格來講,其實已經不算傳統Web緩存的范疇。因為它存儲的地方是跟Web緩存分開的,是瀏覽器重新開辟的一個地方。
localstorage的作用
本地存儲localstorage的作用主要使Web頁面能夠通過瀏覽器提供的set/get介面,存儲一些自定義的信息到本地硬碟,並且在單次訪問或以後的訪問過程中隨時獲取或修改。
Localstorage的使用
Localstorage提供了幾個非常易用的Api,setItem/getItem/removeItem/clear,具體的可以參考:Html5 Step by Step(二) 本地存儲
Localstorage的緩存用途
Localstorage設計的本意可能是用來存儲一些用戶操作的個性化設置的文本類型的信息和數據,當我們其實也可能拿來當Web緩存區使用,比如我們可以將Base64格式編碼的圖片信息,存在localstorage中,再次訪問時,直接本地獲取後,使用Css3的Data:image的方式直接展現出來。
存在的問題:大小限制
按照目前標准,目前瀏覽器只給每個獨立的域名提供5m的存儲空間,當存儲超過5m,瀏覽器就會彈出警告框。

可以說,HTML5的Manifest和localstorage是給我們在考慮Web緩存的時候提供了多一種思路,當你開發的應用只面對現代瀏覽器的時候,不妨可以考慮一下