怎樣利用@angular/cliV6.0直接開發(fā)PWA應(yīng)用-創(chuàng)新互聯(lián)
小編給大家分享一下怎樣利用@angular/cli V6.0直接開發(fā)PWA應(yīng)用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
什么是PWA
PWA（Progressive Web App）利用TLS，webapp manifests和service workers使應(yīng)用程序能夠安裝并離線使用。 換句話說(shuō)，PWA就像手機(jī)上的原生應(yīng)用程序，但它是使用諸如HTML5，JavaScript和CSS3之類的網(wǎng)絡(luò)技術(shù)構(gòu)建的。 如果構(gòu)建正確，PWA與原生應(yīng)用程序無(wú)法區(qū)分。
PWA 的主要特點(diǎn)包括下面三點(diǎn)：
可靠 - 即使在不穩(wěn)定的網(wǎng)絡(luò)環(huán)境下，也能瞬間加載并展現(xiàn)
體驗(yàn) - 快速響應(yīng)，并且有平滑的動(dòng)畫響應(yīng)用戶的操作
粘性 - 像設(shè)備上的原生應(yīng)用，具有沉浸式的用戶體驗(yàn)，用戶可以添加到桌面
PWA 本身強(qiáng)調(diào)漸進(jìn)式，并不要求一次性達(dá)到安全、性能和體驗(yàn)上的所有要求，開發(fā)者可以通過(guò) PWA Checklist 查看現(xiàn)有的特征。
Angular正式發(fā)布了V6.0，我們已經(jīng)可以利用對(duì)應(yīng)的@angular/cli V6.0來(lái)直接開發(fā)PWA應(yīng)用了。下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。
第一步：安裝@angular/cli V6.0
如果你機(jī)器上有老版本，請(qǐng)先卸載。
打開你的終端，執(zhí)行：
npm install -g @angular/cli
安裝成功之后用ng -v 查看一下版本號(hào)：
第二步：new一個(gè)空項(xiàng)目
執(zhí)行：
ng new test-ng-pwa
創(chuàng)建成功之后把項(xiàng)目起來(lái)看一下，執(zhí)行：
ng serve --open
瀏覽器里面看到這個(gè)界面說(shuō)明一切OK：
第三步：添加PWA支持
把項(xiàng)目停掉，然后在終端里面執(zhí)行：
ng add @angular/pwa
效果如下：
因?yàn)锧angular/cli內(nèi)置的Server在--prod 編譯的時(shí)候還不支持service-worker，所以上面裝了一個(gè)第三方的lite-server，它的官方文檔在這里：https://npmjs.com/package/lite-server ，請(qǐng)執(zhí)行：
npm install lite-server --save-dev npm install lite-server --global
裝完之后，執(zhí)行：
npx ng build --prod && lite-server --baseDir dist/test-ng-pwa
然后打開你的瀏覽器訪問(wèn)3000端口，可以看到service-worker已經(jīng)起成功了：
這時(shí)候你已經(jīng)可以把應(yīng)用添加到桌面上了：
這是Windows上的效果：
Linux、iOS、Android、ChromeOS最新的版本都已經(jīng)全部支持，你自己去試試吧！
看完了這篇文章，相信你對(duì)“怎樣利用@angular/cli V6.0直接開發(fā)PWA應(yīng)用”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝各位的閱讀！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
網(wǎng)站題目：怎樣利用@angular/cliV6.0直接開發(fā)PWA應(yīng)用-創(chuàng)新互聯(lián)
本文路徑：http://m.jiaotiyi.com/article/iicdi.html