网页应用

**網路應用程式**（英語：web application，英文簡稱 **Webapp**）分為客戶端到伺服器架構或無伺服器後端架構。其中的客戶端就是網頁瀏覽器。常見的網頁應用程式有 Webmail、網路購物、網路拍賣、wiki、網路論壇、部落格、網路遊戲等諸多應用。

網路應用程式風行的原因之一，是因為可以直接在各種電腦平台上執行，不需要事先安裝或定期升級等程式。

## 定義及類似術語

各種類型的動態網頁和「網路應用程式」 之間的區別一般是不清楚的。最有可能接近「網路應用程式」的網站是與桌面軟體應用程式或行動應用程式具有類似功能的網站。HTML5 引入了明確的支援，使得應用程式可以作為網頁載入，可以在本地儲存資料並在離線狀態下繼續執行。

單頁應用更類似於應用程式，因為它們沒有使用不同的 URL 切換操作介面。像 Sencha Touch 和 AngularJS 這樣的單頁網頁框架可能會被用來為行動平台開發這樣的網頁應用。

### 行動 web 應用程式

在製作 Web 應用程式時，有幾種定位行動裝置的方法：

* 回應式網頁設計可用於製作網路應用程式 - 無論是傳統網站還是單頁應用程式，都可以在小螢幕上檢視，並且可以很好地與觸控式螢幕配合使用。
* 漸進式網頁應用程式是常規網頁或網站和行動應用程式的混合體。
* 原生應用程式或「行動應用程式」直接在行動裝置上執行，就像常規軟體應用程式直接在桌上型電腦上執行一樣，而無需 Web 瀏覽器（並且可能不需要 Internet 連接）; 這些通常是用 Java（Android 裝置）或 Objective C 或 Swift（用於 iOS 裝置）編寫的。最近，像 React Native，Flutter 和 Xamarin 這樣的框架允許使用不同於每種標準本地語言的語言來開發所有平台的本地應用程式。
* 混合應用程式在本地應用程式中嵌入行動網站，可能使用混合框架（如 Apache Cordova 和 Ionic 或 Appcelerator Titanium）。這允許使用網路技術進行開發（並且可能直接複製來自現有行動網站的代碼），同時還保留原生應用的某些優點（例如，直接存取裝置硬體，離線操作，應用商店可見性）。

## 歷史

在較早的網路架構（如客戶機 - 伺服器）中，應用程式的處理負載在伺服器上的代碼和本地安裝在每個客戶機上的代碼之間共享。換句話說，一個應用程式有自己的預編譯客戶端程式作為其使用者介面，必須分別安裝在每個使用者的個人電腦上。升級到應用程式的伺服器端代碼通常還需要升級到安裝在每個使用者工作站上的客戶端代碼，這增加了技術支援成本並降低了生產力。此外，應用程式的客戶端和伺服器組件通常都與特定的電腦系統結構緊密相連，作業系統並將它們移植到其他作業系統對於除了最大的應用程式之外的所有作業系統而言都是非常昂貴的 （現在，用於行動裝置的本地應用程式也受到一些或所有上述問題的困擾。）

相反，網頁應用程式使用由各種網頁瀏覽器支援的標準格式（如 HTML 和 JavaScript）編寫的網頁。網頁應用程式可被視為客戶端 - 伺服器軟體的特定變體，其中客戶端軟體在使用諸如 HTTP 的標準程式存取相關網頁時被下載到客戶端機器。每次存取網頁時都可能會發生客戶端網頁軟體更新。在對談期間，網頁瀏覽器解釋並顯示頁面，並作為任何網頁應用程式的通用客戶端。

在全球資訊網的早期，每個單獨的網頁作為一個靜態文件被傳送到客戶端，但是由於使用者輸入是通過嵌入在頁面標記中的網頁的 <Forms> 元素返回的，所以頁面的順序仍然可以提供互動式的體驗。但是，每次對網頁的重大更改都需要往返伺服器以重新整理整個頁面。

1995 年，網景引入了一種稱為 JavaScript 的客戶端指令碼語言，允許程式設計師在客戶端執行的使用者介面中添加一些動態元素。因此，為了生成整個網頁而不是將資料傳送到伺服器，下載頁面的嵌入指令碼可以執行各種任務，例如輸入驗證或顯示 / 隱藏頁面的一部分。

1996 年，Macromedia 引入了 Flash，這是一種向量動畫播放器，可以作為外掛程式添加到瀏覽器中，以在網頁上嵌入動畫。它允許使用手稿語言來編程客戶端的互動，而不需要與伺服器通信。

在 1999 年，「Web 應用程式」概念在 Servlet Specification 2.2 版中以 Java 語言引入。[2.1？]。當時 JavaScript 和 XML 已經被開發出來，但 Ajax 還沒有被創造出來，並且 XMLHttpRequest 物件在 2008 年才作為 ActiveX 物件在 Internet Explorer 5 上引入。

2005 年，Ajax 這個詞被創造出來，像 Gmail 這樣的應用程式開始使他們的客戶端越來越靈活。網頁尾本能夠聯絡伺服器來儲存 / 檢索資料，而無需下載整個網頁。

在 2011 年，HTML5 被定稿，提供圖形和多媒體功能，而不需要客戶端外掛程式。HTML5 也豐富了文件的語意內容。API 和文件物件模型（DOM）不再是事後的，而是 HTML5 規範的基礎部分。WebGL API 為基於 HTML5 的 canvas 和 JavaScript 語言的進階 3D 圖形鋪平了道路。這些在創造真正的平台和瀏覽器獨立顯著重要性的多樣化網際網路應用程式。

## 介面

通過 DHTML、Java Applet、JavaFX、JavaScript、Flash、Silverlight 等技術，螢幕上的繪圖，播放音訊以及存取鍵盤和滑鼠等應用程式特有的方法都是可能的。許多服務已經將所有這些組合到了一個更熟悉的介面中，該介面採用了作業系統的外觀。通用技術，如拖放也受到這些技術的支援。Web 開發人員通常使用客戶端指令碼來添加功能，特別是建立不需要重新載入頁面的互動式體驗。一些技術來協調客戶端指令碼和伺服器端技術，如 ASP.NET、Java EE、Perl / Plack 和 PHP。

使用各種技術組合的網頁開發技術 AJAX 是創造更多互動式體驗的技術範例。

## 結構

應用程式通常被分成稱為「層」的邏輯塊，其中每個層被分配一個角色。傳統的應用程式只包含一層，它駐留在客戶端機器上，但是網頁應用程式本身就是一種 n 層的方法。儘管可能有許多變化，但最常見的結構是三層應用程式。按照最常見的形式，這三個層次按順序被稱為呈現，應用和儲存。網頁瀏覽器是第一層（呈現），引擎使用一些動態的網頁內容技術（如 ASP，CGI，ColdFusion，Dart，JSP / Java，Node.js，PHP，Python 或 Ruby on Rails）是中間層（應用程式邏輯），資料庫是第三層（儲存）。 Web 瀏覽器傳送請求到中間層，它通過使查詢和更新對資料庫服務他們，並生成使用者介面。

對於更複雜的應用程式，三層解決方案可能不足，使用 n 層方法可能會有所幫助，其中最大的好處是將駐留在應用程式層上的業務邏輯劃分為更細粒度模型。另一個好處是可以通過提供易於使用的介面來存取資料，添加一個整合層，將資料層與其他層分開。例如，客戶端的資料將被通過呼叫一個 "list\_clients ()" 函式，而不是直接使一個 SQL 查詢針對資料庫上的客戶端表存取。這樣可以替換底層的資料庫，而不會對其他層進行任何更改。

有一些人將 Web 應用程式視為兩層架構。這可以是一個「聰明」的客戶端，執行所有的工作，並查詢一個「愚蠢的」伺服器，或一個「愚蠢的」客戶端，依靠一個「聰明的」伺服器。客戶端將處理表示層，伺服器將具有資料庫（儲存層），業務邏輯（應用層）將在其中一個或兩個上。雖然這增加了應用程式的可伸縮性，並將顯示和資料庫分開，但它仍然不允許真正的圖層專業化，所以大多數應用程式將超過這個模型。

## 商業用途

應用軟體公司正在形成的戰略是提供對以前作為本地應用程式分發的軟體的網路存取。根據應用程式的類型，可能需要開發一個完全不同的基於瀏覽器的介面，或者僅僅調整現有的應用程式以使用不同的演示技術。這些程式允許使用者每月或每年支付使用軟體應用程式的費用，而無需將其安裝在本地硬碟機上。遵循這一戰略的公司被稱為應用服務提供商（ASP），而 ASP 在軟體行業中正受到越來越多的關注。

這類應用程式的安全漏洞是一個主要問題，因為它可能涉及企業資訊和私人客戶資料。保護這些資產是任何 Web 應用程式的重要組成部分，並且在開發過程中必須包含一些關鍵的操作區域。這包括認證，授權，資產處理，輸入以及記錄和審計的過程。從一開始就將安全性構建到應用程式中，從長遠來看可能會更有效，而且破壞性更小。

雲端運算模型 Web 應用程式是軟體即服務（SaaS）。有企業應用程式作為 SaaS 為企業提供固定或使用相關費用。其他 Web 應用程式是免費提供的，通常從 Web 應用程式介面中顯示的廣告中產生收入。

## 開發

編寫一個 Web 應用程式經常使用開源軟體簡化，如 Django、Ruby on Rails 或 Symfony 稱為 Web 應用框架。這些框架有助於快速應用程式開發，讓開發團隊專注於其應用程式的獨特部分，而無需解決諸如使用者管理等常見的開發問題。

使用 Web 應用程式框架通常可以減少程式中的錯誤數量，通過簡化代碼，並允許一個團隊專注於框架，而另一個專注於實現功能。在網際網路上經常發生駭客攻擊的應用程式中，與安全相關的問題可能由程式錯誤引起。框架還可以促進使用最佳實踐，例如 Post/Redirect/Get。

此外，網際網路作業系統 （頁面存檔備份，存於網際網路檔案館）上的應用程式也有發展的潛力，儘管目前沒有太多可行的平台適合這種模式。

## 參見

* 軟體即服務
* Web 2.0
* Web 服務
* Widget
* Bootstrap

## 參考文獻