隨著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全程回放。