Cordova深度定製的H5容器實際應用

2021-09-11 10:18:23 字數 3619 閱讀 8391

1.基於cordova互動外掛程式化,打包提供給h5使用,h5只需要引入乙個檔案就可以使用native提供的各種原生功能,包括但不限於fetch,map,io操作,檔案操作等。

2.提供「離線包」策略,提公升渲染速度和避免不必要的網路請求,進行構建微應用。

3.提供三方授權服務,進行微應用的單點登入授權功能。

可見,通過運營商的網路上網,情況比較複雜,經過的節點太多;運營商的網路訊號強度變化頻繁,連線狀態切換快;網路延遲高、丟包率高;網路建立連線的代價高,傳輸速度快慢不等(從2g到4g,相差很大)。

1.壓縮html, js, css

壓縮**,尤其是js和css資源,壓縮後的大小可以降低至原來的1/3以下,有效節約流量。

2.避免30*/40*/50*的http status

200是乙個正常的response,我們在瀏覽器中開啟乙個網頁(後面會講如何針對移動端進行除錯),還會看到304,即命中瀏覽器快取。這兩種狀態是正常的http status。

302、301跳轉是常見的跳轉,尤其前一種,在我們進行鑑權的時候有時會用到,但這個做法要盡可能地優化,乙個頁面訪問,最多隻進行一次302跳轉即可,切忌頻繁地跳轉。

404、500,我們對自己開發的**比較注意,一般不會發生,但是有的時候,載入第三方庫,尤其是第三方庫中有自己load元件的操作,這時,404和500錯誤可能會在你不知不覺的時候發生。

3.資源的版本更新

業務的js和css可能經常會有更新,如果命中瀏覽器快取,可能會讓一些新的特性不能及時展現,甚至可能導致邏輯上的衝突。因此對於這些js、css的資源引入,最好用版本號或者更新時間來作為字尾,這樣的話,字尾不變,命中快取;字尾改變,瀏覽器自動更新最新的**。

4.介面資料快取

快取介面資料,在一些資料新舊敏感性不高的場景下很有作用,在非首次載入資料時候優先使用上次請求來的快取資料,可以讓頁面更加快速地渲染出來,而不用等待乙個新的http請求結束之後再渲染。

5.單頁應用

釘釘的審批微應用,使用的就是單頁架構。在這種架構下,基本不存在頁面跳轉的等待時間,只需要執行js邏輯觸發介面變化,最多進行一次網路請求,獲得服務端資料,其他資源均不需要再次請求。

6.資源離線

再快的網路互動,畢竟也是跨越了數個網路節點,因此一張、乙個js,優化到了極致,也照樣可能需要幾百毫秒的時間來獲得。因此想要打破這個極限,就要使用資源離線的策略。網頁**裡面載入網路資源的需求,就變成了直接載入本地檔案,速度自然得到再一次巨大的提公升。

7.預載入機制起初我們的h5**都是隨著應用一同發布的,這樣不同平台的應用自然會將相應的cordova.js打包到應用中,載入相應的cordova_plugin.js,初始化js外掛程式。由於應用逐漸走向平台化發展,那麼我們的問題來了,怎樣將我們的外掛程式給其他三方應用使用?讓其他系統可以方便的整合和使用?基於這樣的需求,我們引入了兩個自定義的js檔案,cordova-dynamic-loading.jspm-cordova.js。cordova-dynamic-loading.js需要在業務端**前引入,用於檢查cordova環境,並且根據客戶端系統,初始化不同的外掛程式。而pm-cordova.js是js-bridge介面封裝庫。

架構圖大致如下:

具體這兩個檔案的實現**由前端大神編寫的,這裡就不粘了,作為乙個菜鳥ios程式設計師,前端目前還尚處於學習中。當然框架內還提供了自定義的pm-cordova-mock.js可選引入,是pm-cordova.js的web端mock版本,本地開發業務進行測試時可以引入這個檔案替換pm-cordova.js。除此之外,平台內也同樣內建了一套相關**,三方應用完全可以不必整合外掛程式相關**也可以與平台進行互動。

uiwebview沒有提供設定useragent的介面,但是可以通過cordova框架內cdvuseragentutil類,設定useragent。

@inte***ce cdvuseragentutil : nsobject

+ (nsstring*)originaluseragent;

+ (void)acquirelock:(void (^)(nsinteger locktoken))block;

+ (void)releaselock:(nsinteger*)locktoken;

+ (void)setuseragent:(nsstring*)value locktoken:(nsinteger)locktoken;

@end

複製**

+ (void)setuseragent:(nsstring*)value locktoken:(nsinteger)locktoken

複製**

通過設定nsuserdefaults中useragent的值來修改,但是這種設定方法有乙個限制,需要在uiwebview的loadrequest之前呼叫才能生效(載入pdf比較特殊)。這是cordova原始碼中關於這個問題的描述。

- (nsstring*)useragent

//省略部分源**

_useragent = [nsstring stringwithformat:@"%@ %@", _useragent, @"[awv/v1.0.0;ad/ios]"];

return _useragent;

}複製**

cordova框架內提供對瀏覽器useragent的設定相關**,平台內對useragent做了一些定製化的內容,比如自定義了useragent引數,這裡的useragent實際上就是提供給上面cordova-dynamic-loading.js檔案進行解析使用的。實際上通過cordova原始碼可以看到還有一些包括對useragent的釋放等其他操作,這裡不做具體分析。關於cdvuseragentutil可以參考cordova原始碼解析(二)- 自定義useragent。

為什麼要提供離線包,前言也有說明,這裡再詳細說一下:

離線包統一由打包平台一鍵打包發布,從**獲取到壓縮,到生成zip包,再到發布一氣呵成,並相應的對版本號進行遞增,目前平台客戶端支援增量更新和全量更新,增量更新可以更節省流量,更新速度更快。全量更新可以保證版本更穩定,安全性更高。基於此,平台客戶端實現了應用的動態發布與更新以及線上bug的修復,不需要再重新打包發布。

客戶端通過不同應用的應用id擴充套件不同的應用安裝路徑,用於應用的安裝和開啟。 實際上在客戶端最終會有這樣的目錄結構:

else

if ([self.wwwfoldername rangeofstring:@"://"].location != nsnotfound) else

if([self.wwwfoldername hassuffix:@".bundle"]) else

}複製**

主要做的工作全部在nsstring* startfilepath = [self.commanddelegate pathforresource:[starturl path]];內實現,這行**會生成我們預設好的目錄檔案路徑。 cordova內部實際上預設載入的路徑為bundle,需要修改為我們指定的沙盒路徑然後去載入沙盒裡面相應的微應用進行ui展示。

應用有了,也提供了離線包策略,那麼三方應用怎麼登入平台?基於這個需求我們提供了oauth2服務,進行三方登入授權。這部分不在web容器範疇內,後續會具體分析。

H5深度剖析

前言 當代是手機市場的時代,所以手機端的需求比較大。在各大招聘 上的公司,對前端人員的技術要求大多都有移動端h5開發。所以學習移動端h5開發對於乙個前端開發人員來說是十分重要的。先說幾個概念 1 物理畫素 裝置畫素 螢幕的物理畫素,又被稱為裝置畫素,他是顯示裝置中乙個最微小的物理部件。任何裝置螢幕的...

h5應用資料加密 H5定製開發方案

正文共計 815字預計 產品特性 快速迭代 h5常用於輕量級應用,例如 活動營銷頁面 拉新等,而這些相對開發成本比較低,也可滿足市場需求進行快速迭代。專屬方案 所想即所得,為客戶量身定製策劃方案 多種定製 提供活動營銷 商業 遊戲有效等多種定製 全新互動 互動性強,視覺效果佳,使用者的感官體驗好,可...

如何具備H5遊戲定製的核心競爭力?

遊戲被成為第九藝術!玩法 文案 設計 體驗 數值等構建了一款遊戲的品質,只有各個環節天衣無縫的產品才能在整個市場擁有核心競爭力,當然,h5遊戲也不例外,那麼定製類h5遊戲如何才能擁有自己的核心競爭力呢?代入體驗良好 如果一款h5像白水一樣,無法波動使用者的情緒,那麼無疑它是一款失敗的產品,其實做起來...