[發明專利]客戶端離線化H5頁面加載方法、裝置、計算機設備及介質

有效

• 申請號: 202110575132.7
• 申請日: 2021-05-26
• 公開（公告）號: CN113315829B
• 公開（公告）日: 2022-08-12
• 發明（設計）人: 陳晟豪
• 申請（專利權）人: 平安普惠企業管理有限公司
• 主分類號: H04L67/56
• 分類號: H04L67/56;H04L67/568;G06F16/957
• 代理公司: 深圳市世聯合知識產權代理有限公司 44385
• 代理人: 汪琳琳

本申請實施例屬于頁面展示領域，涉及一種客戶端離線化H5頁面加載方法，包括預先掛載注入指令至腳本環境，并利用注入指令，將原生指令加載至腳本環境，將創建的第一網絡請求對象內的參數重寫，得到第二網絡請求對象，將頁面發起的所有網絡請求進行攔截，根據請求方式確定網絡請求需要代理轉發時，根據請求標識由第二網絡請求對象將網絡請求轉發至服務端，從服務端獲取加載頁面所需的資源數據，根據資源數據調用原生指令加載出頁面，并將資源數據緩存至本地。本申請還提供一種客戶端離線化H5頁面加載裝置、計算機設備及介質。此外，本申請還涉及區塊鏈技術，網絡請求可存儲于區塊鏈中。本申請可以加速H5頁面展示，減少網頁視圖加載時的白屏時間。

技術領域

本申請涉及頁面展示技術領域，尤其涉及一種客戶端離線化H5頁面加載方法、裝置、計算機設備及介質。

背景技術

Native APP(原生應用)需要開發人員根據不同系統平臺使用不同語言進行開發實現，不僅開發成本及周期長，而且用戶升級成本高。隨著行業及技術的發展，企業為了追求開發成本、產品質量、用戶體驗和開發效率，前端H5APP(Hyper Text MarkupLanguage5.0Application，H5應用)和客戶端Native APP混合開發的模式是必然的趨勢。同時也因為H5開發的諸多優勢(如跨平臺、跨終端、更新快、易傳播等)使得客戶端中H5資源占比率逐步增加。

為了加快客戶端加載H5頁面的速度，現在H5頁面的呈現方法中，通常是以離線包的形式，將H5所需的文件資源全部統一打包至一個ZIP文件內，客戶端Native下載離線包后解壓使用，再WebView里加載解壓后的H5文件。但是，這種方式極大程度上依賴H5的改造支持，構造離線包，創建分發服務端平臺供客戶端下載，整個過程需要額外制作離線包文件，不僅耗流量而且響應時間較長。

發明內容

本申請實施例的目的在于提出一種客戶端離線化H5頁面加載方法、裝置、計算機設備及介質，以解決相關技術中額外制作離線包文件，工作量大，同時造成流量消耗以及H5頁面加載速度慢的技術問題。

為了解決上述技術問題，本申請實施例提供一種客戶端離線化H5頁面加載方法，采用了如下所述的技術方案：

預先掛載注入指令至腳本環境，并利用所述注入指令，將原生指令加載至所述腳本環境；

創建第一網絡請求對象，重寫所述第一網絡請求對象內的參數得到第二網絡請求對象，并將頁面發起的網絡請求的請求標識和請求方式添加至所述第二網絡請求對象中；

對所有所述網絡請求進行攔截，根據所述請求方式確定所述網絡請求是否需要代理轉發，當所述網絡請求為需要代理轉發時，則根據所述請求標識由所述第二網絡請求對象將所述網絡請求轉發至服務端；

在接收到所述服務端發送的處理完成指令時，從所述服務端獲取到加載頁面所需的資源數據；及

根據所述資源數據調用所述原生指令加載出所述頁面，并將所述資源數據緩存至本地。

進一步的，所述預先掛載注入指令至腳本環境的步驟包括：

創建腳本文件，在所述腳本文件內聲明注入指令；

創建網頁視圖，并將所述腳本文件聲明的所述注入指令掛載至所述網頁視圖的腳本環境。

進一步的，所述利用所述注入指令，將原生指令加載至所述腳本環境的步驟包括：

按模塊加載原生指令的指令名稱，利用所述注入指令，將所述模塊的模塊名稱和所述模塊對應的所有所述指令名稱加載至所述腳本環境；

將所述模塊名稱和對應的所有所述指令名稱，以預設存儲方式緩存至所述腳本環境的腳本對象內，并組裝形成偽協議。