這次給大家帶來怎樣使用@angular/cli V6.0開發PWA應用，使用@angular/cli V6.0開發PWA應用的注意事項有哪些，下面就是實戰案例，一起來看一下。

什么是PWA

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

PWA 的主要特點包括下面三點：可靠 - 即使在不穩定的網絡環境下，也能瞬間加載并展現

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

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

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

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

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

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

打開你的終端，執行：npm install -g @angular/cli

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

第二步：new一個空項目

執行：ng new test-ng-pwa

創建成功之后把項目起來看一下，執行：ng serve --open

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

第三步：添加PWA支持

把項目停掉，然后在終端里面執行：ng add @angular/pwa

效果如下：

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

npm install lite-server --global

裝完之后，執行：npx ng build --prod && lite-server --baseDir dist/test-ng-pwa

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

這時候你已經可以把應用添加到桌面上了：

這是Windows上的效果：

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

總結

以上是生活随笔為你收集整理的php网页安装pwa,怎样使用@angular/cli V6.0开发PWA应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。