前言

關(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)這里