簡(jiǎn)介：弱網(wǎng)環(huán)境無影響、版本升級(jí)無感知

隨著5G、大數(shù)據(jù)、人工智能技術(shù)的應(yīng)用，各類傳統(tǒng)行業(yè)紛紛大力推進(jìn)數(shù)字化轉(zhuǎn)型升級(jí)。

而受疫情的影響，教育行業(yè)也在大幅加速線上化轉(zhuǎn)型進(jìn)程，各類在線教育應(yīng)用也在借助各種力量拓張自己的移動(dòng)端市場(chǎng)領(lǐng)域。

「荷小魚」作為一款學(xué)科啟蒙在線學(xué)習(xí)應(yīng)用，同樣也在這條賽道上，思考如何才能在林立的競(jìng)對(duì)競(jìng)爭(zhēng)中拔得頭籌，獲得更多用戶的青睞？

這個(gè)問題的解法有很多，但第一步肯定是提升用戶體驗(yàn)、優(yōu)化應(yīng)用性能。

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

原 App 內(nèi)的部分頁面，是通過 WebView 打開 H5 的方式來進(jìn)行展示的，所以在打開一些重型頁面時(shí)會(huì)出現(xiàn)以下的一些問題：

1. 網(wǎng)絡(luò)問題導(dǎo)致白屏；

2. 瀏覽器兼容性問題；

3. 無離線下發(fā)功能；

4. 無法及時(shí)更新資源。

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

資源的多而大，導(dǎo)致頁面非常容易收到網(wǎng)絡(luò)的影響：網(wǎng)絡(luò)不穩(wěn)定時(shí)容易文件丟失、白屏加載資源時(shí)間長、造成網(wǎng)絡(luò)線程阻塞等。

同時(shí)，也讓 App 更新資源變得困難了很多：無法實(shí)時(shí)更新下發(fā)最新資源、緩存失效等。為技術(shù)團(tuán)隊(duì)在更新版本和調(diào)修 Bug 上造成了很大的阻礙。

“H5 容器+動(dòng)態(tài)發(fā)布”

經(jīng)過了多方調(diào)研，「荷小魚」最終選擇使用 mPaaS“H5 容器 + 動(dòng)態(tài)發(fā)布服務(wù)”作為技術(shù)選型，用來解決 App 現(xiàn)階段需要解決的難題。

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

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

離線包是將包括 HTML、JavaScript、CSS 等頁面內(nèi)靜態(tài)資源打包到一個(gè)壓縮包內(nèi)。預(yù)先下載該離線包到本地，然后通過客戶端打開，直接從本地加載離線包，從而最大程度地?cái)[脫網(wǎng)絡(luò)環(huán)境對(duì) H5 頁面的影響。

通過離線包的方式把頁面內(nèi)靜態(tài)資源嵌入到應(yīng)用中并發(fā)布，當(dāng)用戶第一次開啟應(yīng)用的時(shí)候，就無需依賴網(wǎng)絡(luò)環(huán)境下載該資源，而是馬上開始使用該應(yīng)用。

最后，配合動(dòng)態(tài)發(fā)布服務(wù)能力，在推出新版本或是緊急發(fā)布的時(shí)候，開發(fā)者可以把修改的資源放入離線包，通過更新配置讓應(yīng)用自動(dòng)下載更新。因此，開發(fā)者無需通過應(yīng)用商店審核，就能讓用戶及早接收更新。對(duì)頁面資源進(jìn)行動(dòng)態(tài)更新，

應(yīng)用的開發(fā)調(diào)試和發(fā)布部署

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

點(diǎn)擊閱讀原文，觀看完整視頻。

弱網(wǎng)環(huán)境無影響、版本升級(jí)無感知

用戶體驗(yàn)，是每一個(gè)應(yīng)用都需要面臨的生死題。尤其是在雨后春筍般的在線教育應(yīng)用市場(chǎng)中，應(yīng)用的性能對(duì)用戶的留存效果顯得更是尤為重要。

移動(dòng)應(yīng)用開發(fā)者從 DevOps 開始，到開發(fā)、性能監(jiān)控、性能網(wǎng)絡(luò)優(yōu)化解決，在這一整套閉環(huán)流程中，通過借助 mPaaS 具備的開發(fā)測(cè)試、日志分析、卡頓分析、問題修復(fù)模式、熱修復(fù)等各項(xiàng)能力，即可獲取弱網(wǎng)環(huán)境無影響、版本升級(jí)無感知的用戶體驗(yàn)。

E · N · D

點(diǎn)擊文末閱讀原文，觀看CodeHub#4全程回放。

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

版權(quán)聲明：本文內(nèi)容由阿里云實(shí)名注冊(cè)用戶自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，阿里云開發(fā)者社區(qū)不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。具體規(guī)則請(qǐng)查看《阿里云開發(fā)者社區(qū)用戶服務(wù)協(xié)議》和《阿里云開發(fā)者社區(qū)知識(shí)產(chǎn)權(quán)保護(hù)指引》。如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容，填寫侵權(quán)投訴表單進(jìn)行舉報(bào)，一經(jīng)查實(shí)，本社區(qū)將立刻刪除涉嫌侵權(quán)內(nèi)容。 與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。