前言
- 關(guān)于PWA的文檔網(wǎng)上有很多,我這里就不多說了,可以點(diǎn)下面鏈接查看,本文主要講解如何在ionic項(xiàng)目中使用PWA
https://segmentfault.com/a/1190000012353473
https://juejin.im/post/5ac8a67c5188255c5668b0b8 - 我們一般使用ionic開發(fā)移動app,但是PWA是讓網(wǎng)頁應(yīng)用擁有原生app體驗(yàn),所以PWA適用于使用ionic開發(fā)的網(wǎng)頁,如微信公眾號等網(wǎng)頁應(yīng)用
- 注意PWA要求
https協(xié)議或可以用localhost測試
ionic啟用PWA
- ionic項(xiàng)目中已經(jīng)集成了PWA功能,我們只需要啟用即可,參考
- 如下圖,我們只需要把注釋內(nèi)容取消就啟用了PWA
- 如果你的項(xiàng)目本身就是ionic網(wǎng)頁項(xiàng)目,則刪除PWA注釋,并刪除
<script src="cordova.js"></script>
看效果
-
啟用了PWA后,資源從服務(wù)器下載后就緩存到本地,刷新應(yīng)用或重新進(jìn)入應(yīng)用,都是從本地加載資源,所以加載的非???;當(dāng)加載完成后,應(yīng)用才會再請求服務(wù)斷判斷資源是否有更新,如果有,則緩存新資源,下次刷新或重新進(jìn)入應(yīng)用時(shí)應(yīng)用更新;你也可以在這里調(diào)試:https://yanxiaojun617.com/ionic2_tabs_pwa/
-
在手機(jī)瀏覽器訪問應(yīng)用會提示是否添加應(yīng)用圖標(biāo)到桌面,如下圖
注意不是所有瀏覽器都會有提示添加圖標(biāo)到桌面,我這里使用小米手機(jī)默認(rèn)瀏覽器測試的
-
在上圖中點(diǎn)擊確定添加應(yīng)用到桌面,然后點(diǎn)擊桌面圖標(biāo)訪問應(yīng)用,可以看到和原生app幾乎一樣,有啟動頁,沒有瀏覽器地址欄
-
關(guān)于桌面圖標(biāo),應(yīng)用名稱,啟動頁背景,是否顯示瀏覽器等配置都是在
manifest.json文件中配置的;詳細(xì)配置說明點(diǎn)這里
發(fā)布應(yīng)用
- 使用
ionic build --prod把src下的源碼打包到www目錄下,然后把www目錄下的資源放到服務(wù)端即可
其他
- 如果你的項(xiàng)目不使用PWA,又想使用緩存提升用戶體驗(yàn),可以看這篇文章末尾關(guān)于緩存的介紹







