hybrid探索與實現

来源:https://www.cnblogs.com/88223100/archive/2023/05/29/Exploration-and-Implementation-of-Hybrid.html
-Advertisement-
Play Games

hybrid混合開發是一種離線移動應用開發方式,它結合了Web技術和原生技術,以網頁的形式嵌入到一個原生容器中。 ...


1.背景動機

1.1

hybrid是什麼

hybrid混合開發是一種離線移動應用開發方式,它結合了Web技術和原生技術,以網頁的形式嵌入到一個原生容器中。

 

1.2

為什麼選擇hybrid

1.實現更豐富的用戶體驗。hybrid app可以調用設備原生功能,如攝像頭、定位、藍牙等,提供更豐富的用戶體驗,這直接滿足了用戶使用app的需求。

2.更快速地獲取新功能。通過熱更新,用戶無需手動更新app就可以獲取最新的功能和內容,這大大提高了用戶使用體驗,用戶無需等待新版本發佈就可以使用新功能。

3.統一的交互界面。hybrid使用web技術開發界面,可以實現在iOS和Android平臺高度統一的界面和交互,這簡化了用戶的學習成本,用戶無需適應不同平臺下界面差異帶來的使用障礙。

4.更廣泛覆蓋用戶。一套hybrid代碼可以發佈到iOS和Android多個平臺,這覆蓋更廣泛的用戶群體,無論用戶使用什麼手機系統,都能使用該app,這提高了用戶使用可及性。

 

2.整體架構

圖片

在整體架構上主要涉及到了離線包管理平臺、app運行時邏輯,大致的思路:

1.h5工程打包完成的靜態資源通過離線包管理工具壓縮上傳至cdn和離線包管理平臺;
2.app通過介面獲取需要離線載入的資源包配置規則;
3.當h5命中需要離線的資源後,app會載入本地的靜態資源返回給網頁;

 

2.1

離線包管理系統

►2.1.1離線包管理平臺

1. 提供離線配置能力,app、h5接入控制與管理、應用離線能力開關;

2. 提供離線包版本管理,版本號、發佈時間查看、版本回退操作;

3. 離線包的發佈,app配置文件的更新,每次離線包發佈會同步更新對應客戶端配置文件;

 

►2.1.2離線包管理工具

1. 打包發佈腳本發佈到之家私有源,以腳手架命令形式調用,提供打包、上傳命令;

2. 業務方結合自身編譯上線流程進行調用,上傳完成則自動進行發佈;

3. 前端靜態資源按照頁面/工程緯度打包成zip;

4. zip包含js/css/img/pages/config.json配置文件;

 

腳本安裝:

// 腳本安裝
npm i @auto/dt-fe-cli
// 指定腳本的配置文件,打包並上傳至伺服器,預設配置文件為 config.json,可以使用 --config 指定配置文件
dt-fe-cli offline --config hybrid-config.json

資源包目錄

h5id
├── js/
├── css/
├── img/
├── pages
│   ├── index.html
│   └── list.html
└── config.json(配置文件) 

資源包配置文件:

  • h5Id-對應h5應用唯一標識

  • version-版本號

  • webpages-需要匹配替換的網頁列表

  • resources-需要匹配替換的靜態資源列表

  • web3d_t-需要匹配替換的3d資源

{
  "id": "432e53f06a",
  "h5Id": "432e53f06a",
  "version": "1.0.19",
  "webpages": [
    {
      "remoteUrl": "nets.xxx.com.cn/direction/68000",
      "path": "432e53f06a/1.0.19/direction/index.html",
      "contentType": "text/html"
    }
  ],
  "resources": [
    {
      "remoteUrl": "nets.xxx.com.cn/direction/css/2dScene.css",
      "path": "432e53f06a/1.0.19/direction/css/2dScene.css",
      "contentType": "text/css"
    },
    ...
  ],
  "appRules": {
    "ios": [
      "11.39.0",
      "infinite"
    ],
    "android": [
      "11.39.0",
      "infinite"
    ]
  },
  "web3d_t": [
    {
      "remoteUrl": "vrs3.xxx.cn/xxxx/vr_exhibition/q1VIB86H/Lsmt_FG01_ChaoPin",
      "downloadUrl": "https://vrs3.xxx.cn/xxxx/VR/MtHLNe/Lsmt_FG01_ChaoPin.zip",
      "path": "432e53f06a/1.0.19/Lsmt_FG01_ChaoPin"
    },
    ...
  ],
  "url": "http://nfiles3three.xxx.com.cn/mefcdn-xxxx/dt-fe-cli/offline/432e53f06a-1.0.19.zip"
}

 

 

►2.1.3發佈流程

1.在代碼打包編譯階段添加dt-fe-cli offline命令根據配置文件、靜態資源,生成資源包的資源映射配置,將靜態資源打包並上傳至後臺伺服器;

2.上傳至管理平臺的資源包會更新關聯測試環境應用的離線包配置信息,用於測試驗證;

3.測試驗證通過之後調用管理平臺發佈介面將驗證通過的離線包發佈至線上;

圖片

2.2

容器系統

圖片

►2.2.1webview管理

1.設置特定路由協議開啟容器;

2. 通過webclient攔截器攔截H5所有資源請求,匹配本地緩存邏輯:命中緩存時直接返回本地資源;未命中緩存則轉發給WebView進行預設處理;

3. 關閉Webview時檢查更新-監聽頁面關閉事件,關閉頁面時觸發預載入邏輯及離線包管理邏輯;

 

►2.2.2離線包管理

1. 檢查更新:調用預載入介面,結合離線包管理平臺邏輯,處理離線包更新;

2. 離線包下載:本地開啟多線程併發下載離線包,監聽下載結果,處理離線包解壓等流程;

3. 磁碟空間管理

(1)壓縮包解壓完成後刪除壓縮包;

(2)離線包更新後清理舊版本資源;

(3)設置離線包空間上限,結合LRU演算法進行離線包空間管理;

 

►2.2.3環境區分

1. 為了在測試階段快速判斷是否命中離線包資源;

2. 測試環境當html命中離線邏輯時,客戶端通過webview註入指定的js;

3. js在頁面插入浮動元素,標識當前頁面是否命中離線資源,標識區分2d/3d離線資源;

 

►2.2.4更新時機

1. 第一次冷啟動,app冷啟動20s後全量下載離線包;

2. 關閉webview後會更新資源;

3. 掃碼打開webview會立即下載當前url的離線資源包;

 

►2.2.5容災

當容器觸發以下情況時如果當前h5離線包存在會使用離線包資源,否則會使用線上資源;

1. 包解壓失敗;

2. 介面超時,離線包下載在網路狀態不好時,會有下載失敗的情況;

3. 下載離線資源失敗;

 

3.總結

目前這個方案已經在我們的項目中實際使用,實現了與業務的無縫融合,解決了頁面載入性能問題、白屏問題,大大提升了用戶的使用體驗。

 

作者|王卓 

本文來自博客園,作者:古道輕風,轉載請註明原文鏈接:https://www.cnblogs.com/88223100/p/Exploration-and-Implementation-of-Hybrid.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 《公務員考試基礎知識題庫ACCESS資料庫》搜集了大量公務員考試試題,包括公共基礎知識試題、行政職業能力試題、法律基礎知識試題、公安基礎知識試題等。 分類記錄統計情況為:法律基礎知識試題(共1359條)、公安基礎知識試題(共1709條)、公共基礎知識試題(共2905條)、行政職業能力試題(共6613 ...
  • 《求職面試寶典大全ACCESS資料庫》包含:1-穿著打扮、2-隨身攜帶、3-場景指導、4-考官分析、5-考官問題、6-回答參考表、7-面試大全。雖然有些表的記錄數不多,但勝在信息全面以及考官問題及答案的全面。 問題類型記錄數為:待遇問題(10條)、個人素養(10條)、教育家庭(10條)、經驗問題(1 ...
  • 因為簽於網站笑話不是採用微博型(一句或兩句短篇可以採用250長度的文本型存儲),而是所以文章內容型,所以內容保存的欄位是 Microsoft Access 資料庫里的備註類型。 資料庫內容經過整理,格式比較統一,比如不會有多餘的段落或不整齊的段落;分類比較集中,只有爆笑男女(305)、兒童笑話(59 ...
  • [TOC](快速上手kettle二 小試牛刀) ### 一 、前言 上一期中大概介紹了下kettle,並已經把kettle下載安裝完了。 這一期我們就來簡單體驗下kettle怎麼進行數據轉換的。 ### 二 、兩個小目標 我們這裡呢就以兩個小案例來體驗下kettle - 將csv文件通過kettle ...
  • 這是從互聯網上搜集的各種初中語文作文20000篇,經過完美的格式內容整理,包含大量《中考滿分作文》及《中考作文指導》資料,資料庫按年級和分類可以快速的為初中作文提供最齊全的參考。 年級包含:初中二年級(2377)、初中三年級(1988)、初中一年級(15465)。分類包含:讀後感(778)、話題(1 ...
  • app界面逐漸複雜時,我們不得不考慮去優化界面性能。本文中介紹的例子在開發中是很常見的,如果不瞭解MediaQuery.of的機制,可能會引起大量使用此方法的界面發生重繪操作,造成頁面卡頓、幀率下降。我們詳細分析了背後的源碼邏輯,介紹瞭解決辦法,希望能給大家的調優工作提供些許幫助。 ...
  • “青春如同奔流的江河,一去不回來不及道別”,老男孩這首歌戳中了太多職場中年男人的心酸苦楚,面對經濟下行壓力、互聯網行業變革以及中年職場危機,互聯網人應該如何應對?如何建立和現實叫板的能力? 有2位在互聯網創業多年的開發者,經歷了從PC互聯網到移動互聯網的發展變遷,踩過不少坑,一路磕磕碰碰走到現在,放 ...
  • 中文版的笑話似乎日益更新,從來不缺少,但是英文版的似乎因為在中國的受眾少從而缺少這方面的展示,而今天獲得的就是近2萬的英文笑話內容,將將之存放到由Microsoft Office Access 2003 創建的資料庫中。截圖下方有顯示“共有記錄數”,截圖包含了表的所有欄位列。該數據提供ACCESS數 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...