利用@angular/cli V6.0直接开发PWA应用

Angular正式发布了V6.0,我们已经可以利用对应的@angular/cli V6.0来直接开发PWA应用了。

第一步:安装@angular/cli V6.0

如果你机器上有老版本,请先卸载。

打开你的终端,执行:

npm install -g @angular/cli

安装成功之后用ng -v 查看一下版本号:

0_1525511943942_1.png

第二步:new一个空项目

执行:

ng new test-ng-pwa

创建成功之后把项目起来看一下,执行:

ng serve --open

浏览器里面看到这个界面说明一切OK:

0_1525512173369_5.png

第三步:添加PWA支持

把项目停掉,然后在终端里面执行:

ng add @angular/pwa

效果如下:

0_1525512049594_2.png

因为@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已经起成功了:

0_1525512597244_3.png

0_1525512579997_6.png

这时候你已经可以把应用添加到桌面上了:

0_1525512634683_4.png

这是Windows上的效果:

0_1525512744332_7.png

Linux、iOS、Android、ChromeOS最新的版本都已经全部支持,你自己去试试吧!

本文由 @业余小编 意译改写,请保留署名。

get…

ng update @angular/cli --migrate-only --from=1.7.4
艰难的update…

@wkylin利用@angular/cli V6.0直接开发PWA应用 中说:

ng update @angular/cli --migrate-only --from=1.7.4
艰难的update…

https://update.angular.io/

This post is deleted!
This post is deleted!
This post is deleted!

看了下英文原版,差的有点多啊感觉

Log in to reply

Looks like your connection to Angular开发者 was lost, please wait while we try to reconnect.