如何利用@angular/cli V6.0直接开发PWA应用详解


Posted in Javascript onMay 06, 2018

什么是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 查看一下版本号:

如何利用@angular/cli V6.0直接开发PWA应用详解

第二步:new一个空项目

执行:

ng new test-ng-pwa

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

ng serve --open

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

如何利用@angular/cli V6.0直接开发PWA应用详解

第三步:添加PWA支持

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

ng add @angular/pwa

效果如下:

如何利用@angular/cli V6.0直接开发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已经起成功了:

如何利用@angular/cli V6.0直接开发PWA应用详解

如何利用@angular/cli V6.0直接开发PWA应用详解

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

如何利用@angular/cli V6.0直接开发PWA应用详解

这是Windows上的效果:

如何利用@angular/cli V6.0直接开发PWA应用详解

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
详解JS预解析原理
Jun 16 Javascript
JavaScript常用工具函数库汇总
Sep 17 Javascript
Less 安装及基本用法
May 05 #Javascript
es6新特性之 class 基本用法解析
May 05 #Javascript
JS同步、异步、延迟加载的方法
May 05 #Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 #Javascript
JS文件中加载jquery.js的实例代码
May 05 #jQuery
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 #Javascript
js动态引入的四种方法
May 05 #Javascript
You might like
PHP正确配置mysql(apache环境)
2011/08/28 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
php二维码生成以及下载实现
2017/09/28 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
Angular实现form自动布局
2016/01/28 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
Python制作简单的网页爬虫
2015/11/22 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
python基于SMTP协议发送邮件
2019/05/31 Python
python 实现目录复制的三种小结
2019/12/04 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
港澳通行证委托书怎么写
2014/08/02 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
学校计划生育责任书
2015/05/09 职场文书