什麼是 SAP UI5 的 Hybrid Web Containers

注销發表於2022-02-20
UIWebAI

我們可以將移動應用程式開發為包含原生應用程式包裝器（例如 PhoneGap），和用於在使用者介面上顯示內容的 HTML 檢視器的混合應用程式(Hybrid Web Container)。

混合應用的優勢在於可以在應用商店中釋出它們。此外，透過將應用程式程式碼和 SAP UI5 庫檔案嵌入到混合容器中，使用者只需安裝一次檔案，無需每次啟動應用程式時下載。

但是庫的大小變得很重要，因為每個使用者都必須安裝檔案，而在 Web 應用程式中，庫部署在伺服器上，使用者只需要在執行時下載庫的所需部分。

要在混合應用程式中包含需要的資源，可以使用靜態移動執行時包 openui5-runtime-mobile*.zip。該包不包含在 SAP UI5 中，而是包含在開源版本 OpenUI5中。

這些包的庫大小相當小，因為最有可能不需要的內容已被刪除，例如測試頁面。一個 package 包含所有 JavaScript 檔案的除錯版本以及最佳化和最小化的版本。因此，可以將包用於生產用途以及除錯目的。要在應用程式包裝器（例如 PhoneGap）中使用此包，請將包解壓縮到應用程式開發專案的相應資源位置。然後，應用程式包裝器構建包含檔案並使其在執行時可用。

為了控制檔案構建出的包檔案尺寸，它只包含最有可能使用的控制元件庫，而不是所有控制元件庫。根據混合應用程式的不同，可能需要透過從執行時的相應資料夾複製庫來新增庫，或者刪除庫以減小包大小，從而減少使用者的安裝大小。

該檔案包含以下控制庫：

  • sap.f
  • sap.m
  • sap.tnt
  • sap.ui.core
  • sap.ui.layout
  • sap.ui.suite
  • sap.ui.unified
  • sap.uxap

包含或不包含哪些庫的決定可能不存在絕對客觀的標準。它僅基於經驗法則，並且無論如何都需要對許多應用程式進行調整。

此外，移動/混合包不包括通常不需要的某些型別的檔案。每個客戶實際的應用場合都可能會有所不同，因此需要根據特定應用的要求新增相應的檔案。本來 SAP UI5 應用裡設計出的 library-preload.js，包含了該 library 裡的所有控制元件。採用這種檔案來載入庫，可以減少 HTTP 請求數量。

但是 SAP UI5 的 Hybrid Web Containers 不再需要 library-preload.js 檔案，因為在混合應用程式的執行環境裡是從本地載入庫檔案，沒有任何的 HTTP 延遲。SAPUI5 預設會嘗試訪問它們，因此您可能會在日誌檔案或開發人員工具中看到載入這些檔案的嘗試失敗。但是，這些錯誤訊息並沒有什麼影響，您可以透過宣告不存在此類檔案並在 SAPUI5 引導指令碼標記中設定以下配置來消除它們：

data-sap-ui-preload=""

package 尺寸的最佳化

儘管靜態包足夠小，可以包含在混合應用程式中，但仍然可以透過刪除其他檔案來進一步減小大小並最佳化特定應用程式的內容。以下列表提供了一些示例：

  • 如果不需要相應的控制庫，您可以刪除所有庫資料夾。例如，在 OpenUI5 版本中可以刪除 suite 和 unified 資料夾。
  • 在每個/resources/sap/ ... /themes資料夾中，可以刪除所有主題資料夾，但正在使用的主題資料夾除外。

device ready event

混合 Web 容器需要一些時間進行初始化。在此期間，AJAX 請求的傳送被阻止，這意味著一旦傳送 AJAX 請求，JavaScript 程式碼就會停止，程式碼執行也會停止。這會導致 UI 處於 freeze 狀態。

SAPUI5 中的 OData 模型在內部使用 AJAX 請求，因此必須在混合容器準備好後再進行 OData 模型初始化，以避免使用者介面凍結。初始化後，混合 Web 容器會觸發一個 device ready 事件。為了避免 UI freeze，請將建立 OData 模型並進行模型繫結的相關程式碼，移至 device ready 事件偵聽器中。

例子：


<!-- put the following code in the beginning of the application code -->
function appReady(){
    sap.ui.getCore().setModel(new sap.ui.model.odata.v2.ODataModel(<ODATA_URL>));
}
<!-- bind to the deviceready event -->
document.addEventListener("deviceready", appReady, false);
</script>

跨域限制(Cross Domain Restrictions)

如果使用 AJAX 從外部伺服器或服務載入資料，則必須在混合 Web 容器內配置外部域，以使 AJAX 請求透過跨域限制。

相關文章