可行解決方案

既然開發技術相同，Write once and run any devices的想法應該是可能的，於是可行的解決方案有哪些？ S1.Mobile App一開始就轉址到網站伺服器。 這是最簡單且可行的解決方案，而且網站伺服器的修改可以即時展現在MOBILE APP的畫面呈現上，只要網站應用程式有實作RWD的技術，即可以無縫的完成網站應用程式與MOBILE APP的實作。 缺點就是無法善用手機端的資源，也沒辦法進行一些離線操作或是網路斷線等偵測。

S2.將入口網頁放到MOBILE APP中。 這解決方案在於如何提供一個相同的入口網頁，讓MOBILE APP與網站應用程式相同，但因為執行的環境不同，所以需要載入的JavaScript函示庫又有所差異。

• 網頁應用程式(Web App)提供給前端終端機包含自行開發的程式JavaScript與畫面CSS、第三方提供的套件以及呈現畫面用的HTML (Developing JS/CSS, Third party JS/CSS packages, and HTMLs)
• 而手機應用程式(Mobile App)除了上述三項元件外，還會有一項是與裝置相關的JavaScript套件 (Device-related JS/CSS)，用來存取手機內的資源，如通訊錄、GPS等。
• 而桌面使用者(Desktop user)通常是透過一般的瀏覽器(Web Browser)，如IE, Chrome, Safari, Firefox等來存取Web App
• 手機應用程式使用者(Mobile app user)則是透過開發工具中內附的客製化瀏覽器(custom browser)如Cordova Webkit來存取Mobile App。

• Portal page是指應用程式的進入畫面，
  圖三 一致性開發平台概念說明

• Desktop User透過瀏覽器來存取進入頁面(portal page)，進而得知需要的DevJS, ThirdJS。

• Mobile App User透過Mobile App來存取進入頁面(portal page) ，進而得知需要的DevJS, ThirdJS, DrJS。
• 所以Portal page只需要判斷執行方式是透過遠端主機(Web server)傳送過來執行(狀況一)，還是由本地檔案系統開啟執行(狀況二)

1. 得知遠端主機網址，以抓取後續的DevJS與HTMLs。
2. 需先手動指定遠端主機網址，並從遠端主機載入DevJS與HTMLs，本地端載入DrJS

• (PS: ThirdJS可以從third party的網站下載)
• 此外，遠端主機(Web server)所提供的HTMLs，必須實作跨來源資源共享(Cross-Origin Resource Sharing: CORS)，因為狀況二讀取HTMLs的方式屬於跨來源資源存取。

Portal page source code

…
switch(window.location.protocol) {
case 'http:':
case 'https:'://remote file over http or https – desktop user
    BASE_URL = get_remote_baseurl();
    break;
case 'file:'://local file system executed – mobile app user
    BASE_URL = set_remote_baseurl();
    // dynamice load device-related JS files
    includeJs("cordova.js");
    includeJs("js/index.js");
     break;
…