如何利用@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上的效果：

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

总结

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

您可能感兴趣的文章:

  • Angular 4环境准备与Angular cli创建项目详解
  • Angular CLI 安装和使用教程
  • angular-cli修改端口号【angular2】
  • Angular2使用Angular CLI快速搭建工程（一）
  • 详解Angular-Cli中引用第三方库
  • 简单谈谈关于Angular Cli打包的事
  • Angular2安装angular-cli
赞 (0)

相关推荐

  • Angular2安装angular-cli

    Angular2安装angular-cli

    最近在学习angular2,并尝试用这个框架来做公司的一个新项目. 终于要开始开发了,等了1个多月. 因为第一次用这个新框架做项目,不太熟悉,就找了angular-cli这个脚手架来搭建项目. 安装了好多次,看了好多博文,终于成功了. 依据本宝宝帮多位小伙伴安装成功的经验,现总结安装angular-cli过程如下: 1.设置淘宝镜像,在 .npmrc文件(该文件在C盘>用户(或user)>你的电脑名字下就可找到)加入下面一句: registry = https://registry.npm.t

  • Angular 4环境准备与Angular cli创建项目详解

    Angular 4环境准备与Angular cli创建项目详解

    本文介绍的是为Angular4.0准备环境和学会使用Angular cli来创建项目的相关内容,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍: 1.环境准备: 1)在开始工作之前我们必须设置好开发环境, 如果你的机器上还没有安装Node.js和npm,请安装他们 (这里特别推荐使用淘宝的镜像cnpm,记得以后把npm的指令改为cnpm就可以了) npm install -g cnpm --registry=https://registry.npm.taobao.org 然后我们可

  • 简单谈谈关于Angular Cli打包的事

    本文主要给大家介绍了关于Angular Cli打包的事,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.引言 Angular从开发再到生产环境部署都离不开Angular Cli工具集,而Angular Cli本质上是使用 Webpack(当前使用版本为2) 来打包资源. Webpack 本身并不复杂,略用过一点都清楚,只需要创建一个 webpack.config.js 的文件并简单的配置,就可以把一个复杂的应用所有文件全部打包成若干静态资源文件. 然而一个复杂的应用免不了使

  • Angular2使用Angular CLI快速搭建工程（一）

    Angular2使用Angular CLI快速搭建工程（一）

    前言: 本文适合Angular2的初学者阅读: 时下web前端发展迅猛,新框架层出不穷,大家都知道三驾马车VueJS,Angular2,React.国内VueJS非常热门,百度热点趋势以1000%的涨幅在增加.Angular2在国外非常受欢迎,在国内的粉丝还非常少,文章不多,究其原因有这么几点主要是学习曲线陡峭,上手困难,(1)angular本身概念难懂,(2)使用typescript开发,用到很多es6特性:(3)配置太多,复杂,工程架构搭建上手难度大.本文为了解决项目搭建的问题,详细的一步步

  • Angular CLI 安装和使用教程

    Angular CLI 安装和使用教程

    背景介绍 关于Angular版本,Angular官方已经统一命名Angular 1.x同一为Angular JS:Angular 2.x及以上统称Angular: CLI是Command Line Interface的简写,是一种命令行接口,实现自动化开发流程,比如:ionic cli.vue cli等:它可以创建项目.添加文件以及执行一大堆开发任务,比如测试.打包和发布. 安装Angular CLI 1.首先确认安装了node.js和npm // 显示当前node和npm版本 $ node -

  • 详解Angular-Cli中引用第三方库

    最近在学习angular(AngularJS 2),根据教程使用angular-cli新建项目,然而在添加JQuery和Bootstrap第三方库时遇到了问题... 初试 我最初的想法是直接将相对路径写到index.html即可,如下: <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow&qu

  • angular-cli修改端口号【angular2】

    找到node_modules/angular-cli/lib/config/schema.json default值就是默认的端口 "serve": { "description": "Properties to be passed to the serve command", "type": "object", "properties": { "port": { &

  • 如何利用@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 的主要特点包括下面三点: 可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现 体验 - 快速响应,并且有平滑的动画响应用户的操作 粘性 - 像设备上的

  • C#利用ASP.NET Core开发学生管理系统详解

    C#利用ASP.NET Core开发学生管理系统详解

    目录 涉及知识点 创建项目 登录模块 1. 创建控制器--LoginController 2. 创建登录视图 3. 创建用户模型 4. 创建数据库操作DataContext 5. 创建数据库和表并构造数据 6. 添加数据库连接配置 7. 添加注入信息 8. 运行测试 随着技术的进步,跨平台开发已经成为了标配,在此大背景下,ASP.NET Core也应运而生.本文主要利用ASP.NET Core开发一个学生管理系统为例,简述ASP.NET Core开发的常见知识点,仅供学习分享使用,如有不足之处,

  • Android利用Dom对XML进行增删改查操作详解

    Android利用Dom对XML进行增删改查操作详解

    1. 概述 平常我们一般是使用JSON与服务器做数据通信,JSON的话,直接用GSON或者其他库去解析很简单.但是,其他有些服务器会返回XML格式的文件,这时候就需要去读取XML文件了. XML的解析有三种方式,在Android中提供了三种解析XML的方式:DOM(Document Objrect Model) , SAX(Simple API XML) ,以及Android推荐的Pull解析方式,他们也各有弊端,而这里来看看使用DOM的方式. 2. Dom解析 DOM解析器在解析XML文档时,

  • Windows配置VSCode+CMake+Ninja+Boost.Test的C++开发环境(教程详解)

    平时习惯了在Linux环境写C++,有时候切换到Windows想继续在同一个项目上工作,重新配置环境总是很麻烦.虽然Windows下用Visual Studio写C++只需要双击个图标,但我还是想折腾一下VS Code的环境配置.原因主要有两点:一是个人习惯上各种语言都在VS Code里面写,利用Git同步代码可以很方便地在不同平台开发同一个项目:二是有些情形下无法使用图形化界面,比如为Git配置CI(持续性集成)时显然不能用Visual Studio这个图形化的IDE来执行Windows环境的

  • Vue2.0 $set()的正确使用详解

    vue2.0 给data对象新增属性,并触发视图更新 如下代码,给 student对象新增 age 属性 data () { return { student: { name: '', sex: '' } } } 众所周知,直接给student赋值操作,虽然可以新增属性,但是不会触发视图更新 mounted () { this.student.age = 24 } 原因是:受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除.因为 Vue.js 在初始化实例时将属性转为 getter

  • Web应用开发TypeScript使用详解

    Web应用开发TypeScript使用详解

    目录 一.什么是 TypeScript 二.TypeScript 简史 三.为什么我们要使用TypeScript? TypeScript的附加功能 四.大牛现身说法: 五.你可能不知道的TypeScript顶级功能 1.面向对象程序设计 2.接口.泛型.继承和方法访问修饰符 3.编译时/静态类型检查 4.比JavaScript代码更少 5.可读性 6.兼容性 7.提供可以将代码转换为JavaScript等效代码的“编译器” 8.支持模块 9.ES6 功能支持 10.在流行的框架中使用 11.减少

  • JS利用Intl解决前端日期和时间的格式化详解

    目录 简介 构造 locales 参数 options 参数 Intl.NumberFormat Intl.DateTimeFormat 简介 Intl 是一个全局对象,它的主要用途就是展示国际化信息,可以将字符串,数字和日期和时间转换为指定地区的格式. 在前端开发中,我们通常会使用第三方库来处理日期和数字的格式化,比如 numeral.dayjs.date-fns 等库,这些库包含了许多的功能,如果我们在项目中仅仅只使用了格式化的功能的话其实是可以不用引入这些库的,JavaScript 自带的

  • Android 开发中Volley详解及实例

    Android 开发中Volley详解及实例 最近在做项目的时候,各种get和post.简直要疯了,我这种啥都不了解的,不知道咋办了,然后百度看了下,可以用volley进行网络请求与获取,下面就介绍下volley的用法. volley有三种方式:JsonObjectRequest,JsonArrayRequest,StringRequest.其实都是差不多了,举一反三就ok了,这里我就讲下JsonObjectRequest. 方法如下: JsonObjectRequest jsonObjectR

  • 使用Webpack 搭建 Vue3 开发环境过程详解

    从零开始使用 Webpack 搭建 Vue3 开发环境 创建项目 首先需要创建一个空目录,在该目录打开命令行,执行 npm init 命令创建一个项目,这个过程会提示输入一些内容,完成后会自动生成一个 package.json 文件 Webpack 的配置文件 project project-name + |- index.html |- package.json + |- webpack.config.js + |- /src + |- index.js webpack.config.js '

  • SpringBoot中dubbo+zookeeper实现分布式开发的应用详解

    SpringBoot中dubbo+zookeeper实现分布式开发的应用详解

    总体实现思路是启动一个生产者项目注册, 将所含服务注册到zookeeper的注册中心, 然后在启动一个消费者项目,将所需服务向zookeeper注册中心进行订阅, 等待注册中心的通知 注册中心基于负载均衡算法给消费者匹配到合适的生产者主机,然后通知消费者可以使用 实现生产者 导入zookeeper依赖包 <!-- Dubbo Spring Boot Starter --> <dependency> <groupId>org.apache.dubbo</groupI

随机推荐