TW201917568A - 電子裝置與其網頁應用程式介面的離線運行方法 - Google Patents

Abstract

一種電子裝置與其網頁應用程式介面的離線運行方法。所述方法包括：透過初始網頁的內嵌框架視窗，嘗試經由網路連結至提供網頁應用程式介面的網路伺服器。當網路模組未連接至網路時，透過內嵌框架視窗的網址觸發服務代理元件，而透過服務代理元件從瀏覽器存儲取得網頁應用程式介面的離線執行資料。當網路模組未連接至網路時，透過瀏覽器運行離線執行資料而產生離線介面網頁。將離線介面網頁呈現於內嵌框架視窗。

Description

電子裝置與其網頁應用程式介面的離線運行方法

本發明是有關於一種電腦技術，且特別是有關於一種電子裝置與其網頁應用程式介面的離線運行方法。

隨著科技日新月異，網際網路亦快速地發展，越來越多的網路資訊與網路應用服務透過網路而唾手可得。進一步而言，由於網際網路的發達，許多網路服務營運者可於透過網頁應用程式介面(Web application program interface，Web API)來實踐服務之間的串接。然而，上述的Web API大多應用於連網裝置處於連線狀態的情境中，一旦連網設備處於離線狀態而無法連接至網路時，連網設備的使用者就無法經由網路取得Web API而獲取預期中的網路服務。此時，使用者必須要等到連網裝置成功連上網路才能再次透過網路服務商提供的Web API來獲取網路服務。

有鑑於此，本發明提供一種電子裝置與其網頁應用程式介面的離線運行方法，可在離線情境狀態下使用Web API，消弭Web API只能用於連線情境下的限制。

本發明的一實施例提供一種離線更新程式的方法，用於具有網路模組的電子裝置，而此電子裝置的瀏覽器呈現初始網頁，所述方法包括下列步驟。透過初始網頁的內嵌框架視窗，嘗試經由網路連結至提供網頁應用程式介面的伺服器。當網路模組未連接至網路時，透過內嵌框架視窗的網址觸發服務代理元件，而透過服務代理元件從瀏覽器存儲取得網頁應用程式介面的離線執行資料。當網路模組未連接至網路時，透過瀏覽器運行離線執行資料而產生離線介面網頁。將離線介面網頁呈現於內嵌框架視窗。

本發明的另一實施例提供一種電子裝置，其包括儲存電路、網路模組及處理器。所述處理器耦接至所述儲存電路及所述網路模組，並使用瀏覽器來呈現一初始網頁。所述處理器經配置用以：透過初始網頁的內嵌框架視窗，嘗試經由網路連結至提供網頁應用程式介面的伺服器。當網路模組未連接至網路時，透過內嵌框架視窗的網址觸發服務代理元件，而透過服務代理元件從瀏覽器存儲取得網頁應用程式介面的離線執行資料。當網路模組未連接至網路時，透過瀏覽器運行離線執行資料而產生離線介面網頁。將離線介面網頁呈現於內嵌框架視窗。

基於上述，本發明提出的網頁應用程式介面的離線運行方法與電子裝置，透過配置內嵌框架視窗於啟用Web API的初始網頁內，本發明可透過內嵌框架視窗所指派的網址而嘗試連結至提供網頁應用程式介面的伺服器。當電子裝置處於離線情境下時，於瀏覽器背景運行的服務代理元件可提取內嵌框架視窗產生的網路請求，並因此被觸發從瀏覽器存儲獲取事先關於Web API的離線執行資料。如此一來，電子裝置可透過瀏覽器運行上述離線執行資料而產生離線介面網頁，並將離線介面網頁呈現於內嵌框架視窗。藉此，即便電子裝置當前是處於未連網的狀態，使用者也可以透過Web API來獲得與所要求之服務相關的離線服務資訊。

為讓本發明的上述特徵和優點能更明顯易懂，下文特舉實施例，並配合所附圖式作詳細說明如下。

圖1是根據本發明的一實施例所繪示的網路服務系統的示意圖。請參照圖1，在一實施例中，網路服務系統10包括網路101、電子裝置111及網路伺服器121。在一實施例中，網路101是指網際網路(Internet)。在另一實施例中，網路101亦可以是指本地區域網路或私有網路。電子裝置111及網路伺服器121可分別經由有線或無線方式連接至網路101。此外，電子裝置111可以是智慧型手機、平板電腦、桌上型電腦或筆記型電腦等各式具有訊號輸入、訊號輸出、連網及運算功能的電子裝置。

在一實施例中，電子裝置111是客戶端裝置，而網路伺服器121是網路服務的服務提供裝置。例如，網路伺服器121可以是某企業組織或網路服務營運商架設的伺服器主機。網路伺服器121連接至網路101，網路伺服器121可提供網路服務的入口網頁供客戶端裝置查詢與使用。例如，若電子裝置111與網路伺服器121皆連接至網路101，電子裝置111可瀏覽或登入某企業組織的入口網頁以獲得相關的網路服務。例如，若電子裝置111與網路伺服器121皆連接至網路101，電子裝置111也可以使用網路伺服器121提供的Web API而獲取相關的網路服務。

在一實施例中，電子裝置111的網頁瀏覽器(Web browser)可傳送一服務請求來存取由網路伺服器121提供的內容(例如，藉由輸入全球資源定位器(Uniform Resource Locator，URL)到網頁瀏覽器中)。網路伺服器121基本上即提供電子裝置111請求的資料至電子裝置111的網頁瀏覽器。在網路環境中，內容及內容之請求經常使用超文字轉換協定(Hypertext Transfer Protocol，HTTP)來傳送。網路式內容由符合超文字標記語言(HyperText Markup Language，HTML)規範的頁面、樣式板、影像及指令碼(script)等所提供。在一實施例中，上述的網頁瀏覽器是一套完整的軟體或應用程式本身(例如，Chrome、Internet Explore、Firefox、Safari、Opera等等)，使用者可透過開啟網頁瀏覽器而經由網路101連結至對應置特定網域(Domain)下的特定網站，並呈現網頁內容給使用者。

圖2是根據本發明的一實施例所繪示的電子裝置的示意圖。請參照圖2，電子裝置111包括輸入介面21、輸出介面22、儲存電路23、網路模組24及處理器25。輸入介面21、輸出介面22、儲存電路23及網路模組24皆耦接至處理器25。輸入介面21用以接收使用者輸入的操作指令。例如，輸入介面21可包括滑鼠、鍵盤、觸控板或麥克風(即，語音輸入裝置)等各式用於輸入訊號的實體介面電路。輸出介面22用以輸出訊號。例如，輸出介面22可包括螢幕(或，顯示器)、投影機或揚聲器(即，語音輸出裝置)等用於輸出訊號的實體介面電路。在一實施例中，輸入介面21與輸出介面22亦可結合為觸控螢幕或類似同時具有訊號輸入與輸出功能的裝置。例如，輸入介面21與輸出介面22可結合為電阻式觸控面板、電容式觸控面板、光學式觸控面板、聲波式觸控面板或電磁式觸控面板等。

儲存電路23用以非揮發性地儲存資料與程式碼。在此，非揮發性地儲存資料是指，儲存電路23所儲存的資料不會因為電源停止供應至儲存電路23而遺失。例如，儲存電路23可包括傳統硬碟(HDD)、固態硬碟(SDD)、固態混合式硬碟(Solid State Hybrid Drive, SSHD)或快閃記憶體等各式非揮發性儲存媒體。

網路模組24用於將電子裝置111連接至網路101並經由網路101傳遞訊息。例如，網路模組24可包括有線及/或無線網路介面卡等實體網路介面電路。例如，在無線通訊方面，網路模組24可支援第三代無線通訊技術(3G)、藍芽(Bluetooth)、通用封包無線電服務(General Packet Radio Service，GPRS)、高速下載封包存取(High Speed Downlink Packet Access，HSDPA)、高速上傳封包存取(High Speed Uplink Packet Access，HSUPA)、無線相容認證(Wireless-Fidelity，Wi-Fi)、無線廣域網路(Wireless Wide Area Network，WWAN)以及長期演進技術(Long Term Evolution，LTE)等各式無線通訊協定。此外，在有線網路方面，網路模組24可例如支援乙太網路(Ethernet)等有線通訊協定。

處理器25負責電子裝置111的整體運作。例如，處理器25可包括中央處理器、或是其他可程式化之一般用途或特殊用途的微處理器(Microprocessor)、數位訊號處理器(Digital Signal Processor，DSP)、控制器、特殊應用積體電路(Application Specific Integrated Circuit, ASIC)、可程式化邏輯裝置(Programmable Logic Device，PLD)或其他類似裝置或這些裝置的組合。此外，處理器25中可配置有隨機存取記憶體(RAM)或唯讀記憶體(ROM)等揮發性儲存媒體。

圖3是根據本發明的一實施例所繪示的離線更新程式的方法的流程圖。以下將以前述圖1與圖2的實施例來搭配圖3進行說明。請參照圖1至圖3。於此，電子裝置111的瀏覽器呈現一個初始網頁。此初始網頁可以是離線網頁或連線網頁，本發明對此並不限制。

於步驟S301，處理器25透過初始網頁的內嵌框架視窗，嘗試經由網路101連結至提供Web API的網路伺服器121。內嵌框架視窗用以在初始網頁內嵌入框架來呈現另外一個網頁內容。在一實施例中，此內嵌框架視窗可以為HTML規範底下的「iframe」視窗。透過將關聯於Web API服務的網址嵌入至iframe視窗中，例如將iframe視窗的參數「iframe src」設定為關聯於Web API服務的網址，處理器25可使用瀏覽器來嘗試介接至網路伺服器121提供的Web API。

於步驟S302，當網路模組24未連接至網路101時，處理器25透過內嵌框架視窗的網址觸發服務代理元件，而透過服務代理元件從瀏覽器存儲取得網頁應用程式介面的離線執行資料。此服務代理元件是可以在瀏覽器的背後(獨立於網頁頁面)運行的一種腳本程式，已經事先安裝於儲存電路23中。服務代理元件用以控制管轄範圍內的網頁。

在一實施例中，此服務代理元件可為「Service Worker」程式。每個網站都可以向電子裝置111的網頁瀏覽器註冊以安裝屬於自己的「Service Worker」，以在使用者瀏覽到自己的網站時獨自幫使用者進行一些工作。尤其是，完成安裝的「Service Worker」是可以在離線狀態下運行的。換言之，處理器25經由網路101從網路伺服器121獲取服務代理元件，並將服務代理元件事先安裝於儲存電路23中。於服務代理元件完成安裝後，服務代理元件會被激活(activated)而控制管轄範圍內的網頁，於此同時，服務代理元件可以進行離線執行資料與網頁相關資料的緩存，以將離線執行資料儲存於儲存電路23中的視窗之中。上述瀏覽儲存器泛指網頁瀏覽器用以儲存文字、檔案、程式碼等形式之資料的儲存元件，例如是快取儲存庫(Cache Storage)、本地儲存庫(Local Storage)、指示符資料庫(IndexDB)等等。

由於服務代理元件可監控特定網域下的請求，因此針對內嵌框架視窗所指派之網址所發出的請求可以被服務代理元件監測與提取。當網路模組24無法連接至網路101時，針對內嵌框架視窗所指派之網址所發出的請求將無法成功發出。因此，當服務代理元件偵測到內嵌框架視窗所指派之網址所發出的請求無法成功發出，服務代理元件將依據企圖介接至Web API的上述網址來存取儲存電路23中的瀏覽器存儲，以查看瀏覽器存儲中是否有關聯於上述網址的離線執行資料。

接著，於步驟S303，當網路模組24未連接至網路101時，處理器25透過瀏覽器運行離線執行資料而產生離線介面網頁。於步驟S304，處理器25將離線介面網頁呈現於內嵌框架視窗。離線執行資料可包括圖片、影片、動畫、JavaScript程式碼、FLASH動畫資料以及串聯樣式表(Cascading Style Sheets，CSS)等等。具體而言，當處於離線情境時，在服務代理元件從瀏覽器存儲當中取得關聯於Web API的離線執行資料之後，處理器25可透過瀏覽器運行離線執行資料當中的網頁程式，而將離線介面網頁呈現於內嵌框架視窗。值得一提的是，呈現離線介面網頁的內嵌框架視窗可顯示也可隱藏，本發明對此並不限制。

於一實施例中，關聯於Web API的離線執行資料可包括離線介面網頁的網頁程式碼、離線介面網頁的物件(像是圖片、影片、動畫)、Web API服務的業務處理程式，以及Web API服務的業務資料等等。例如，假設Web API用以提供網路社交服務，Web API服務的業務處理程式可用以依據使用者指令從聯絡人清單中找到特定聯絡人，而Web API服務的業務資料可以是所有聯絡人的資料。例如，假設Web API用以提供電子地圖服務，Web API服務的業務處理程式可用以依據使用者指令的目的地產生行進路線建議，而Web API服務的業務資料可以是地圖資料等等。

值得一提的是，為了讓服務代理元件可於離線情境中從瀏覽器存儲當中取得有關於Web API的離線執行資料，離線執行資料需要在電子裝置處於連線狀態時被儲存下來。為了清楚說明本發明，請參照圖4，圖4是根據本發明的一實施例所繪示的電子裝置處於網路連線狀態與網路離線狀態的示意圖。

電子裝置111可裝載有瀏覽器40，以呈現網路伺服器121提供的網頁內容予使用者。當電子裝置處於網路連線狀態S1下時，瀏覽器40可經由網路101而基於HTTP協定而與網路伺服器121進行溝通，並據以呈現特定網站41下的連線網頁P1。此時，網站41可以向電子裝置111的瀏覽器40註冊以安裝屬於自己的服務代理元件SW1，因此瀏覽器40將透過元件安裝與更新程序42進行服務代理元件SW1的安裝與更新。

在完成服務代理元件SW1的安裝或更新後，服務代理元件SW1可被激活來監控網站41底下的網頁。需特別說明的是，當電子裝置處於網路連線狀態S1下時，一般性的離線資料46(例如連線網頁P1的離線網頁程式)以及關聯於Web API的離線執行資料43可從網路伺服器121被下載，並紀錄於儲存電路23中的瀏覽器存儲45當中。於本實施例中，關聯於Web API的離線執行資料43是可以透過服務代理元件SW1的離線緩存而被紀錄於瀏覽器存儲45當中，但本發明並不限制於此。

接著，當電子裝置處於網路離線狀態S2下時，透過圖3所示的流程，服務代理元件SW1可從瀏覽器存儲45當中取得關聯於Web API的離線執行資料43。於一實施例中，當瀏覽器40運行離線執行資料43當中的程式碼時時也可能一併使用其他並非透過服務代理元件SW1所儲存的離線資料(例如離線資料46、47)。藉此，透過瀏覽器40運行離線執行資料43當中的程式碼並從瀏覽器存儲45當中取得其他離線資料47，則離線Web API網頁P2可透過瀏覽器40被呈現（包括隱藏或顯示）。於此，呈現離線Web API網頁P2的動作包括提供任何形式的網頁運行狀態或結果。藉此，使用者也就可以基於離線Web API網頁P2的存在而獲取相關的離線服務，以達成Web API的離線使用。

以下將進一步說明在完成離線Web API的介接之後，如何響應於有關於Web API的業務服務請求來提供網路服務。請參照圖5，圖5是根據本發明的一實施例所繪示的基於業務請求訊息產生並回傳業務回覆訊息的示意圖。

當電子裝置111處於離線狀態(網路模組24沒有連接至網路101)時，初始網頁P1內嵌有至少一個內嵌框架視窗f1，且關於Web API的網址被載入至內嵌框架視窗f1。因此，初始網頁P1包括至欲連結至上述網址的內嵌框架視窗f1，上述內嵌框架視窗f1例如可透過HTML語法「＜iframe src="要嵌入的網址" width="寬度" height="高度"＞＜/iframe＞」來實現。

因為電子裝置111處於離線狀態，依據內嵌框架視窗f1的網址而產生的連結請求無法被成功傳送至網路伺服器。此時，介於瀏覽器與網路伺服器之間的服務代理元件SW1可監測上述連結請求，並基於上述連結請求的網址而從瀏覽器存儲45當中取得離線執行資料43。透過服務代理元件SW1的協助，電子裝置111的瀏覽器可運行離線執行資料43而產生離線介面網頁P2，並將離線介面網頁P2呈現於內嵌框架視窗f1。

之後，響應於經由初始網頁P1接收一使用者指令，而電子裝置111可透過初始網頁P1的API請求模組54產生啟用Web API的一業務請求訊息58。業務請求訊息58將透過一視窗通訊元件而被傳送至內嵌框架視窗f1內的離線介面網頁P2。上述視窗通訊元件用以允許兩個視窗間的跨域資料傳遞，其例如是HTML規範底下的Window.postMessage()。

接著，透過呈現於內嵌框架視窗f1的離線介面網頁P2，對應於業務請求訊息59的一業務回覆訊息58被產生。詳細而言，離線介面網頁P2內的訊息事件處理模組51將響應於接獲業務請求訊息58而被觸發，並呼叫API回覆模組52來解析業務請求訊息58內的指定操作與規則。藉此，響應於訊息事件處理模組51接獲業務請求訊息58，API回覆模組52與離線資料模組53被呼叫去讀寫瀏覽器存儲45當中的離線資料。離線介面網頁P2的API回覆模組52完成業務請求訊息58內的指定操作之後可產生業務回覆訊息59。之後，透過視窗通訊元件將業務回覆訊息59回傳給初始網頁P1的訊息事件處理模組55，以驅動初始網頁P1依據業務回覆訊息59顯示網頁內容給使用者。於一實施例中，業務請求訊息58與業務回覆訊息59以結構化字串語言進行傳遞，而結構化字串語言例如是JSON或XML等程式語言，其適於傳遞大量且結構複雜的資料，更適用HTML規範底下的Window.postMessage()。

於一應用範例中，假設使瀏覽器呈現一電商平台的離線網頁(亦即初始網頁)，而有關於一超商企業之Web API的離線網頁程式碼與超商門市資料(亦即離線執行資料)也都儲存於瀏覽器存儲當中。如此一來，當使用者於網路離線情境下在電商平台的離線網頁上下達索取超商門市資料的指令時，電商平台的離線網頁內的內嵌框架網頁可以觸發服務代理元件從瀏覽器存儲當中取得超商企業之Web API的離線網頁程式碼以及其他超商門市資料。透過運行超商企業之Web API的離線網頁程式碼以及存取瀏覽器存儲當中的離線資料，符合使用者指令的超商門市資料可以被回傳至電商平台的離線網頁上而呈現。換言之，超商企業所提供的Web API是於離線情境下被使用的，致使使用者可以獲取預期中的網路服務。

圖6是根據本發明的一實施例所繪示的離線更新程式的方法的流程圖。本實施例的離線更新程式的方法的相關實施細節以及相關裝置特徵可由上述關於圖1至圖5的各實施例的敘述當中，獲得足夠的教示、建議以及實施方式，在此不再加以重複贅述。

請參照圖6，於步驟S601，當網路模組連接至網路時，安裝或更新服務代理元件，並取得網頁應用程式介面的離線執行資料。於步驟S602，將離線執行資料儲存於瀏覽器存儲。於步驟S603，透過初始網頁的內嵌框架視窗，嘗試經由網路連結至提供網頁應用程式介面的網路伺服器。於步驟S604，判斷是否連接至網路。若步驟S604判斷為是，於步驟S612，當網路模組連接至網路時，經由網路連結至提供網頁應用程式介面的網路伺服器，並透過網頁應用程式介面提供網路服務。

若步驟S604判斷為否，於步驟S605，當網路模組未連接至網路時，透過內嵌框架視窗的網址觸發服務代理元件，而透過服務代理元件從瀏覽器存儲取得網頁應用程式介面的離線執行資料。於步驟S606，當網路模組未連接至網路時，透過瀏覽器運行離線執行資料而產生離線介面網頁。於步驟S607，將離線介面網頁呈現於內嵌框架視窗。於步驟S608，響應於經由初始網頁接收使用者指令，而透過初始網頁產生啟用網頁應用程式介面的業務請求訊息。於步驟S609，透過視窗通訊元件將業務請求訊息傳送至內嵌框架視。於步驟S610，透過呈現於內嵌框架視窗的離線介面網頁，產生對應於業務請求訊息的業務回覆訊息。於步驟S611，透過視窗通訊元件將業務回覆訊息回傳給初始網頁。

綜上所述，本發明提出的網頁應用程式介面的離線運行方法與電子裝置，可於連網狀態由網路伺服器取得服務代理元件以及有關於Web API的離線執行資料，並於未連網狀態藉由內嵌框架視窗來觸發服務代理元件取得有關於Web API的離線執行資料。因此，當電子裝置未連接至網路時，透過運行瀏覽器存儲當中有關於Web API的離線執行資料，使用者還是可以透過Web API獲取對應的網路服務。如此一來，即便電子裝置當前是處於未連網的狀態，Web API並不會受限於僅能於連線情境使用，而網路服務間的串接也不會因為離線情境而中斷。

雖然本發明已以實施例揭露如上，然其並非用以限定本發明，任何所屬技術領域中具有通常知識者，在不脫離本發明的精神和範圍內，當可作些許的更動與潤飾，故本發明的保護範圍當視後附的申請專利範圍所界定者為準。

10‧‧‧網路服務系統

51‧‧‧訊息事件處理模組

111‧‧‧電子裝置

52‧‧‧API回覆模組

121‧‧‧網路伺服器

53‧‧‧離線資料模組

101‧‧‧網路

54‧‧‧API請求模組

21‧‧‧輸入介面

55‧‧‧訊息事件處理模組

22‧‧‧輸出介面

58‧‧‧業務請求訊息

23‧‧‧儲存電路

59‧‧‧業務回覆訊息

24‧‧‧網路模組

P1‧‧‧連線網頁

25‧‧‧處理器

P2‧‧‧離線介面網頁

40‧‧‧瀏覽器

S1‧‧‧網路連線狀態

41‧‧‧網站

S2‧‧‧網路離線狀態

42‧‧‧元件安裝與更新程序

f1‧‧‧內嵌框架視窗

43‧‧‧離線執行資料

SW1‧‧‧服務代理元件

45‧‧‧瀏覽器存儲

46、47‧‧‧離線資料

S301~S304、S601～S612‧‧‧步驟

圖1是根據本發明的一實施例所繪示的網路系統的示意圖。 圖2是根據本發明的一實施例所繪示的電子裝置的示意圖。 圖3是根據本發明的一實施例所繪示的網頁應用程式介面的離線運行方法的流程圖。 圖4是根據本發明的一實施例所繪示的電子裝置處於網路連線狀態與網路離線狀態的示意圖。 圖5是根據本發明的一實施例所繪示的基於業務請求訊息產生並回傳業務回覆訊息的示意圖。 圖6是根據本發明的一實施例所繪示的網頁應用程式介面的離線運行方法的流程圖。

Claims (10)

1. 一種網頁應用程式介面的離線運行方法，用於具有一網路模組的一電子裝置，其中該電子裝置的一瀏覽器呈現一初始網頁，所述方法包括： 透過該初始網頁的一內嵌框架視窗，嘗試經由網路連結至提供一網頁應用程式介面的一網路伺服器； 當該網路模組未連接至網路時，透過該內嵌框架視窗的網址觸發一服務代理元件，而透過該服務代理元件從一瀏覽器存儲取得該網頁應用程式介面的一離線執行資料； 當該網路模組未連接至網路時，透過該瀏覽器運行該離線執行資料而產生一離線介面網頁；以及 將該離線介面網頁呈現於該內嵌框架視窗。
2. 如申請專利範圍第1項所述的網頁應用程式介面的離線運行方法，所述方法更包括： 當該網路模組連接至網路時，安裝或更新該服務代理元件，並取得該網頁應用程式介面的該離線執行資料；以及 將該離線執行資料儲存於該瀏覽器存儲。
3. 如申請專利範圍第1項所述的網頁應用程式介面的離線運行方法，所述方法更包括： 響應於經由該初始網頁接收一使用者指令，而透過該初始網頁產生啟用該網頁應用程式介面的一業務請求訊息； 透過一視窗通訊元件將該業務請求訊息傳送至該內嵌框架視窗； 透過呈現於該內嵌框架視窗的該離線介面網頁，產生對應於該業務請求訊息的一業務回覆訊息；以及 透過該視窗通訊元件將該業務回覆訊息回傳給該初始網頁。
4. 如申請專利範圍第3項所述的網頁應用程式介面的離線運行方法，其中該業務請求訊息與該業務回覆訊息以結構化字串語言進行傳遞。
5. 如申請專利範圍第3項所述的網頁應用程式介面的離線運行方法，其中透過呈現於該內嵌框架視窗的該離線介面網頁，產生對應於該業務請求訊息的該業務回覆訊息的步驟包括： 透過該離線介面網頁解析該業務請求訊息內的指定操作與規則，而產生符合該規則的業務回覆訊息。
6. 一種電子裝置，包括： 一儲存電路； 一網路模組；以及 一處理器，耦接至該儲存電路及該網路模組，運行一瀏覽器而呈現一初始網頁，其中該處理器用以： 　　透過該初始網頁的一內嵌框架視窗，嘗試經由網路連結至提供一網頁應用程式介面的一網路伺服器； 　　當該網路模組未連接至網路時，透過該內嵌框架視窗的網址觸發一服務代理元件，而透過該服務代理元件從一瀏覽器存儲取得該網頁應用程式介面的一離線執行資料； 　　當該網路模組未連接至網路時，透過該瀏覽器運行該離線執行資料而產生一離線介面網頁；以及 　　將該離線介面網頁呈現於該內嵌框架視窗。
7. 如申請專利範圍第6項所述的電子裝置，其中該處理器更用以： 當該網路模組連接至網路時，安裝或更新該服務代理元件，並取得該網頁應用程式介面的該離線執行資料；以及 將該離線執行資料儲存於該瀏覽器存儲。
8. 如申請專利範圍第6項所述的電子裝置，其中該處理器更用以： 響應於經由該初始網頁接收一使用者指令，而透過該初始網頁產生啟用該網頁應用程式介面的一業務請求訊息； 透過一視窗通訊元件將該業務請求訊息傳送至該內嵌框架視窗； 透過呈現於該內嵌框架視窗的該離線介面網頁，產生對應於該業務請求訊息的一業務回覆訊息；以及 透過該視窗通訊元件將該業務回覆訊息回傳給該初始網頁。
9. 如申請專利範圍第8項所述的電子裝置，其中該業務請求訊息與該業務回覆訊息以結構化字串語言進行傳遞。
10. 如申請專利範圍第8項所述的電子裝置，其中該處理器更用以：透過該離線介面網頁解析該業務請求訊息內的指定操作與規則，而產生符合該規則的業務回覆訊息。