什么是PWA

PWA（Progressive Web App）利用TLS，webapp manifests和service workers使應(yīng)用程序能夠安裝并離線使用。 換句話說(shuō)，PWA就像手機(jī)上的原生應(yīng)用程序，但它是使用諸如HTML5，JavaScript和CSS3之類(lèi)的網(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)畫(huà)響應(yīng)用戶的操作
• 粘性 - 像設(shè)備上的原生應(yīng)用，具有沉浸式的用戶體驗(yàn)，用戶可以添加到桌面

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

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

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

如果你機(jī)器上有老版本，請(qǐng)先卸載。

打開(kāi)你的終端，執(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

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

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

這是Windows上的效果：

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

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。