如何利用@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 相关文章推荐
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
动态更新highcharts数据的实现方法
May 28 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
详解Node.js 命令行程序开发教程
Jun 07 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
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
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
学python最电脑配置有要求么
2020/07/05 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
高中自我鉴定范文
2013/11/03 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
求职信怎么写范文
2014/05/26 职场文书
节水宣传标语口号
2015/12/26 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
hive数据仓库新增字段方法
2022/06/25 数据库