首頁 >web前端 >js教程 >利用@angular/cli V6.0開發PWA應用實戰案例詳解(附程式碼)

利用@angular/cli V6.0開發PWA應用實戰案例詳解(附程式碼)

php中世界最好的语言
php中世界最好的语言原創
2018-05-31 11:48:432014瀏覽

這次帶給大家利用@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上的效果:

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

推薦閱讀:

node koa2 mysql bootstrap建立論壇前後端

##JS內this指向使用實例詳解

以上是利用@angular/cli V6.0開發PWA應用實戰案例詳解(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn