簡介：弱網環境無影響、版本升級無感知

隨著5G、大數據、人工智能技術的應用，各類傳統行業紛紛大力推進數字化轉型升級。

而受疫情的影響，教育行業也在大幅加速線上化轉型進程，各類在線教育應用也在借助各種力量拓張自己的移動端市場領域。

「荷小魚」作為一款學科啟蒙在線學習應用，同樣也在這條賽道上，思考如何才能在林立的競對競爭中拔得頭籌，獲得更多用戶的青睞？

這個問題的解法有很多，但第一步肯定是提升用戶體驗、優化應用性能。

「荷小魚」亟待解決的問題

原 App 內的部分頁面，是通過 WebView 打開 H5 的方式來進行展示的，所以在打開一些重型頁面時會出現以下的一些問題：

1. 網絡問題導致白屏；

2. 瀏覽器兼容性問題；

3. 無離線下發功能；

4. 無法及時更新資源。

作為啟蒙教育應用，「荷小魚」的 App 頁面除了需要嵌入基礎框架代碼和頁面邏輯代碼外，還需要嵌入多個字體庫和多個音視頻文件。

資源的多而大，導致頁面非常容易收到網絡的影響：網絡不穩定時容易文件丟失、白屏加載資源時間長、造成網絡線程阻塞等。

同時，也讓 App 更新資源變得困難了很多：無法實時更新下發最新資源、緩存失效等。為技術團隊在更新版本和調修 Bug 上造成了很大的阻礙。

“H5 容器+動態發布”

經過了多方調研，「荷小魚」最終選擇使用 mPaaS“H5 容器 + 動態發布服務”作為技術選型，用來解決 App 現階段需要解決的難題。

首先，通過 mPaaS H5 容器中自帶的 UC 內核瀏覽器，可以從根本上解決瀏覽器兼容性問題。

此外，mPaaS H5 容器支持離線包訪問。

離線包是將包括 HTML、JavaScript、CSS 等頁面內靜態資源打包到一個壓縮包內。預先下載該離線包到本地，然后通過客戶端打開，直接從本地加載離線包，從而最大程度地擺脫網絡環境對 H5 頁面的影響。

通過離線包的方式把頁面內靜態資源嵌入到應用中并發布，當用戶第一次開啟應用的時候，就無需依賴網絡環境下載該資源，而是馬上開始使用該應用。

最后，配合動態發布服務能力，在推出新版本或是緊急發布的時候，開發者可以把修改的資源放入離線包，通過更新配置讓應用自動下載更新。因此，開發者無需通過應用商店審核，就能讓用戶及早接收更新。對頁面資源進行動態更新，

應用的開發調試和發布部署

感謝來自「荷小魚」的前端工程師雷文偉，通過實操演示，展示如何接入 mPaaS 以及如何完成應用發布。

點擊閱讀原文，觀看完整視頻。

弱網環境無影響、版本升級無感知

用戶體驗，是每一個應用都需要面臨的生死題。尤其是在雨后春筍般的在線教育應用市場中，應用的性能對用戶的留存效果顯得更是尤為重要。

移動應用開發者從 DevOps 開始，到開發、性能監控、性能網絡優化解決，在這一整套閉環流程中，通過借助 mPaaS 具備的開發測試、日志分析、卡頓分析、問題修復模式、熱修復等各項能力，即可獲取弱網環境無影響、版本升級無感知的用戶體驗。

E · N · D

點擊文末閱讀原文，觀看CodeHub#4全程回放。

原文鏈接：https://developer.aliyun.com/article/783322?

版權聲明：本文內容由阿里云實名注冊用戶自發貢獻，版權歸原作者所有，阿里云開發者社區不擁有其著作權，亦不承擔相應法律責任。具體規則請查看《阿里云開發者社區用戶服務協議》和《阿里云開發者社區知識產權保護指引》。如果您發現本社區中有涉嫌抄襲的內容，填寫侵權投訴表單進行舉報，一經查實，本社區將立刻刪除涉嫌侵權內容。 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的荷小鱼 x mPaaS | 借助 H5 容器改善 App 白屏、浏览器兼容问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。