怎樣利用@angular/cli V6.0直接開發(fā)PWA應用

小編給大家分享一下怎樣利用@angular/cli V6.0直接開發(fā)PWA應用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

什么是PWA

PWA（Progressive Web App）利用TLS，webapp manifests和service workers使應用程序能夠安裝并離線使用。 換句話說，PWA就像手機上的原生應用程序，但它是使用諸如HTML5，JavaScript和CSS3之類的網(wǎng)絡(luò)技術(shù)構(gòu)建的。 如果構(gòu)建正確，PWA與原生應用程序無法區(qū)分。

PWA 的主要特點包括下面三點：

• 可靠 - 即使在不穩(wěn)定的網(wǎng)絡(luò)環(huán)境下，也能瞬間加載并展現(xiàn)

• 體驗 - 快速響應，并且有平滑的動畫響應用戶的操作

• 粘性 - 像設(shè)備上的原生應用，具有沉浸式的用戶體驗，用戶可以添加到桌面

PWA 本身強調(diào)漸進式，并不要求一次性達到安全、性能和體驗上的所有要求，開發(fā)者可以通過 PWA Checklist 查看現(xiàn)有的特征。

Angular正式發(fā)布了V6.0，我們已經(jīng)可以利用對應的@angular/cli V6.0來直接開發(fā)PWA應用了。下面話不多說了，來一起看看詳細的介紹吧。

第一步：安裝@angular/cli V6.0

如果你機器上有老版本，請先卸載。

打開你的終端，執(zhí)行：

npm install -g @angular/cli

安裝成功之后用ng -v 查看一下版本號：

第二步：new一個空項目

執(zhí)行：

ng new test-ng-pwa

創(chuàng)建成功之后把項目起來看一下，執(zhí)行：

ng serve --open

瀏覽器里面看到這個界面說明一切OK：

第三步：添加PWA支持

把項目停掉，然后在終端里面執(zhí)行：

ng add @angular/pwa

效果如下：

因為@angular/cli內(nèi)置的Server在--prod 編譯的時候還不支持service-worker，所以上面裝了一個第三方的lite-server，它的官方文檔在這里：https://npmjs.com/package/lite-server ，請執(zhí)行：

npm install lite-server --save-dev
npm install lite-server --global

裝完之后，執(zhí)行：

npx ng build --prod && lite-server --baseDir dist/test-ng-pwa

然后打開你的瀏覽器訪問3000端口，可以看到service-worker已經(jīng)起成功了：

這時候你已經(jīng)可以把應用添加到桌面上了：

這是Windows上的效果：

Linux、iOS、Android、ChromeOS最新的版本都已經(jīng)全部支持，你自己去試試吧！

看完了這篇文章，相信你對“怎樣利用@angular/cli V6.0直接開發(fā)PWA應用”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！